什么是useEffect？副作用的处理

陆砚码

2026-10-26 • 👁 0人浏览过

useeffect 是 react 中用于处理函数组件副作用的 hook，它允许在组件渲染后执行数据请求、事件订阅、dom 操作等与外部交互的操作，并通过依赖数组控制执行时机。其核心在于将副作用与组件生命周期同步，确保在组件挂载、更新和卸载时正确执行和清理资源。useeffect 接收一个回调函数和一个可选的依赖数组：当依赖数组为空时，副作用仅在组件挂载后执行一次，相当于类组件的 componentdidmount；当有依赖项时，副作用在首次渲染后及依赖变化时重新执行；若无依赖数组，则每次渲染后都会执行，易导致性能问题或无限循环。为避免无限循环，应使用 usecallback 或 usememo 稳定函数和对象的引用，防止因引用变化触发不必要的副作用。同时，必须正确添加依赖项，避免因遗漏导致闭包陷阱，捕获过时的变量值。useeffect 可返回一个清理函数，在组件卸载或下次副作用执行前运行，用于清除定时器、移除事件监听、取消订阅或中止请求，防止内存泄漏。在数据获取场景中，通常在 useeffect 内部定义异步函数，依赖关键参数如 id 触发请求，并管理 loading、error 状态，结合 abortcontroller 实现请求取消。在订阅场景中，需在副作用中建立订阅，并在清理函数中取消订阅，确保资源释放。正确使用依赖数组和清理机制，是掌握 useeffect、实现高效副作用管理的关键。

useEffect

是 React 提供的一个 Hook，它允许你在函数组件中执行副作用操作。简单来说，它就是用来处理那些不属于渲染逻辑，但又需要在组件生命周期中执行的操作，比如数据请求、订阅事件、手动修改 DOM 等。它把组件与“外部世界”的互动统一管理起来，确保你的组件在不同状态下，与外部环境保持同步。解决方案在我看来，理解

useEffect

的核心在于认识到它的“副作用”本质。在 React 的世界里，组件的渲染过程应该像纯函数一样，只根据输入（props 和 state）返回确定的 UI 输出，不应该有任何副作用。但现实是，我们的应用总要和外部打交道：从 API 获取数据、设置定时器、监听 DOM 事件、甚至直接操作 DOM。这些都是副作用。

useEffect

提供了一个沙盒，让你可以在组件渲染完毕后，安全地执行这些操作。它的基本结构是这样的：

useEffect(() => {
  // 这里是你的副作用代码
  console.log('组件渲染后或依赖项变化后执行');

  // 可选：返回一个清理函数
  return () => {
    console.log('在组件卸载或下次副作用执行前清理');
    // 清理操作，比如取消订阅、清除定时器等
  };
}, [依赖项数组]); // 依赖项数组

这个回调函数会在组件首次渲染后执行，以及在后续的每次渲染中，如果它的依赖项发生了变化，也会重新执行。如果你的副作用操作需要清理（比如你设置了一个定时器，或者订阅了一个事件），那么你可以在

useEffect

的回调函数中返回一个函数，这个返回的函数就是清理函数。它会在组件卸载时执行，也会在每次副作用重新执行前执行，确保旧的副作用被正确清理，避免内存泄漏或不必要的行为。我个人觉得，

useEffect

最精妙的地方就在于它的依赖项数组。它决定了副作用何时重新运行。没有依赖项数组：副作用会在每次组件渲染后都执行。这通常不是你想要的，因为可能导致性能问题或逻辑错误，比如无限循环的数据请求。空数组

[]

：副作用只会在组件首次渲染后执行一次，清理函数在组件卸载时执行。这就像类组件中的

componentDidMount

和

componentWillUnmount

的组合。有依赖项的数组

[dep1, dep2]

：副作用会在组件首次渲染后执行，并在数组中的任何依赖项发生变化时重新执行。清理函数会在依赖项变化导致副作用重新执行前，以及组件卸载时执行。这是最常用的模式，它让你的副作用与组件的状态或 props 保持同步。

useEffect

依赖数组的奥秘：何时运行，如何避免无限循环？依赖数组是

useEffect

的灵魂，但也是新手最容易“踩坑”的地方。它的作用是告诉 React 你的副作用依赖于哪些值。只有当这些值发生变化时，副作用才需要重新运行。举个例子，如果你有一个

useEffect

用来获取用户数据：

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // 假设这是一个异步请求
    const fetchUser = async () => {
      console.log(`正在获取用户 ${userId} 的数据...`);
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    };

    fetchUser();
  }, [userId]); // 依赖 userId

  return (
    
      {userData ? 用户名: {userData.name}
 : 加载中...}
    
  );
}

这里，

[userId]

告诉 React：只有当

userId

改变时，才需要重新运行

fetchUser

。如果

userId

不变，即使组件重新渲染，数据也不会被重复获取。避免无限循环的陷阱：无限循环通常发生在

useEffect

的依赖项在每次渲染时都会产生新的引用，从而导致副作用不断重新执行。最常见的是：在组件内部定义函数或对象，并将其作为依赖项。

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

  // 每次渲染都会创建一个新的 handleClick 函数引用
  const handleClick = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    console.log('Effect runs');
    // 如果这里依赖 handleClick，每次渲染都会导致 effect 重新运行
    // 因为 handleClick 的引用变了
  }, [handleClick]); // ? 潜在的无限循环！

  return ;
}

要解决这个问题，你需要使用

useCallback

来记忆化你的函数，确保它的引用在依赖项不变的情况下保持稳定：

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

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

  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1); // 使用函数式更新，避免依赖 count
  }, []); // handleClick 不依赖任何外部变量，所以空数组

  useEffect(() => {
    console.log('Effect runs');
  }, [handleClick]); // ✅ 现在 handleClick 的引用是稳定的

  return ;
}

类似的，对于对象，可以使用

useMemo

。遗漏依赖项 (Stale Closures)：如果你的副作用使用了组件作用域内的变量，但你没有将它们加入依赖数组，那么副作用内部会捕获到旧的变量值，这就是所谓的“闭包陷阱”或“陈旧闭包”。

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // ? count 是旧的，每次都是 0 + 1
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // ? 缺少 count 依赖，或者更优解是使用函数式更新

  return Count: {count};
}

正确的做法是： Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // 使用函数式更新，避免依赖 count
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // ✅ 现在不需要依赖 count 了
  // 或者如果你确实需要依赖 count，那就加上 [count]，但这样每次 count 变都会清除旧定时器并设置新定时器，通常不是想要的。

  return Count: {count};
}

理解并正确使用依赖数组，是掌握

useEffect

的关键一步。如何优雅地处理副作用的清理工作？

useEffect

的返回函数详解

useEffect

的清理机制，也就是它返回的那个函数，是我认为 React 设计中非常优雅的一环。它解决了在函数组件中管理资源生命周期的问题，避免了内存泄漏和不必要的行为。这个返回的函数会在以下两种情况下执行：在组件卸载时 (Unmount)：这是最直观的，当组件从 DOM 中移除时，所有它创建的副作用（比如定时器、事件监听器、订阅）都应该被清理掉。在副作用重新执行前 (Re-run)：如果

useEffect

的依赖项发生了变化，导致副作用需要重新运行，那么在执行新的副作用之前，旧的副作用的清理函数会先被调用。这确保了每次只有一个“活跃”的副作用实例。我们来看一个实际的例子：一个简单的事件监听器。

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

function MouseTracker() {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
      console.log('鼠标移动了'); // 模拟一个副作用行为
    };

    // 1. 注册事件监听器
    window.addEventListener('mousemove', handleMouseMove);

    // 2. 返回清理函数
    return () => {
      // 在组件卸载或 effect 重新执行前，移除事件监听器
      window.removeEventListener('mousemove', handleMouseMove);
      console.log('清理了鼠标移动监听器');
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行一次

  return (
    
      鼠标位置: X: {position.x}, Y: {position.y}
    
  );
}

在这个例子中：当

MouseTracker

组件首次挂载时，

useEffect

会执行，

handleMouseMove

函数被注册为

window

的

mousemove

事件监听器。如果你在组件树中移除

MouseTracker

（比如通过条件渲染），那么在它卸载之前，

useEffect

返回的清理函数会被调用，

window.removeEventListener

会被执行，从而移除监听器。这防止了组件卸载后，事件监听器仍然存在并尝试更新一个不存在的组件状态，导致潜在的错误或内存泄漏。如果你的

useEffect

有依赖项，并且这些依赖项发生了变化，那么在新的副作用函数执行之前，旧的清理函数也会被调用。这确保了你总是在操作最新的状态或订阅。这种模式对于管理各种资源都非常有用：定时器：

clearInterval

unsubscribe

网络请求：

AbortController

取消请求 DOM 操作：撤销之前对 DOM 的修改可以说，没有清理函数，

useEffect

就失去了它大部分的魔力。它强制你思考资源的生命周期，从而写出更健壮、更高效的代码。

useEffect

在数据获取和订阅场景中的最佳实践是什么？数据获取和订阅是

useEffect

最常见的应用场景，也是它真正发挥作用的地方。但这里面有一些细节和“坑”，需要我们特别注意。 1. 数据获取 (Data Fetching)：通常，我们会在组件挂载时获取数据。

useEffect

是实现这一点的理想选择。

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

function PostDetail({ postId }) {
  const [post, setPost] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 异步函数不能直接作为 useEffect 的回调函数，所以我们定义一个内部的 async 函数
    const fetchPost = async () => {
      setLoading(true);
      setError(null); // 每次请求前重置错误
      try {
        const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setPost(data);
      } catch (e) {
        setError(e);
      } finally {
        setLoading(false);
      }
    };

    fetchPost();

    // 清理函数：处理组件卸载时的请求取消
    // 这对于防止在组件卸载后尝试更新状态非常重要
    // 尽管对于简单的 fetch 请求，浏览器通常会处理，但对于更复杂的场景（如 WebSocket），这是必要的
    return () => {
      // 这里可以放置取消请求的逻辑，例如使用 AbortController
      // const controller = new AbortController();
      // fetch(`...`, { signal: controller.signal });
      // controller.abort();
      // 对于 fetch，通常不需要手动取消，除非有特殊需求。
      // 但对于其他如订阅，这里就是取消订阅的地方。
    };
  }, [postId]); // 依赖 postId，当 postId 变化时重新获取数据

  if (loading) return 文章加载中...;
  if (error) return 加载失败: {error.message};
  if (!post) return 没有找到文章。; // 初始状态或未找到

  return (
    
      {post.title}
      {post.body}
    
  );
}

关键点：内部

async

函数：

useEffect

的回调函数不能直接是

async

的，因为它必须返回一个清理函数（或什么都不返回），而不是 Promise。所以，你需要在

useEffect

内部定义并调用一个

async

函数。依赖项：将所有影响数据请求的变量（如

postId

）放入依赖数组。状态管理：维护

loading

和

error

状态，给用户提供反馈。清理：虽然

fetch

请求在组件卸载后通常不会导致 React 错误，但对于长时间运行的请求或订阅，返回一个清理函数来取消它们是最佳实践，这可以避免“Can't perform a React state update on an unmounted component”的警告。

AbortController

是取消

fetch

请求的现代方式。 2. 订阅 (Subscriptions)：订阅外部数据源（如 WebSocket、全局事件总线、第三方库的发布/订阅系统）是

useEffect

的另一个典型场景。这里的清理函数至关重要。

import React, { useState, useEffect } from 'react';
// 假设有一个模拟的聊天服务
const chatService = {
  subscribe: (topic, callback) => {
    console.log(`订阅了主题: ${topic}`);
    const intervalId = setInterval(() => {
      callback(`来自 ${topic} 的消息: ${new Date().toLocaleTimeString()}`);
    }, 2000);
    return () => {
      clearInterval(intervalId);
      console.log(`取消订阅了主题: ${topic}`);
    };
  }
};

function ChatRoom({ topic }) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    // 订阅聊天消息
    const unsubscribe = chatService.subscribe(topic, (newMessage) => {
      setMessages(prevMessages => [...prevMessages, newMessage]);
    });

    // 返回清理函数，在组件卸载或 topic 变化时取消订阅
    return () => {
      unsubscribe();
    };
  }, [topic]); // 依赖 topic，当 topic 变化时重新订阅

  return (
    
      聊天室: {topic}
      
        {messages.map((msg, index) => (
          {msg}
        ))}
      
    
  );
}

关键点：订阅和取消订阅配对：在

useEffect

中建立订阅，并确保在清理函数中执行相应的取消订阅操作。这是防止内存泄漏的基石。依赖项：如果订阅的参数（如

topic

）发生变化，你需要重新订阅。将这些参数放入依赖数组。即时性：订阅通常需要组件挂载后立即生效，并在组件卸载时立即停止。

useEffect

的生命周期行为完美契合这一点。总而言之，

useEffect

提供了一个强大且灵活的机制来管理组件的副作用。无论是获取数据、设置订阅还是其他与外部世界的交互，遵循这些最佳实践能帮助你编写出更健壮、更易于维护的 React 应用。

{post.title}

聊天室: {topic}

相关文章