React 中的 Effect Hook

更新日期: 2022-09-27 阅读次数: 3106 字数: 452 分类: ReactJS

我想在 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 聊聊, 查看更多联系方式