useEffect 是什么？

useEffect 是 React 中的一个 Hook(钩子函数)，用于处理副作用操作。

副作用操作是指在组件渲染过程中，需要执行一些与渲染结果无关的操作，例如数据获取、订阅事件、手动操作 DOM 等。useEffect 的主要作用是在函数组件中执行这些副作用操作，并且可以在组件的生命周期中指定何时进行执行、何时进行清理。

什么情况下使用 useEffect？

通常在以下情况下使用：

  • 数据获取和订阅：当需要从服务器获取数据或者订阅某些事件时，可以在 useEffect 中进行数据获取或订阅操作。
  • 手动操作 DOM：如果需要直接操作 DOM 元素，例如添加事件监听器、更新标题等，可以在 useEffect 中执行这些操作。
  • 副作用操作：除了上述情况之外，还可以在 useEffect 中执行任何其他的副作用操作，例如启动定时器、清理资源等。

如何使用 useEffect？

useEffect 接受两个参数：一个是副作用函数，另一个是依赖项数组。副作用函数会在每次组件渲染后执行，依赖项数组用于指定何时应该重新运行副作用函数。

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

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

  // 副作用函数，类似于 componentDidMount 和 componentDidUpdate
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;
    
    // 清理函数，类似于 componentWillUnmount
    return () => {
      document.title = 'React App'; // 组件卸载时恢复默认标题
    };
  }, [count]); // 仅在 count 发生变化时重新运行副作用函数

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

export default Example;
文章目录