React---新扩展Hooks和Fragment

2021年09月15日 阅读数:1
这篇文章主要向大家介绍React---新扩展Hooks和Fragment,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

1、Hooks

1. React Hook/Hooks是什么?

  (1). Hook是React 16.8.0版本增长的新特性/新语法
  (2). 能够让你在函数组件中使用 state 以及其余的 React 特性

2. 三个经常使用的Hook

  (1). State Hook: React.useState()
  (2). Effect Hook: React.useEffect()
  (3). Ref Hook: React.useRef()

3. State Hook

  (1). State Hook让函数组件也能够有state状态, 并进行状态数据的读写操做
  (2). 语法: const [xxx, setXxx] = React.useState(initValue)  
  (3). useState()说明:
        参数: 第一次初始化指定的值在内部做缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
  (4). setXxx()2种写法:
          setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
          setXxx(value => newValue): 参数为函数, 接收本来的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

4. Effect Hook

  (1). Effect Hook 能够让你在函数组件中执行反作用操做(用于模拟类组件中的生命周期钩子)
  (2). React中的反作用操做:
        发ajax请求数据获取
        设置订阅 / 启动定时器
        手动更改真实DOM
  (3). 语法和说明: 
          useEffect(() => { 
            // 在此能够执行任何带反作用操做
            return () => { // 在组件卸载前执行
              // 在此作一些收尾工做, 好比清除定时器/取消订阅等
            }
          }, [stateValue]) // 若是指定的是[], 回调函数只会在第一次render()后执行
    
  (4). 能够把 useEffect Hook 看作以下三个函数的组合
          componentDidMount()
          componentDidUpdate()
          componentWillUnmount() 

5. Ref Hook

  (1). Ref Hook能够在函数组件中存储/查找组件内的标签或任意其它数据
  (2). 语法: const refContainer = useRef()
  (3). 做用:保存标签对象,功能与React.createRef()同样

6.代码

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 
 4 //类式组件
 5 /* class Demo extends React.Component {
 6 
 7     state = {count:0}
 8 
 9     myRef = React.createRef()
10 
11     add = ()=>{
12         this.setState(state => ({count:state.count+1}))
13     }
14 
15     unmount = ()=>{
16         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
17     }
18 
19     show = ()=>{
20         alert(this.myRef.current.value)
21     }
22 
23     componentDidMount(){
24         this.timer = setInterval(()=>{
25             this.setState( state => ({count:state.count+1}))
26         },1000)
27     }
28 
29     componentWillUnmount(){
30         clearInterval(this.timer)
31     }
32 
33     render() {
34         return (
35             <div>
36                 <input type="text" ref={this.myRef}/>
37                 <h2>当前求和为{this.state.count}</h2>
38                 <button onClick={this.add}>点我+1</button>
39                 <button onClick={this.unmount}>卸载组件</button>
40                 <button onClick={this.show}>点击提示数据</button>
41             </div>
42         )
43     }
44 } */
45 
46 function Demo(){
47     //console.log('Demo');
48 
49     const [count,setCount] = React.useState(0)
50     const myRef = React.useRef()
51 
52     React.useEffect(()=>{
53         let timer = setInterval(()=>{
54             setCount(count => count+1 )
55         },1000)
56         return ()=>{
57             clearInterval(timer)
58         }
59     },[])
60 
61     //加的回调
62     function add(){
63         //setCount(count+1) //第一种写法
64         setCount(count => count+1 )
65     }
66 
67     //提示输入的回调
68     function show(){
69         alert(myRef.current.value)
70     }
71 
72     //卸载组件的回调
73     function unmount(){
74         ReactDOM.unmountComponentAtNode(document.getElementById('root'))
75     }
76 
77     return (
78         <div>
79             <input type="text" ref={myRef}/>
80             <h2>当前求和为:{count}</h2>
81             <button onClick={add}>点我+1</button>
82             <button onClick={unmount}>卸载组件</button>
83             <button onClick={show}>点我提示数据</button>
84         </div>
85     )
86 }
87 
88 export default Demo

2、Fragment

1.做用:能够不用必须有一个真实的DOM根标签了react

2.代码ajax

 1 import React, { Component,Fragment } from 'react'
 2 
 3 export default class Demo extends Component {
 4     render() {
 5         return (
 6             <Fragment key={1}>
 7                 <input type="text"/>
 8                 <input type="text"/>
 9             </Fragment>
10         )
11     }
12 }

 

 

本文同步分享在 博客“半指温柔乐”(CNBlog)。
若有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一块儿分享。数组