React Hook的使用

一、React Hook/Hooks是什么?

1、Hook是React 16.8.0版本增加的新特性/新语法
2、可以让你在函数组件中使用 state 以及其他的 React 特性

二、State Hook

介绍： State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
语法： const [xxx, setXxx] = React.useState(initValue)

function Demo() {
    const [count, setCount] = React.useState(0)

    // 加的回调
    function add () {
        // setCount(count+1)  // 第一种写法
        setCount(count => count+1)
    }

    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点我+1</button>
        </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

三、Effect Hook

介绍： Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子-componentDidMount()-componentDidUpdate()-componentWillUnmount())
语法：

useEffect(() => { 
  // 在此可以执行任何带副作用操作
  return () => { // 在组件卸载前执行
    // 在此做一些收尾工作, 比如清除定时器/取消订阅等
  }
}, [stateValue]) // 如果指定的是[], 回调函数只会在第一次render()后执行
1
2
3
4
5
6

React.useEffect(()=> {
    let timer = setInterval(()=> {
        setCount(count => count+1)
    }, 2000)
    return () => {
        clearInterval(timer)
    }
}, [])
1
2
3
4
5
6
7
8

四、Ref Hook

介绍： Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据（类似于React.createRef()）
语法： const refContainer = useRef()

function Demo() {
    const myRef = React.useRef()

    // 提示输入的回调
    function show() {
        console.log(myRef.current.value)
    }

    return (
        <div>
            <input ref={myRef} type="text" />
            <button onClick={show}>点击提示数据</button>
        </div>
    )
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

五、卸载组件

root.unmount()
1