【React】1020- React useEffect 使用指南

水深无声 2022-08-29 14:50 201阅读 0赞

## 引言 ##

Hooks 是 React 16.8 的新增特性，至今经历两年的时间，它可以让你在不编写 class 组件的情况下使用 state 以及其他 React 特性。`useEffect` 是基础 Hooks 之一，我在项目中使用较为频繁，但总有些疑惑 ，比如：

*  如何正确使用 `useEffect` ？
 *  `useEffect` 的执行时机 ？
 *  `useEffect` 和生命周期的区别 ？

本文主要从以上几个方面分析 `useEffect` ，以及与另外一个看起来和 `useEffect` 很像的 Hook `useLayoutEffect` 的使用和它们之间的区别。

## useEffect 简介 ##

首先介绍两个概念，纯函数和副作用函数。纯函数（ Pure Function ）：对于相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用，这样的函数被称为纯函数。副作用函数（ Side effect Function ）：如果一个函数在运行的过程中，除了返回函数值，还对主调用函数产生附加的影响，这样的函数被称为副作用函数。`useEffect` 就是在 React 更新 DOM 之后运行一些额外的代码，也就是执行副作用操作，比如请求数据，设置订阅以及手动更改 React 组件中的 DOM 等。

## 正确使用 useEffect ##

基本使用方法：`useEffect(effect)`根据传参个数和传参类型，`useEffect(effect)` 的执行次数和执行结果是不同的，下面一一介绍。

*  默认情况下，`effect` 会在每次渲染之后执行。示例如下：

useEffect(() => {
      const subscription = props.source.subscribe();
      return () => {
        // 清除订阅
        subscription.unsubscribe();
      };
    });

*  也可以通过设置第二个参数，依赖项组成的数组 `useEffect(effect,[])` ，让它在数组中的值发生变化的时候执行，数组中可以设置多个依赖项，其中的任意一项发生变化，`effect` 都会重新执行。示例如下：

useEffect(
      () => {
        const subscription = props.source.subscribe();
        return () => {
          subscription.unsubscribe();
        };
      },
      [props.source],
    );

**需要注意的是**：当依赖项是引用类型时，React 会对比当前渲染下的依赖项和上次渲染下的依赖项的内存地址是否一致，如果一致，`effect` 不会执行，只有当对比结果不一致时，`effect` 才会执行。示例如下：

function Child(props) {
      
      useEffect(() => {
        console.log("useEffect");
      }, [props.data]);
      
      return <div>{props.data.x}</div>;
    }
    
    let b = { x: 1 };
    
    function Parent() {
      const [count, setCount] = useState(0);
      console.log("render");
      return (
        <div>
          <button
            onClick={() => {
              b.x = b.x + 1;
              setCount(count + 1);
            }}
          >
            Click me
          </button>
          <Child data={b} />
        </div>
      );
    }

结果如下：

![2dc9985c2395faf05b605c92b28cae77.gif][]

上面实例中，组件 `<Child/>` 中的 `useEffect` 函数中的依赖项是一个对象，当点击按钮对象中的值发生变化，但是传入 `<Child/>` 组件的内存地址没有变化，所以 `console.log("useEffect")` 不会执行，useEffect 不会被打印。为了解决这个问题，我们可以使用对象中的属性作为依赖，而不是整个对象。把上面示例中组件 `<Child/>` 修改如下：

function Child(props) {
      
      useEffect(() => {
        console.log("useEffect");
      }, [props.data.x]);
      
      return <div>{props.data.x}</div>;
    }

修改后结果如下：

![dcef16f3a2d9aeec0200e3a9fad5eee0.gif][]

可见 `useEffect` 函数中的 `console.log("useEffect")` 被执行，打印出 useEffect。

*  当依赖项是一个空数组 \[\] 时 , `effect` 只在第一次渲染的时候执行。

## useEffect 的执行时机 ##

默认情况下，`effect` 在第一次渲染之后和每次更新之后都会执行，也可以是只有某些值发生变化之后执行，重点在于是**每轮渲染结束后延迟调用（ 异步执行 ）**，这是 `useEffect` 的好处，保证执行 `effect` 的时候，DOM 都已经更新完毕，不会阻碍 DOM 渲染，造成视觉阻塞。

## useEffect 和 useLayoutEffect 的区别 ##

`useLayoutEffect` 的使用方法和 `useEffect` 相同，区别是他们的执行时机。

如上面所说，`effect` 的内容是会在渲染 DOM 之后执行，然而并非所有的操作都能被放在 `effect` 都延迟执行的，例如，在浏览器执行下一次绘制前，需要操作 DOM 改变页面样式，如果放在 `useEffect` 中执行，会出现闪屏问题。而 `useLayoutEffect` 是在**浏览器执行绘制之前被同步执行**，放在 `useLayoutEffect` 中就会避免这个问题。

这篇文章中可以清楚的看到上述例子的具体实现：useEffect 和 useLayoutEffect 的区别

## 对比 useEffect 和生命周期 ##

如果你熟悉生命周期函数，你可能会用生命周期的思路去类比思考 `useEffect` 的执行过程，但其实并不建议这么做，因为 `useEffect` 的心智模型和 `componentDidMount` 等其他生命周期是不同的。

Function 组件中不存在生命周期，React 会根据我们当前的 props 和 state 同步 DOM ，每次渲染都会被固化，包括 state、props、side effects 以及写在 Function 组件中的所有函数。

另外，大多数 `useEffect` 函数不需要同步执行，不会像 `componentDidMount` 或 `componentDidUpdate` 那样阻塞浏览器更新屏幕。

所以 `useEffect` 可以被看作是每一次渲染之后的一个独立的函数 ，可以接收 props 和 state ，并且接收的 props 和 state 是当次 render 的数据，是独立的 。相对于生命周期 `componentDidMount` 中的 `this.state` 始终指向最新数据， `useEffect` 中不一定是最新的数据，更像是渲染结果的一部分 —— 每个 `useEffect` 属于一次特定的渲染。对比示例如下：

*  在 Function 组件中使用 `useEffect` 代码示例 (点击在线测试)：

function Counter() {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        setTimeout(() => {
          console.log(`You clicked ${count} times`);
        }, 3000);
      });
    
      return (
        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(count + 1)}>
            Click me
          </button>
        </div>
      );
    }

结果如下：

![2c54e4a0b5bc9ad46abf302b03e66db3.gif][]

*  在 Class 组件中的使用生命周期，代码示例：

componentDidUpdate() {
        setTimeout(() => {
          console.log(`You clicked ${this.state.count} times`);
        }, 3000);
      }

结果如下：

![10c008a9a2b992f0b149f1cc4eb4f55a.gif][]

但是每次渲染之后都去执行 `effect` 并不高效。所以怎么解决呢 ？这就需要我们告诉 React 对比依赖来决定是否执行 `effect` 。

## 如何准确绑定依赖 ##

在 `effect` 中用到了哪些外部变量，都需要如实告诉 React ，那如果没有正确设置依赖项会怎么样呢 ？示例如下 ：

![53de4d5371bfb7cb5cbcf19e8d828c7d.gif][]

上面例子中， `useEffect` 中用到的依赖项 `count`，却没有声明在卸载依赖项数组中，`useEffect` 不会再重新运行（只打印了一次 useEffect ）， `effect` 中 `setInterVal` 拿的 `count` 始终是初始化的 0 ，它后面每一秒都会调用 `setCount(0 + 1)` ，得到的结果始终是 1 。下面有两种可以正确解决依赖的方法：

### 1.在依赖项数组中包含所有在 `effect` 中用到的值 ###

将 `effect` 中用到的外部变量 `count` 如实添加到依赖项数组中，结果如下：

![4dbc24733168a26b888932b34de7e4de.gif][]

可以看到依赖项数组是正确的，并且解决了上面的问题，但是也可以发现，随之带来的问题是：定时器会在每一次 `count` 改变后清除和重新设定，重复创建/销毁，这不是我们想要的结果。

### 2.第二种方法是修改 effect 中的代码来减少依赖项 ###

即修改 `effect` 内部的代码让 `useEffect` 使得依赖更少，需要一些移除依赖常用的技巧，如：`setCount` 还有一种函数回调模式，你不需要关心当前值是什么，只要对 “旧的值” 进行修改即可，这样就不需要通过把 `count` 写到依赖项数组这种方式来告诉 React 了，因为 React 已经知道了。

![7005af219776b466d515551c917f1fb1.gif][]

## 是否需要清除副作用 ##

若只是在 React 更新 DOM 之后运行一些额外的代码，比如发送网络请求，手动变更 DOM，记录日志，无需清除操作，因为执行之后就可以被忽略。

需要清除的是指那些执行之后还有后续的操作，比如说监听鼠标的点击事件，为防止内存泄漏清除函数将在组件卸载之前调用，可以通过 `useEffect` 的返回值销毁通过 `useEffect` 注册的监听。

清除函数执行时机是在新的渲染之后进行的，示例如下（点击在线测试）：

const Example = () => {
      const [count, setCount] = useState(0);
    
      useEffect(() => {
        console.log("useEffect");
        return () => {
          console.log("return");
        };
      }, [count]);
    
      return (
        <div>
          <p>You Click {count} times </p>
          {console.log("dom")}
          <button
            onClick={() => {
              setCount(count + 1);
            }}
          >
            Click me
          </button>
        </div>
      );
    };

结果如下：

![3b17ab661d4e62dcaa2318045fa9201f.gif][]

**需要注意的是**：`useEffect` 的清除函数在每次重新渲染时都会执行，而不是只在卸载组件的时候执行 。

## 参考文档 ##

React Core Team 成员、Readux 作者 Dan 对 `useEffect` 的完全解读 --- A Complete Guide to useEffect

![d362152d91964caabd02e6eb60586ff2.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![b282f4d8457724b471ced640fd88701c.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[2dc9985c2395faf05b605c92b28cae77.gif]: /images/20220829/313440434c774a559afb65e121914b5a.png
[dcef16f3a2d9aeec0200e3a9fad5eee0.gif]: /images/20220829/daf50bb91daf424ead4d51fa15a0146e.png
[2c54e4a0b5bc9ad46abf302b03e66db3.gif]: /images/20220829/7aa6b06bbdbf429ba109d329f8d310c5.png
[10c008a9a2b992f0b149f1cc4eb4f55a.gif]: /images/20220829/2df745e107fc4af393cee7bdb561aa4c.png
[53de4d5371bfb7cb5cbcf19e8d828c7d.gif]: /images/20220829/516d969af30141c5b613dc00e98de9a0.png
[4dbc24733168a26b888932b34de7e4de.gif]: /images/20220829/093d0c3317134c008b3d59d87a96b260.png
[7005af219776b466d515551c917f1fb1.gif]: /images/20220829/b2c3f4e6a7874530b53991dce499da3e.png
[3b17ab661d4e62dcaa2318045fa9201f.gif]: /images/20220829/24620b2341d74a2d9008e0c1d341b519.png
[d362152d91964caabd02e6eb60586ff2.gif]: /images/20220829/d5b579f524c0486690db0e9a039609ee.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[b282f4d8457724b471ced640fd88701c.gif]: /images/20220829/266cb2b3a27d44ffab61385ec4e98e89.png