Effect-hook

Effect Hook

副作用函数
下面操作在函数中，会产生副作用

1. ajax请求
2. 计时器
3. 其他异步操作
4. 更改真实dom对象
5. 本地存储
6. 其他会对外部产生影响的操作

函数：useEffect，该函数接受一个函数作为参数，接收的函数是需要进行副作用操作的函数

细节

1. 副作用函数的运行时间点，是在页面完成真实的ui渲染之后，因此它的执行是异步的，并且不会阻塞浏览器（在处理一些复杂的副作用操作时候不会影响dom的渲染，因为是在渲染之后ui更新之后）
   1. 与类组件中componentDidMount和componentDidUpdate的区别
   2. componentDidMount和componentDidUpdate，更改了真实Dom，但是用户还没有看到UI更新，是同步的
   3. useEffect中的副作用函数，更改了真实DOM，并且用户已经看到了UI更新，是异步的
2. 每个函数组件中，可以多次使用useEffect，但不要放在判断和循环等代码块中
3. useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫做清理函数
   1. 返回的清理函数，首次渲染组件不会运行
   2. 清理函数运行时间点，在每次运行副作用函数之前
   3. 组件被销毁时一定会运行
4. useEffect函数，可以传递第二个参数，
   1. 第二个参数是一个数组
   2. 数组中记录该副作用函数的依赖数据
   3. 当组件重新渲染时候，如果依赖的数据发生改变才会执行副作用函数，反之不会执行副作用函数
   4. 如果依赖数据没有发生改变，副作用函数仅在第一次渲染后执行，清理函数仅在卸载组件后运行
5. 副作用函数中，如果使用了函数上下文中的变量则由于闭包的影响，会导致副作用函数中变量不会实时变化