React使用useEffect模拟生命周期

一、useEffect是什么？

副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。

useEffect(()=>{//副作用函数
    return ()=>{ // 返回函数

    }
},[依赖参数])

二、useEffect可以做什么？

• 挂载阶段：
  从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件挂载完成之后，将队列（链表）中的副作用函数执行，并将副作用函数的返还函数，推入一个新的队列（链表）
• 更新阶段 - !!! 更新阶段不同于其他阶段对应的函数是否要执行，取决于依赖参数：
  从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行前会判断该 useEffect 的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数。
• 卸载阶段：
  组件即将卸载时，找出其对应的返回函数队列，依次执行

三、常规处理副作用的几种情况：

依赖参数不同时有不同的效果：
1、为空： 组件的任何更新，该 useEffect 对应的返回函数和函数都执行

useEffect(()=>{//副作用函数
    return ()=>{ // 返回函数

    }
})

2、为空数组: 不监听组件的更新

useEffect(()=>{//副作用函数
    return ()=>{ // 返回函数

    }
},[])

3、数组中有具体依赖：对应的依赖数据，有变化的时候，才会执行

useEffect(()=>{//副作用函数
    return ()=>{ // 返回函数

    }
},[state])

1、组件挂载完之后做某事

useEffect(()=>{
    console.log("组件挂载完之后执行");
    return ()=>{

    }
  },[]);

2、组件挂载完成及更新完成做某事

useEffect(()=>{
    console.log("组件挂载完成之后及更新完成之后执行");
})

3、组件更新完做某事

const isMounted = useRef(false);
useEffect(()=>{
    if(isMounted.current){
        console.log("组件更新完成")
    } else {
      isMounted.current = true;
    }
})

4、组件即将卸载做某事

useEffect(()=>{
    return ()=>{
      console.log("组件即将卸载时执行");
    }
},[]);

参考：

useEffect使用 - 简书