useEffect 课堂笔记

useEffect 可以说是 React hooks API 中最常用的一个函数了，它接收两个参数：

1. 副作用回调函数
2. 依赖项数组

function useEffect(effect: EffectCallback, deps?: DependencyList): void;

其中，回调函数执行的次数完全依赖于依赖项数组，会出现以下三种情况：

依赖项是空数组

如果依赖项是空数组，那么回调函数只会在首次渲染时执行一次，跟 componentDidMount 的效果是一样的：

useEffect(() => {
  // 这里的代码只会在首次渲染时执行一次
}, [])

再来回顾一下 componentDidMount 方法，它会在组件挂载后（插入 DOM 树中）立即调用。

无依赖项

如果未指定依赖项，即第二个参数为 undefined 的话，那么回调函数会在首次渲染、以及每次重新渲染时执行，跟 componentDidMount 加上 componentDidUpdate 的效果是一样。

useEffect(() => {
  // 这里的代码每次渲染都会执行
})

再来回顾一下 componentDidUpdate 方法：

componentDidUpdate(prevProps, prevState, snapshot)

它会在更新后会被立即调用。首次渲染不会执行此方法。

依赖项是变量数组

如果指定了某个或某几个依赖项，即 [variable1, variable2] ，那么回调函数会在首次渲染以及依赖项发生变化时执行，即相当于 componentDidMount 和 componentDidUpdate 中逐个判断 prevState.variableN 和 this.state.variableN 是否相等，如果发现有一个不相等的话，就执行。

useEffect(() => {
  // 这里的代码会在首次渲染、以及variable1或variable2变化导致的重新渲染时执行
}, [variable1, variable2])