持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
什么是副作用？
副作用（Side-effect，或简称 Effect）。计算机领域的副作用是指：当调用函数时，除了返回可能的函数值之外，还对主调用函数产生附加的影响。例如修改全局变量，修改参数，向主调方的终端、管道输出字符或改变外部存储信息等。
总之，副作用就是让一个函数不再是纯函数的各类操作。注意，这个概念并不是贬义的，在 React 中，大量行为都可以被称作副作用，比如挂载、更新、卸载组件，事件处理，添加定时器，修改真实 DOM，请求远程数据，在 console 中打印调试信息，等等。
副作用 Hooks：useEffect
面对这么多副作用，React 提供了 useEffect 这个执行副作用操作的 Hook。当你打算在函数组件加入副作用时，useEffect 基本上会成为你的首选。同时也希望大家把副作用放在 useEffect 里执行，而不是直接放在组件的函数体中，这样可以避免很多难以调试的 Bug。
useEffect的用法非常简单
- 第一种用法，只传入一个没有返回值的副作用回调函数。
useEffect(() => {/* 省略 */});
虽然 useEffect 作为组件函数体的一部分，在每次组件渲染（包括挂载和更新阶段）时都会被调用，但作为参数的副作用回调函数是在提交阶段才会被调用的，这时副作用回调函数可以访问到组件的真实 DOM。
- 第二种方法，也是最常用的用法：副作用的条件执行。在上面用法的基础上，传入一个依赖值数组（Dependencies）作为第二个参数：
useEffect(() => {/* 省略 */}, [var1, var2]);
React 在渲染组件时，会记录下当时的依赖值数组，下次渲染时会把依赖值数组里的值依次与前一次记录下来的值做浅对比（Shallow Compare）。如果有不同，才会在提交阶段执行副作用回调函数，否则就跳过这次执行，下次渲染再继续对比依赖值数组。
空数组[]也是一个有效的依赖值数组，由于在组件生命周期中依赖值不会有任何变化，所以副作用回调函数只会在组件挂载时执行一次，之后不论组件更新多少次，副作用都不会再执行。这个用法可以用来加载远程数据。
- 第三种方法，同时定义副作用回调函数、清除函数和依赖值数组，这是 useEffect 最完整的一种用法。
useEffect(() => {/* 省略 */; return () => {/* 省略 */};}, [status]);
useEffect 接收了副作用回调函数和依赖值数组两个参数，其中副作用回调函数的返回值也是一个函数，这个返回的函数叫做清除函数。组件在下一次提交阶段执行同一个副作用回调函数之前，或者是组件即将被卸载之前，会调用这个清除函数。同时定义副作用回调函数、清除函数和依赖值数组，这是 useEffect 最完整的一种用法。
总结
今天就为大家介绍useEffect，这是react中比较常用的hook，最近家里有事，断更了一天，我们明天继续一起学习useCallback，useMemo等性能优化hook，明天见！
