你不知道的React Hook

前言

自 React16.8 正式发布React Hook之后，已经过去了5个版本（本博客于React 16.13.1版本时发布）。自己使用Hook已经有了一段时间，不得不说在最初使用Hook的时候也进入了很多误区。在这篇文章中，我会抛出并解答我遇到的一些问题，同时整理对Hook的心得理解。

1. Hook的执行流

在解释后续内容之前，首先我们要明确Hook的执行流。

我们在写 Hook Component 的时候，本质是 Function Component + Hook ，Hook只是提供了状态管理等能力。对 Function Component 来说，每一次渲染都会从上到下将所有内容重新执行一次，如果有变量，就会创造新变量。

来看一个简单的例子

// father.js

import Child from './child';

function Father() {
    const [num, setNum] = useState(0);

  	function handleSetNum() {
        setNum(num+1);
    }
  
    return (
        <div>
            <div onClick={handleSetNum}>num: {num}</div>
            <Child num={num}></Child>
        </div>
    );
}
复制代码

// child.js

function Child(props) {
    const [childNum, setChildNum] = useState(0);
  
    return (
        <>
            <div>props.num: {props.num}</div>
            <div onClick={() => {setChildNum(childNum + 1)}}>
                childNum: {childNum}
            </div>
        </>
    );
}
复制代码

然后我们来看看执行流：

father执行 useState ，useState 返回一个数组，然后解构赋值给 num 和 setNum ，然后创建函数 handleSetNum ，把 jsx代码返回出去交给 react 处理。

child接受到来自father传递的数据，创建props变量并赋值，执行 useState ，解构赋值给 childNum 和 setChildNum ，把 jsx代码返回出去交给 react 处理。

接下来，点击father中那个绑定了点击事件的变量，触发执行 handleSetNum 方法，修改Hook State，让num值加一。因为状态发生改变，会去触发react的重渲染。

然后我们再来看看第二次重渲染时的部分执行流：

father会 **再次执行 useState **； useState 返回一个 新数组 ，然后解构赋值给 **新创建的 num 和 setNum **；随后 创建一个新的函数 handleSetNum

child接受到来自father传递的数据，创建 新变量props并赋值；再次执行 useState ，useState 会 返回一个新数组，但因为childNum没有发生变化，新数组里面的值全等于旧数组里面的值，解构赋值给 新变量 childNum 和 setChildNum

我们可以通过全局变量进行验证

// father.js

window.selfStates = []; // 创建一个全局的变量存储
window.selfStates2 = []; // 创建一个全局的变量存储

function Father() {
    const [num, setNum] = useState([0]); // 把数字改成一个数组
    const [num2, setNum2] = useState([0]); // 设置一个对照组，对照组就初始化，不进行修改
    window.selfStates.push(num);
    window.selfStates2.push(num);
  
  	function handleSetNum() {
        setNum([num[0] + 1]) // 不直接改值，避免影响旧数组
    }

  	...
}
复制代码

之后可以在浏览器的控制台里输出，看看结果

当然，我们创建的 handleSetNum 函数也可以用这样的方法进行验证。

所以，看到这里，我们已经了解了hook的执行流：每次渲染，每次更新，都会让整个内容全部更新一次，并且创建新的变量。

2. useState不要传递执行函数进行初始化

直接上代码

function initState() {
  	console.log('run'); // 执行一次就知道了
		return 1;
}

function Father() {
  	const [num, setNum] = useState(initState()); // ❎
  	const [num, setNum] = useState(initState); // ✅
}
复制代码

因为每次更新，都会执行一次useState，根据useState的机制，它会进行数据存储：如果没有数据，进行初始化，并创建新数据，存储起来；如果有数据，不进行初始化操作，返回数据的值。

但是如果我们使用 useState(func()) 这样形式进行初始化，那么每次都会先执行func，再把执行后得到的值作为参数传递给useState，但是如果已经初始化过了，那么会跳过对这个参数的初始化处理，每次更新时都会浪费一次跑func函数的时间。

3. Capture value

Hook Component

来看下面这个代码

function Father() {
    const [num, setNum] = useState(0);

    function handleSetNum() {
        setNum(num+1);
    }

  	// 延迟3秒后输出num值
    function handleGetNum() {
        setTimeout(() => {
            alert(num);
        }, 3000);
    }

    return (
        <div>
            <div onClick={handleSetNum}>num: {num}</div>
            <div onClick={handleGetNum}>点我输出内容</div>
        </div>
    );
}
复制代码

假设现在num值为0，我先触发 handleGetNum ，然后再触发1次 handleSetNum 修改num的值，3秒倒计时结束后，输出的num值是多少？

留点空间来思考一下

下面公布答案

答案是0

如果我们使用 Class Component 来做，得到的结果却相反，输出的值为1。

在Hook Component中，这种现象被称作 Capture value

为什么会有这样的情况？

解答这个问题，这还是得回到最初的起点：Hook执行流

我们知道每次渲染都会创建该次渲染的新变量，因此在最初的状态下，我用handleGetNum_0来表示最初的 handleGetNum 函数，num_0表示最初的num。

我们先触发 handleGetNum，随后触发 handleSetNum ，之后数据更新，创建新函数 handleGetNum_1 和新变量 num_1。

在这个过程中我们实际点击的是handleGetNum_0，handleGetNum_0里操作的是num_0，所以 alert 的内容还是 num_0 的值。

Class Component

那么问题来了，为什么 Class Component 不会有这样的情况发生？

我们来看一下如果用 Class Component 会怎么写

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: 0
        }
    }

    handleSetNum = () => {
        this.setState({num: this.state.num+1});
    }

    handleGetNum = () => {
        setTimeout(() => {
            alert(this.state.num);
        }, 3000);
    }

    render() {
        return (
            <div>
                <div onClick={this.handleSetNum}>num: {this.state.num}</div>
                <div onClick={this.handleGetNum}>点我输出内容</div>
            </div>
        )
    }
}
复制代码

我们在 Class Component 中获取参数时，是通过 this.state.num 进行获取，this会指向最新的state值，因此不会出现 Capture Value的情况。

如果我们想在 Class Component 中实现 Capture Value，一个简单的办法就是做一个闭包，这个比较简单，因此不在文中详细陈述。

那么如果我们不想在 Hook Component 中触发 Capture Value 应该怎么做？

答案就是用 useRef

function App() {
    const [num, setNum] = useState(0);
    const nowNum = useRef(0); // 额外创建一个Ref对象，因为Ref对象更新不会触发react的重渲染

    function handleSetNum() {
        setNum(num + 1);
        nowNum.current = num + 1; // 给num赋值的同时也给nowNum赋值
    }

    function handleGetNum() {
        setTimeout(() => {
            alert(nowNum.current);
        }, 3000);
    }
  
  	...
}
复制代码

我们使用 nowNum.current 就类似 this.state ，因为Ref会创建一个对象，这个对象会指向最新的值。

4. 需要用useCallback和useMemo吗

useCallback 和 useMemo 比较类似，我们放在一起来说。

他们都是用来做数据缓存的，区别就在于useCallback返回的是函数，useMemo返回的是函数执行后的返回值。

先上结论

什么时候需要用他们：

成本很高的计算

数据需要传递给其他组件，且数据为对象、函数

什么时候不需要用他们：

仅仅在组件内部使用，不存在向下传递数据。

如果要向下传递数据，但数据值是非对象、非函数的值

如果我有一个jsx代码，里面有一个值需要通过计算得出。这个计算非常复杂，计算成本很高，但是计算时用到的参数基本没有变化，那么此时用useMemo进行包裹，就能节省很多计算成本。

小心对象和函数！

如果有一个父组件，有一个子组件，父组件的每次更新一定会触发子组件的更新。使用useMemo包裹子组件，能避免子组件的无意义更新。但是！！如果父组件传递给子组件的参数中有对象或者函数，传递的对象和函数一定要用useMemo或者useCallback进行包裹，因为每次更新，都会创建新对象和新函数函数，即使子组件用useMemo进行了包裹，即使传递的内容没有变化，但是props中的引用都发生了改变，useMemo会认为props发生了变化，依旧会触发子组件的更新。

tip: 通过useState得到的变量不需要使用useMemo，因为useState已经进行了处理，保证未更新的值引用不变

const num = useState(0); // 因为返回的是一个数组，每次更新num会变，但是如果具体的state值没有变化，num[0]和num[1]的引用不会变。

const [num, setNum] = useState(0); // 这种情况下，如果num的值没变，每次更新num和setNum的引用就不会变
复制代码

还要明确一点，很多时候，重新执行一段代码（不用useMemo/useCallback）远比存储、比较、取值（使用useMemo/useCallback）来得更快。而且在很多情况，即使用 useMemo/useCallback 进行优化，优化效果也根本看不出来（现代浏览器和计算机速度并不慢）

总结

Hook Component 每一次渲染都会从上到下将所有内容重新执行一次，如果有变量，就会创造新变量。
useState(func()) 不要这样写代码！
Hook Component 具备 Capture value 的特性
- 可以用 useref 避开 Capture value
小心变量和函数！
useCallback 和 useMemo 的注意事项
什么时候可以用他们：
1. 成本很高的计算
2. 数据需要传递给其他组件，且数据为对象、函数
什么时候不需要用他们：
1. 仅仅在组件内部使用，不存在向下传递数据。
2. 如果要向下传递数据，但数据值是非对象、非函数的值
有时候 重新执行一段代码远比从缓存中获取一段结果来得更快