react useEffect理解

1.useEffect是什么？

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

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

    }
},[依赖参数])

　　

2.useEffect可以做什么？

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

3.常规处理副作用的几种情况：

依赖参数不同时有不同的效果：

　1.参数为空： 组件的任何更新，该 useEffect 对应的返回函数和函数都执行

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

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

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模拟class组件的生命周期

 

模拟componentDidUpdate使用，可指定更新时依赖的数据

模拟componentDidMount使用，[]作第二个参数

模拟componentWillUnmount使用，通过return函数，[]作第二个参数

 

参考：

useEffect使用 - 简书
https://www.jianshu.com/p/af2455d4173f