React useEffect的使用

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

熟悉Class类组件的生命周期的话，我们可以理解为useEffect就是componentDidMount, componentDidUpdate和componentWillUnMount这三个生命周期函数的组合；

useEffect是组件第一次渲染和每次更新，即componentDidMount，componentDidUpdate时都会执行的，与 componentDidMount 或 componentDidUpdate 不同的是使用 useEffect 调度的 effect 不会阻塞浏览器更新屏幕，这让你的应用看起来响应更快。

useEffect(
    create: () => (() => void) | void,
    deps: Array<mixed> | void | null,
  ): void

useEffect有两个参数。

create: 创建订阅的函数，每次执行useEffect时都会执行一次，对应到生命周期里就是componentDidMount和componentDidUpdate的时候。create函数可以返回一个清除函数，该清除函数会在componentDidUpdate和componentWillUnMount时执行，一般在这个时候清除副作用，如果不需要清除的话，不写返回的清除函数即可。

deps：依赖项组成的数组，这个参数可以控制useEffect的方法不要每次执行，只有数组里的依赖的值发生改变时再执行。
如果useEffect只需要在第一次渲染时执行一次，deps传入空数组即可；
如果deps不传，则组件每次更新时都会执行useEffect里的方法；

e.g.

function Child(props){
    useEffect(()=>{
        console.log(props.count);
        return function(){
            console.log('off', props.count);
        }
    }, [props.count]);
    return (
        <div>{props.count}</div>
    )
}

function App(){
    const [count, setCount] = useState(0);

    useEffect(()=>{},);

    return (
        <div>
            {count > 3 ? null:<Child count={count} />}
            <button onClick={()=>{setCount(count=>count+1)}}>+</button>
            <button onClick={()=>{setCount(count=>count-1)}}>-</button>
        </div>
    )
}

export default App;