how to uese useEffect

[silverWolf818]

useEffect 生命周期

useEffect 是 React 的一个 Hook，它允许你在函数组件中执行副作用操作。在类组件中，副作用通常是在生命周期方法中执行的，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。而 useEffect Hook 使得你可以在不将组件转换为类的情况下，使用这些生命周期功能。

接下来，我们将详细了解 useEffect 在 React 中的工作原理。

代码如下所示：代码地址

import { useState, useEffect } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("useEffect called");
    return () => {
      console.log("useEffect return called");
    };
  }, [count]);

  console.log("App render");

  return (
    <div>
      <button onClick={() => setCount(count + 1)}> + </button>
      <span style={{ padding: "0 10px" }}>{count}</span>
      <button onClick={() => setCount(count - 1)}> - </button>
    </div>
  );
};

export default Counter;

当 React 开始挂载生命周期，首先执行并输出 App render，接着执行 useEffect 函数，输出 useEffect called，最后将该函数的返回内容暂存于内存中。

App render
useEffect called

点击按钮以改变数值时，触发 useState 的更新，先执行内存里最近一次 useEffect 的返回内容，输出 useEffect return called，之后再次渲染组件。

App render
useEffect return called
useEffect called

点击卸载按钮时，会调用 useEffect 的返回函数，输出 useEffect return called，随后进行组件卸载。

useEffect return called

这里简要介绍了useEffect 的生命周期。接下来我们将探讨 useEffect 的不同用法。

useEffect 功能作用

根据最新的 React 文档中 useEffect 的定义：

useEffect 是一个 React Hook，它可以让你将组件与外部系统同步。

文档中提到的同步组件与外部系统这句话至关重要，接下来我们将深入探讨。

效果同步

一些组件需要与外部系统同步。例如，可能希望基于 React 状态控制非 React 组件，设置服务器连接，请求服务端数据或者在组件出现在屏幕上时发送分析日志。useEffect 让你在渲染后运行一些代码，这样你就可以将你的组件与 React 之外的一些系统同步。

在开始介绍之前，我们先来了解 React 组件中的两种逻辑：

• Rendering code：我们常用的 JSX 代码，它一般位于组件的顶层可以在此处获取 props 和 state，对其进行转换，然后返回您想要在屏幕上看到的 JSX。渲染代码必须是纯粹的。就像数学公式一样，它应该只计算结果，而不做任何其他事情。

• Event handlers：我们常用的点击或输入事件，事件处理程序一般是组件内的嵌套函数，它们执行操作而不仅仅是计算它们。事件处理程序可能会更新输入字段、提交购买产品的 HTTP POST 请求或将用户导航到另一个屏幕。事件处理程序包含由特定用户操作引起的它们更改程序的状态。

有时这些还不够，例如我们需要使用 sentry 来统计网站的性能或分析错误，这些内容不是纯粹的计算，有些甚至在渲染期间不会发生。但是希望它能够像点击事件一样被触发。

Effects 允许我们指定由渲染本身而不是由特定事件引起的副作用。（这很重要‼️）sentry 在屏幕更新后提交结束时运行。这是将 React 组件与某些外部系统（例如网络或第三方库）同步的好时机。代码如下：

import * as Sentry from "@sentry/react";
import { useEffect } from "react";

function App() {
  const [info, error] = useQuery("/api/info");
  useEffect(() => {
    if (error) {
      Sentry.captureException(error);
    }
  }, [error]);

  // ...
}