 是非常常见的组合，但如果处理不当，极容易引入 

这些问题在简单 Demo 中不明显，但在真实项目中会带来难以定位的 Bug。

1. 什么是竞态条件（Race Condition）

在 React 中，竞态条件通常出现在以下场景：

一个典型的竞态问题流程如下：

请求 A（较慢）发出
请求 B（较快）发出
B 先返回 → 更新状态
A 后返回 → 覆盖 B 的结果 ❌

2. 什么是内存泄漏（Memory Leak）

在 React 语境下，内存泄漏并不是传统意义上“内存无法释放”，而是指：

下面通过一个简单的演示demo示例，对比两种写法的差异。

useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
        .then(async res => {
            if (res) {
                setInfo(await res.json());
            }
        })
        .catch(err => {
            console.log(err);
        });

    return () => {
        console.log("组件已卸载");
    };
}, []);


问题一：cleanup 并未真正清理副作用

，但在以下场景中就会出问题：

旧请求返回后，仍可能覆盖新请求的结果。

useEffect(() => {
    let ignore = false;

    const fetchData = async () => {
        try {
            const res = await fetch("https://jsonplaceholder.typicode.com/users");
            if (!res.ok) throw new Error('网络请求失败');

            const data = await res.json();

            if (!ignore) {
                setUsers(data);
                setLoading(false);
            }
        } catch (err) {
            if (!ignore) {
                setError(err instanceof Error ? err.message : '未知错误');
                setLoading(false);
            }
        }
    };

    fetchData();

    return () => {
        ignore = true;
        console.log("组件卸载，请求结果将被忽略");
    };
}, []);


（1）使用闭包变量解决竞态条件

（2）在 cleanup 中“逻辑取消”异步结果

当组件卸载或 effect 重新执行时：

cleanup 执行 → ignore = true
异步请求返回
if (!ignore) 判断失败
setState 不再执行


（3）将 async 函数定义在 effect 内部

这是 React 官方推荐写法，原因是：

（4）引入明确的 loading / error 状态

const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);


本文示例中，通过以下方式同时解决了这两个问题：

这种写法成本低、可读性高、行为可预测，是实际项目中非常值得采用的模式。

在 React 开发中，useEffect + 异步请求 是非常常见的组合，但如果处理不当，极容易引入 竞态条件（Race Condition） 和 内存泄漏（Memory Leak） 问题。这些问题在简单 Demo 中不明显，但在真实项目中会带来难以定位的 Bug。

React 中的竞态条件与内存泄漏：从概念到实战彻底理解

编程语言

React开发中useEffect+异步请求容易引发竞态条件和内存泄漏问题。本文详解两种常见问题表现，通过代码对比展示初始版本隐患和改进方案，重点分析使用闭包变量标记副作用有效性、在cleanup中逻辑取消异步结果等工程化解决方案，帮助开发者编写更健壮的React异步代码。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

React 中的竞态条件与内存泄漏：从概念到实战彻底理解

React 中的竞态条件与内存泄漏：从概念到实战彻底理解

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐