1.useEffect是什么？
副作用钩子：用于处理组件中的副作用，用来取代生命周期函数。
useEffect(()=>{//副作用函数
return ()=>{ // 返回函数
}
},[依赖参数])
2.useEffect可以做什么？
- 挂载阶段：
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件挂载完成之后，将队列（链表）中的副作用函数执行，并将副作用函数的返还函数，推入一个新的队列（链表） - 更新阶段 - !!! 更新阶段不同于其他阶段对应的函数是否要执行，取决于依赖参数：
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行前会判断该 useEffect 的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数。 - 卸载阶段：
组件即将卸载时，找出其对应的返回函数队列，依次执行
3.常规处理副作用的几种情况：
依赖参数不同时有不同的效果：
1.参数为空： 组件的任何更新，该 useEffect 对应的返回函数和函数都执行
2.为空数组: 不监听组件的更新
3.数组中有具体依赖：对应的依赖数据，有变化的时候，才会执行
- 组件挂载完之后做某事
1 useEffect(()=>{
2 console.log("组件挂载完之后执行");
3 return ()=>{
4
5 }
6 },[]);
- 组件挂载完成及更新完成做某事
1 useEffect(()=>{
2 console.log("组件挂载完成之后及更新完成之后执行");
3 })
- 组件更新完做某事
1 const isMounted = useRef(false);
2 useEffect(()=>{
3 if(isMounted.current){
4 console.log("组件更新完成")
5 } else {
6 isMounted.current = true;
7 }
8 })
- 组件即将卸载做某事
1 useEffect(()=>{
2 return ()=>{
3 console.log("组件即将卸载时执行");
4 }
5 },[]);
用useEffect模拟class组件的生命周期
模拟componentDidUpdate使用，可指定更新时依赖的数据
模拟componentDidMount使用，[]作第二个参数
模拟componentWillUnmount使用，通过return函数，[]作第二个参数
参考：
useEffect使用 - 简书
https://www.jianshu.com/p/af2455d4173f