react-hooks

什么是hooks

1. Hook事react 16.8.0版本增加的新特性/新语法
2. 可以让我们函数组件中使用state以及其他的React特性

三个常用的Hook

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

State Hook

1. State Hook让函数也可以有state状态，并进行状态数据的读写操作
2. 语法：const [age, setAge] = React.useState(19)
3. useState说明：
   • 参数：第一次舒适化制定的值在内部作缓存
   • 返回值：包含2个元素的数组，第一个为内部当前状态值，第2个为更新状态值的函数
4. setXX()两种写法
   • setXxx(newValue): 参数为非函数值，直接制定新的状态值，内部用其覆盖原来的状态值
   • setXxx(value => newValue):参数为函数，接受原来的状态值，返回新的状态值，内部用其覆盖原来的状态值

function Demo() {
    const [age, setAge] = React.useState(19);
    function changeAge () {
        // setAge使用一
        // setAge(20);
        
        // setAge使用二
        setAge(age => age + 1);
    }
    return (
        <div>
            <h2>我今年{age}岁</h2>
            <button onClikc={changeAge}>修改年龄</button>
        </div>
    )
}

Effect Hook

1. Effect hook可以让我们的函数组件中执行副作用（用于模拟类组件中的生命周期狗子）
2. React中的副作用擦欧哦：
   • 发ajax请求数据获取
   • 设置订阅 / 启动定时器
   • 手动更改真实dom（尽量避免）
3. 语法和说明

useEffect(() => {
    // 在此可以执行任何副作用操作
    return () => {
        // 在此做一些收尾工作，比如清除定时器/取消订阅等
    }
}, [stateValue]); // 如果指定的是[], 回调函数智慧在第一次render()后执行

4. 可以吧useEffect Hook看作以下三个函数的组合
   • componentDidMount
   • componentDidUpdate
   • componentWillUnmount

function Demo() {
    let [count, setCount] = React.useState(50);
    React.useEffect(() => {
        const timer = setInterval(() => {
            setCount((count) => --count)
        });
        return () => {
            clearInterval(timer);
        }
    }, [])
    function unmount() {
        ReactDom.unmountComponnentAtNode(document.getElementById('root'));
    }
    return (
        <div>
            <div>倒计时{count}</div>
            <button onClick={unmount}>卸载组件</button>
            
        </div>
    )
}

Ref Hook

1. Ref Hook可以在函数组件中存储/查找组件内的标签或其他数据
2. 语法： const refContainer = useRef()
3. 作用：保存标签对象，功能与React.createRef()一样