useEffect使用

1.useEffect是什么？

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

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

    }
},[依赖参数])

---

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

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("组件即将卸载时执行");
       }
   },[]);