useEffect
对比之前React class
| useEffect | React class |
|---|---|
| useEffect | componentDidMount |
| useEffect | componentDidUpdate |
| useEffect (<尝试卸载不会执行>) | componentWillUnmount |
useEffect 做了什么
告诉 React 组件需要在渲染后执行某些操作
为什么在组件内部调用useEffect
可以在effect内部直接访问state变量、或者props，而不用添加特殊的api来读取它，state（props）已经保存在函数的作用域中。hooks引入了javascript的闭包机制。
useEffect 会在每次选然后都执行？ {是的}
默认情况下，effect在第一次渲染和每次更新后都会执行（下面会说如何控制它执行的时机） react保证每次运行effect的时候，DOM都已经更新完毕
effect执行时机（性能优化）
每次渲染渲染都执行effect会有性能问题，effect传入第二个参数
useEffect(() => {
console.log('hello world')
}, [count]) \\当count改变时effect函数才会重新执行
第二个参数可以有多个，里面的任意一个发生改变都会触发effect函数的重新执行
推荐使用 eslint-plugin-react-hooks 中的 exhaustive-deps 规则
如果第二个参数为空数组，则只执行一次
每个effect函数都属于一次特定的渲染。
- 每次重新渲染都会生成新的effect，替换掉之前的，确保effect中获取的值是最新的，不用担心过期。
- useEffect调度不会阻塞浏览器更新屏幕<异步>。（多数情况下effect不需要同步进行） 个别情况下（获取布局信息的情况下，单独提供useLayoutEffect使用<它会在所有的 DOM 变更之后同步调用 effect>）
需要清除的effect （防止内存泄露）
effect函数返回一个函数 react将会在执行清除操作的时候调用它。effect的清除机制
React 何时清除 effect?
React 会在组件卸载的时候执行清除操作（React 会在执行当前 effect 之前对上一个 effect 进行清除）
