深入掌握 React useEffect Hook：从基础原理到实战进阶

2026-02-08 06:13:39 0条评论 1次阅读 0人点赞

在现代 React 开发的旅途中，我们不可避免地会遇到函数组件。为了让函数组件具备处理“副作用”的能力，React 引入了 INLINECODE7994346d Hook。对于那些从类组件转型过来的开发者来说，INLINECODEe402a550 可以看作是 INLINECODEae791b01、INLINECODE2598c8a0 和 componentWillUnmount 这三个生命周期方法的结合体。但对于新手来说，它不仅仅是一个替代品，更是一种全新的思考组件生命周期的方式。

在这篇文章中，我们将深入探讨 useEffect 的工作原理、语法细节、依赖项数组的行为模式，以及在实际项目中如何避免常见陷阱并进行性能优化。无论你是刚入门的初学者，还是希望巩固基础的开发者，这篇文章都将为你提供实用的见解。

0.1 什么是“副作用”？
0.2 useEffect 的基础语法
0.3 useEffect 的执行流程详解
0.4 代码实战示例 1：基础计数器
0.5 精确控制 useEffect 的触发时机

1 计数: {count}
2 一次性加载
3 计时器: {count}
- 3.1 常见陷阱与最佳实践
- 3.2 进阶技巧：自定义 Hook 封装逻辑
4 当前状态: {isOnline ? "🟢 在线" : "🔴 离线"}
- 4.1 总结与关键要点

什么是“副作用”？

在 React 的世界中，我们主要关注两件事：渲染 UI 和响应事件。但除此之外，还有一些操作属于“副作用”。所谓的副作用，是指那些发生在组件渲染之外，或者与当前渲染逻辑无关的操作。

通常包括以下场景：

数据获取：通过 API 请求从后端获取数据并更新状态。
订阅：设置 WebSocket 连接或订阅外部数据源。
手动修改 DOM：直接操作 DOM 节点（尽管 React 会处理 DOM 更新，但有时我们需要通过库如 D3.js 直接操作）。
定时器：设置 INLINECODEf399d6bf 或 INLINECODEf4c4bb36。
日志记录：在特定条件下发送分析数据。

useEffect 的核心职责，就是在一个可预测的时间点——即浏览器绘制屏幕之后——安全地执行这些副作用。

useEffect 的基础语法

让我们先来看一下 useEffect 的标准语法结构：

useEffect(() => {
    // 1. 副作用逻辑代码：Effect 函数
    // 比如获取数据、修改 DOM、设置订阅等

    return () => {
        // 2. 清理逻辑代码：Cleanup 函数（可选）
        // 用于清除副作用，比如取消订阅、清除定时器等
    };
}, [dependencies]); // 3. 依赖项数组

解构三个核心部分：

Effect 函数：这是你想要执行的具体操作。每次渲染后，如果依赖项发生了变化，这个函数就会被调用。
Cleanup 函数（可选）：这是 Effect 函数返回的一个函数。React 会在组件卸载或者执行下一次 Effect 之前调用它。这对于防止内存泄漏（例如在组件销毁后依然进行网络请求）至关重要。
依赖项数组：这是一个控制 useEffect 何时执行的开关。它决定了副作用是在每次渲染后运行，还是仅在特定值变化时运行。

useEffect 的执行流程详解

为了更好地理解它，让我们深入一下它到底是如何运作的。理解这个流程有助于你编写更可预测的代码。

渲染发生：React 首先执行组件函数，计算并更新 DOM（此时屏幕尚未绘制，称为“渲染期间”）。
浏览器绘制：React 将更新提交给浏览器，屏幕刷新。
Effect 执行：useEffect 中的代码在绘制之后异步运行，确保不会阻塞浏览器更新屏幕。
依赖检查：React 会比较本次渲染的依赖项和上次渲染的依赖项。如果相同，则跳过该 Effect；如果不同，则继续执行。
清理与重运行：如果依赖项变化，React 会在执行新的 Effect 之前，先运行上一次 Effect 返回的 Cleanup 函数。

代码实战示例 1：基础计数器

让我们从一个最简单的例子开始：修改网页的 INLINECODEbf07f7a1。在类组件中，我们需要在两个生命周期方法中分别设置（挂载和更新），而在 INLINECODE0c974fbb 中，我们只需要写一次。

import { useState, useEffect } from "react";

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

    // useEffect 包含了副作用逻辑
    useEffect(() => {
        // 每当 count 发生变化时，更新网页标题
        document.title = `你点击了 ${count} 次`;
        console.log(`Effect 执行了，当前 count: ${count}`);
    }, [count]); // 依赖项数组：只有 count 变化时才重新运行

    return (
        
            
        
    );
}

export default HookCounterOne;

代码解析：

在这个例子中，INLINECODEaf4d387c 告诉 React：“请监听 INLINECODE50f4383f 这个变量”。当组件首次挂载时，Effect 会运行。之后，只有当 count 的值发生变化时，Effect 才会再次运行。这种声明式的写法让我们无需关心“是挂载还是更新”，只需关心“什么变了”。

精确控制 useEffect 的触发时机

在实际开发中，我们并不希望副作用在每次渲染时都运行（这会导致性能问题或无限循环）。我们可以通过调整依赖项数组来精确控制它。

场景 1：在每次渲染后运行

如果你不传递第二个参数（或者根本不传第二个参数），useEffect 会在每次组件渲染后都运行。这在调试时很有用，但在生产环境中应尽量避免，除非你有特定的需求（如记录日志）。

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

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

    // 没有依赖项数组 -> 每次渲染都运行
    useEffect(() => {
        console.log("副作用在每次渲染后都会运行");
        // 注意：如果这里的逻辑修改了 state，可能会导致无限循环！
    });

    return (
        
            计数: {count}
            
            
        
    );
}

export default RenderEveryTime;

场景 2：仅在挂载时运行一次（ComponentDidMount 替代者）

如果你想模拟 INLINECODEe0a3e532（例如只在组件初始化时获取数据），请传递一个空数组 INLINECODEc2858194。

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

function RunOnceOnMount() {
    const [data, setData] = useState(null);

    useEffect(() => {
        console.log("组件已挂载！这段代码只会运行一次。");
        
        // 模拟 API 调用
        // fetch(‘https://api.example.com/data‘)
        //    .then(response => response.json())
        //    .then(data => setData(data));
            
        // 为了演示，我们设置一个模拟数据
        setTimeout(() => {
            setData("这是从服务器获取的数据");
        }, 1000);
    }, []); // 空数组：意味着不依赖任何 props 或 state，所以只在挂载时运行

    return (
        
            一次性加载
            数据状态: {data ? data : "加载中..."}
        
    );
}

export default RunOnceOnMount;

场景 3：特定值变化时运行

这是最常见的情况。你只希望在某个特定的 state 或 prop 变化时才执行副作用。你需要将这些变量放入数组中。

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

function RunOnSpecificChange({ userId }) {
    const [count, setCount] = useState(0);
    const [userData, setUserData] = useState(null);

    // 示例 A：监听 count 变化
    useEffect(() => {
        console.log(`Count 发生了变化！当前值: ${count}`);
    }, [count]);

    // 示例 B：监听 prop (userId) 变化
    useEffect(() => {
        console.log(`UserId 发生了变化，开始获取用户 ${userId} 的数据...`);
        // 这里可以编写根据 userId 获取数据的逻辑
    }, [userId]); 

    // 示例 C：监听多个变量
    useEffect(() => {
        console.log(`Count 或 UserId 只要有一个变了，我就会运行`);
    }, [count, userId]);

    return (
        
            用户 ID: {userId}
            计数: {count}
            
        
    );
}

export default RunOnSpecificChange;

深入理解：清理副作用

处理副作用不仅仅是“开始”做某事，更重要的是在合适的时候“停止”。如果你在 Effect 中建立了订阅或定时器，但在组件卸载时没有清理，就会导致内存泄漏。React 会在组件卸载或下一次 Effect 执行前，运行上一次返回的清理函数。

实战示例 4：鼠标追踪器

这是一个经典的例子。我们需要在组件挂载时添加事件监听器，并在卸载时移除它。

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

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

    const logMousePosition = (e) => {
        console.log("Mouse position updated");
        setPosition({ x: e.clientX, y: e.clientY });
    };

    useEffect(() => {
        console.log("添加事件监听器");
        window.addEventListener("mousemove", logMousePosition);

        // 这里的返回函数就是 Cleanup Function
        return () => {
            console.log("移除事件监听器 (Cleanup)");
            window.removeEventListener("mousemove", logMousePosition);
        };
    }, []); // 空数组确保监听器只添加一次

    return (
        
            鼠标追踪器
            X 坐标: {position.x}, Y 坐标: {position.y}
        
    );
}

export default MouseTracker;

工作原理：

组件首次渲染，Effect 运行，添加 mousemove 监听器。
鼠标移动，状态更新，组件重新渲染。
因为依赖数组是 []，React 跳过重新运行 Effect。
当组件从 UI 中移除时，React 运行 Cleanup 函数，移除监听器。

实战示例 5：带有清理的间隔定时器

如果我们需要每秒更新一次时间，并且希望在组件卸载时停止它。

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

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

    useEffect(() => {
        console.log("定时器启动");
        const interval = setInterval(() => {
            setCount((prevCount) => prevCount + 1);
        }, 1000);

        // 清理定时器
        return () => {
            console.log("定时器清理");
            clearInterval(interval);
        };
    }, []);

    return (
        
            计时器: {count}
        
    );
}

export default IntervalTimer;

在这个例子中，如果不返回 INLINECODEf8c1f2a6，即使用户跳转到了其他页面，后台依然会每秒执行 INLINECODE3193ce5a，这会极大地浪费性能并可能导致控制台报错（因为组件已卸载，却还在尝试更新 state）。

常见陷阱与最佳实践

陷阱 1：无限循环

这是新手最容易遇到的错误。如果你在 Effect 中修改了 state，而这个 state 又在依赖数组中，就会导致无限循环。

useEffect(() => {
    setCount(count + 1); // 修改了 count
}, [count]); // 依赖 count -> 导致死循环！

解决方案： 如果你需要根据前一个值进行计算，请使用函数式更新。

useEffect(() => {
    setCount(prevCount => prevCount + 1); // 不再依赖外部 count 变量
}, []); // 依赖数组为空

陷阱 2：错误的依赖项

如果你在 Effect 中使用了某个变量（比如 INLINECODE422bd1a4 或 INLINECODEd11fada5），但没有将它放入依赖数组中，React 会发出警告（ESLint 插件会提示你）。这会导致 Effect 内部使用的是旧的“闭包”值，从而产生难以调试的 Bug。

最佳实践： 始终确保 Effect 中使用的所有响应式值都包含在依赖数组中。使用 ESLint 的 react-hooks/exhaustive-deps 规则来自动检查这一点。

陷阱 3：将对象/数组作为依赖项

在 JavaScript 中，对象和数组是通过引用比较的。

function Component() {
    // 每次渲染这个对象都是一个新的引用
    const options = { key: ‘value‘ }; 

    useEffect(() => {
        // ...
    }, [options]); // 因为每次 options 引用都变了，所以每次都会运行！
}

解决方案： 如果对象是静态的，移到组件外部。如果它依赖于 state，请确保只有当其内容变化时才更新引用（例如使用 useMemo）。

进阶技巧：自定义 Hook 封装逻辑

如果你的组件中有多个 useEffect 处理相似的逻辑，或者逻辑变得非常复杂，我们可以将其提取为自定义 Hook。这不仅能提高代码复用性，还能让组件保持简洁。

假设我们有一个场景，需要根据用户的在线状态更新标题。

import { useState, useEffect } from "react";

// 自定义 Hook：useOnlineStatus
function useOnlineStatus() {
    const [isOnline, setIsOnline] = useState(true);

    useEffect(() => {
        const handleOnline = () => setIsOnline(true);
        const handleOffline = () => setIsOnline(false);

        window.addEventListener("online", handleOnline);
        window.addEventListener("offline", handleOffline);

        return () => {
            window.removeEventListener("online", handleOnline);
            window.removeEventListener("offline", handleOffline);
        };
    }, []);

    return isOnline;
}

// 在组件中使用
function StatusBar() {
    const isOnline = useOnlineStatus();

    useEffect(() => {
        document.title = isOnline ? "在线" : "离线";
    }, [isOnline]);

    return 当前状态: {isOnline ? "🟢 在线" : "🔴 离线"};
}

export default StatusBar;

通过这种方式，我们将监听网络状态的逻辑与更新 UI 标题的逻辑清晰地分离开了。

总结与关键要点

useEffect 是 React 函数组件的灵魂。虽然一开始理解它可能比类组件的生命周期稍微复杂一点，但一旦你掌握了“依赖驱动”的思维方式，你会发现编写声明式代码变得前所未有的轻松。

让我们回顾一下关键点：

职责分离：useEffect 用于处理副作用，不要在这里进行复杂的数据计算（计算应该在渲染期间完成）。
依赖项数组是关键：理解 INLINECODEe6fab5f8（挂载一次）、INLINECODE390579b1（特定变化）和无数组（每次渲染）的区别。
不要忘记清理：如果是订阅、定时器或手动 DOM 修改，务必返回清理函数以防止内存泄漏。
警惕闭包陷阱：确保 Effect 中使用的变量都在依赖数组中，或者使用函数式更新 setState(prev => ...) 来避免依赖旧状态。
提取逻辑：当逻辑变复杂时，利用自定义 Hook 来封装副作用逻辑，保持组件的纯净。

希望这篇文章能帮助你更加自信地使用 useEffect。现在，打开你的编辑器，尝试将你现有的类组件逻辑迁移到 Hooks，或者尝试构建一个新的功能吧！如果你在实践中遇到了问题，记得多查阅控制台日志，那是你最好的调试伙伴。

投稿给我们	如何建站？
vps是什么？	如何安装宝塔？
如何通过博客赚钱？	便宜wordpress托管方案
免费wordpress主题	这些都是免费方案

豆丁博客