[JavaScript知识库]react中用useEffect模拟组件生命周期

1. react中的生命周期

react中的class组件是拥有生命周期的。
生命周期分为：mounting，updating，unmounting三个阶段。

不同生命周期阶段包括不同的生命周期函数：
mounting阶段：constructor，componentWillMount，render，componentDidMount
updating阶段：componentWillReceiveProps，shouldComponentUpdate，componentWillUpdate，render，componentDidUpdate
unmounting阶段：componentWillUnmount

2. react中的函数组件可以用useEffect模拟生命周期

在16.8之后，react提供了hooks，因此函数组件也可以用hooks进行状态管理并且也可以用useEffect模拟class组件的生命周期。

    // 模拟 class 组件的 componentDidMount 和 componentDidUpdate
    // 第一个参数执行函数，第二个参数不传
    useEffect(() => {
      console.log('DidMount 和 DidUpdate')
    })
 
    // 模拟 class 组件的 componentDidMount
    // 第一个参数执行函数，第二个参数传空数组[]
     useEffect(() => {
        console.log('加载完了componentDidMount')
     }, []) // 第二个参数是 [] （不依赖于任何 state）
 
     // 模拟 class 组件的 componentDidUpdate
     // 第一个参数执行函数，第二个参数传state数组
     useEffect(() => {
         console.log('更新了')
     }, [count, name]) // 第二个参数就是依赖的 state
 
    // 模拟 class 组件的 componentDidMount 和 componentWillUnmount
    useEffect(() => {
        let timerId = window.setInterval(() => {
            console.log(Date.now())
        }, 1000)
 
        // 返回一个函数
        // 模拟 componentWillUnmount 组件销毁的时候 停止计时器
        return () => {
            window.clearInterval(timerId)
        }
    }, [])

3. useEffect中第一个参数是一个执行函数，在有依赖项时它的return什么时候执行？

当第二个参数依赖项不为空数组时，前一个函数中的return会在再次执行useEffect前执行，可以用于回收之前的计时器等。

React.useEffect(() => {
        // 执行计时
        let timeGo;
        if (open) {
            timeGo = setInterval(() => {
                if (sec === 0) {
                    setSec(30);
                    setOpen(false);
                } else {
                    setSec(sec - 1)
                };
            }, 1000);
        };
        return () => { clearInterval(timeGo); }
    });

4. useEffect的依赖项是做浅比较

因为react中一般是浅比较，所以useEffect的依赖项如果需要比较对象类型的话，需要用JSON.stringfy来进行转换比较。

5. useEffect的副作用

useEffect第一个参数是一个回调函数，在依赖项发生变化的时候，会执行它，也被称为副作用函数。
可以在里面进行相应的生命周期阶段的操作，异步请求，设定计时器等，可以通过副作用函数的return来清除副作用，比如回收计时器。