React 中的 Effect Hook

我想在 Antd Pro 中为数据图表拉取数据，查实现方法时，发现了 React Effect Hook 这个概念。

参考

https://reactjs.org/docs/hooks-effect.html

The Effect Hook lets you perform side effects in function components。

什么是 side effect 呢？

之前在 Android Jetpack Compose 中也看到过 side effect 这个词，但是并不知道这是什么意思？

官方文档中给出的解释是，side effect 包含：

数据拉取 (正是我所涉及的场景)
设置订阅
手动修改 DOM

其实就是代替了 Class 写法中的生命周期函数 componentDidMount, componentDidUpdate, componentWillUnmount。

官方示例，给出的则是修改 DOM 的操作：

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

side effect 的执行时机

默认情况下，side effect 的执行时机是

第一次 render (componentDidMount)
每次更新 (componentDidUpdate)

useEffect 如何处理 componentWillUnmount

只需要返回一个匿名函数，即可在组件销毁时被调用。

只在特定条件下执行 useEffect

如果每次更新都执行 side effect，最造成性能问题。可以设置条件来规避。

例如，只有 count 发生变化时才执行：

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Only re-run the effect if count changes

如果只想在 mount 时执行 effect，将数组置空即可。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

牢骚

虽然看起来一切是如此合理，代码也节省了很多，但是不得不说 react 的上手成本又增加了。
而这些上手成本在我看来毫无意义，代码可读性更差了。相对而言 vue 就简洁明了很多。

参考

https://juejin.cn/post/6952509261519781918

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”，查看更多联系方式