useEffect用法汇总

TIP

下面将通过与类组件生命周期对比的方式说明useEffect()。

用法

useEffect() 本身是一个函数，由 React 框架提供，在函数组件内部调用即可。

可以认为useEffect的作用是替代类组件中的一些声明周期（componentDidMount, componentWillUnmount, componentWillUpdate, componentDidUpdate）

我们希望组件加载以后，网页标题document.title会随之改变。那么，改变网页标题这个操作，就是组件的副效应，必须通过useEffect()来实现。

React hook两大守则

• 只能在外层scope使用
• 只能在 function component 或 custom hook 中使用。

useEffect基本語法

useEffect接收两个参数，第一个是一个函式，定义 componentDidMount 或 componentDidUpdate 要做什么事，此函式的返回值要是一个函式，表示 componentWillUnmount 或者 componentWillUpdate 要做什么事。第二个是一个 array，数组对应的变量被修改是，useEffect 要重新被触发。这个类组件的componentDidUpdate和prevState!=this.state类似。

useEffect 第二个参数为 [] 空数组

第二个参数为 [] 空数组(不是省略)，代表除了第一次以外，接下来每次re-render，都不会执行useEffect，所以就等同于componentDidMount。

此时，第一个参数的 return 方法， 会在组件销毁的时候执行，相当于类组件的 componentWillUnmount。

useEffect(() => {
    /* 下面是 componentDidMount */
    
    /* 上面是 componentDidMount */

    return (() => {
      /* 下面是 componentWillUnmount */
      
      /* 上面是 componentWillUnmount */
    });
}, []);

useEffect第二个参数为非空数组

此时， 第一次render会执行effect -- componentDidMount 每次依赖项 dependencies 发生改变的时候也会执行effect -- componentDidUpdate

第一个参数的 return 方法 会在组件re-render前执行，相当于类组件的 componentWillUpdate； 会在组件销毁的时候执行， 相当于类组件的 componentWillUnmount.

useEffect(() => {
    /* 下面是 componentDidMount 和  componentDidUpdate */
    
    /* 上面是 componentDidMount 和  componentDidUpdate */
    
    return () => {
      /* 下面是 componentWillUnmount */
      
      /* 上面是 componentWillUnmount */
    };
}, [dependencies]);

useEffect 省略第二个参数

此时， 第一次render会执行effect -- componentDidMount 每次 render 的时候也会执行effect -- componentDidUpdate

第一个参数的 return 方法， 会在组件re-render前执行，相当于类组件的 componentWillUpdate； 会在组件销毁的时候执行， 相当于类组件的 componentWillUnmount。

WARNING

不建议这么使用，由于每次 render 都会触发 useEffect.

useEffect的其他

可以有多个 useEffect存在同一function component和custom hook中，所以我们可以针对不同的情况去使用不同的useEffect。

表格总结

useEffect 第二个参数	useEffect第一个参数	useEffect第一个参数的return参数
[]	componentDidMount	componentWillUnmount
[dependencies]	componentDidMount 和 dependencies 触发的 componentDidUpdate	dependencies 触发的 componentWillUpdate 和 componentWillUnmount
undefined	componentDidMount 和 所有更新触发的 componentDidUpdate	所有更新触发的 componentWillUpdate 和 componentWillUnmount

useEffect 源码 (opens new window)