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 聊聊， 查看更多联系方式