React Hooks 指南：何时使用 useEffect ?

news2025/6/9 19:52:58

在 React 的函数组件中，useEffect Hook 是一个强大且不可或缺的工具。它允许我们处理副作用 (side effects)——那些在组件渲染之外发生的操作。但是，什么时候才是使用 useEffect 的正确时机呢？让我们深入探讨一下！

什么是副作用？

在 React 的世界里，副作用是指任何在组件渲染周期之外与外部世界交互的操作。常见的副作用包括：

数据获取 (Data fetching)：从 API 加载数据。
订阅 (Subscriptions)：设置事件监听器或订阅外部数据源 (如 WebSocket)。
手动更改 DOM (Manually changing the DOM)：直接操作浏览器 DOM (虽然通常应避免，但有时是必要的)。
计时器 (Timers)：设置 setTimeout 或 setInterval。
日志记录 (Logging)：向分析服务发送数据。

useEffect 的目的就是让你在函数组件中也能够执行这些副作用操作。

`useEffect` 的基本语法

JavaScript

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

function MyComponent({ someProp }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 副作用代码在这里执行
    console.log('Component mounted or someProp updated!');
    // 比如，基于 someProp 获取数据
    fetch(`https://api.example.com/data?id=${someProp}`)
      .then(response => response.json())
      .then(result => setData(result));

    // 清理函数 (可选)
    return () => {
      console.log('Component unmounted or before next effect runs');
      // 在这里进行清理，比如取消订阅、清除计时器等
    };
  }, [someProp]); // 依赖项数组

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

useEffect 接收两个参数：

一个函数：这个函数包含了你的副作用逻辑。
一个可选的依赖项数组 (dependency array)：这个数组告诉 React 什么时候应该重新运行你的副作用函数。

何时使用 `useEffect`？主要场景详解

1. 组件挂载后执行操作 (ComponentDidMount) 🚀

如果你希望在组件首次渲染到 DOM 后执行某些操作（例如，获取初始数据、设置事件监听器），可以将依赖项数组设置为空数组 []。

JavaScript

useEffect(() => {
  // 仅在组件挂载后运行一次
  console.log('Component has mounted!');
  fetchInitialData();

  return () => {
    // 在组件卸载时运行
    console.log('Component will unmount!');
    cleanupSubscriptions();
  };
}, []); // 空依赖项数组

2. 依赖项更新时执行操作 (ComponentDidUpdate) 🔄

当你希望在某个特定的 prop 或 state 发生变化时重新运行副作用，你需要将这些 prop 或 state 添加到依赖项数组中。

JavaScript

const [userId, setUserId] = useState(1);

useEffect(() => {
  // 当 userId 变化时，重新获取用户数据
  console.log(`Fetching data for user: ${userId}`);
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(setData);

  // 如果需要，这里也可以返回一个清理函数
}, [userId]); // 依赖项：userId

重要提示：如果你在 useEffect 内部使用了外部作用域的变量 (props, state, 或组件内部定义的函数)，并且希望在这些变量改变时重新运行 effect，那么务必将它们包含在依赖项数组中。否则，你的 effect 可能会捕获到过时的（stale）值，导致难以调试的 bug。

3. 组件卸载前执行清理操作 (ComponentWillUnmount) 🧹

useEffect 返回的函数（我们称之为清理函数 (cleanup function)）会在以下两种情况下执行：

组件卸载时：用于清除定时器、取消网络请求、移除事件监听器等，防止内存泄漏。
在下一次副作用函数运行之前（如果依赖项发生变化导致副作用重新运行）。

JavaScript

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('Tick');
  }, 1000);

  // 清理函数：在组件卸载或依赖项变化导致 effect 重新运行前执行
  return () => {
    clearInterval(timerId);
    console.log('Timer cleared');
  };
}, []); // 假设这个 timer 只在挂载时设置

4. 每次渲染后都执行操作 (谨慎使用！) ⚠️

如果省略依赖项数组，useEffect 中的副作用函数会在每次组件渲染之后执行。这通常不是你想要的行为，因为它很容易导致性能问题或无限循环（例如，在 effect 内部更新了某个 state，而这个 state 的更新又触发了重新渲染）。

JavaScript

useEffect(() => {
  // 每次渲染后都会执行，除非绝对必要，否则请避免
  console.log('Component re-rendered');
}); // 没有依赖项数组

经验法则：总是尝试提供依赖项数组。如果你确实需要在每次渲染后运行，请仔细检查逻辑以避免无限循环。ESLint 的 eslint-plugin-react-hooks 插件中的 exhaustive-deps 规则会帮助你检查依赖项数组是否完整。

何时不应该使用 `useEffect`？

用于纯计算或数据转换：如果某个值可以根据现有的 props 或 state 直接计算出来，那么不需要 useEffect。直接在组件渲染逻辑中计算即可。 JavaScript

// 不好 ❌
const [fullName, setFullName] = useState('');
useEffect(() => {
  setFullName(`${firstName} ${lastName}`);
}, [firstName, lastName]);

// 好 ✅
const fullName = `${firstName} ${lastName}`;