使用 useEffect

useEffect 是 React 中非常重要的一个 Hook，它提供了在组件渲染后执行副作用代码的能力。副作用指的是那些与组件渲染结果无关的逻辑，比如数据获取、订阅事件、手动修改 DOM 等。

基本用法

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 在组件渲染后执行的副作用代码
    // ...
    return () => {
      // 在组件卸载前执行的清理逻辑
      // ...
    };
  }, []);

  return (
    // JSX 渲染结果
    // ...
  );
}

在函数式组件中使用 useEffect，传入一个回调函数作为第一个参数。这个回调函数将会在每次组件渲染后执行。此外，useEffect 还可以接收第二个参数用来设置依赖项。

依赖项

useEffect 可以接收第二个参数，这个参数是一个数组，用来指定什么情况下才执行副作用代码。如果不指定第二个参数，useEffect 的回调函数将会在每次组件渲染后都执行。如果指定了依赖项，只有当依赖项发生变化时才会执行回调函数。

useEffect(() => {
  // 在依赖项发生变化时执行的副作用代码
}, [dependency]);

依赖项可以是状态、props，或者通过闭包引用的变量。如果依赖项是一个空数组，表示只在组件初始化时执行一次，后续的渲染不再执行。如果依赖项为 null，则每次都会执行。

清理副作用

useEffect 的回调函数可以返回一个函数，用来清理副作用。这个清理函数会在组件卸载前执行，或者在下一次执行副作用前执行。

useEffect(() => {
  // 在组件渲染后执行的副作用代码
  // ...

  return () => {
    // 在组件卸载前执行的清理逻辑
    // ...
  };
}, []);

清理函数对于取消订阅、关闭数据库连接等操作非常有用。确保在清理函数中处理好可能引发内存泄漏的问题。

更多关于 useEffect 的信息，请阅读 React 官方文档。