Effect Hook

Effect Hook：用于在函数组件中处理副作用

副作用：

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

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

细节：

1. 运行时间：在页面完成真实的UI渲染之后，因此它的执行是异步的，不会阻塞浏览器
   • 类组件中componentDidMount和componentDidUpdate更新了真实DOM，但是用户还没有看到UI更新
   • useEffect中的副作用函数，更改了真实DOM，并且用户已经看到了UI更新
2. 每个函数组件中，可以多次使用Effect
3. useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫做清理函数
   • 该函数运行时间点，在每次运行副作用函数之前
   • 首次渲染组件不会运行
   • 组件被销毁时一定会运行
4. useEffect函数，可以传递第二个参数
   • 第二个参数是一个数组
   • 数组中记录该副作用的依赖数据
   • 当组件从新渲染后，只有依赖数据与上次不一样时，才会执行副作用
   • 所以，当传递了依赖数据之后，如果数据没有发生变化
     ⅰ副作用函数仅在第一次渲染后运行
     ⅱ清理函数仅在卸载组件后运行
5. 副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化。
6. 副作用函数在每次注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定。