React中如何防范过期数据执行与异步竞态问题？

问题本质 #

useRef的current属性是可变的，且修改它不会触发组件重渲染。当你在同步代码中判断current的值后，异步操作（比如Promise回调、setTimeout）可以直接修改这个值，导致后续访问时出现不符合预期的结果——要么误执行操作，要么访问不存在的属性报错。这就是典型的异步竞态问题：代码执行顺序和状态变化的时机不一致。

场景一：避免误调用生产环境接口 #

你的代码里有个小疏漏：判断条件if (productionMode)其实是在检查Ref对象本身（永远为真），正确的判断应该是if (productionMode.current)。不过核心担忧是异步修改current后误调用接口，解决方案有两种：

方案1：快照捕获（推荐） #

在判断前把current的值存到局部常量里，用这个常量完成判断和后续操作。这样即使异步操作修改了productionMode.current，你用的还是判断时刻的状态，不会出现误调用：

const productionMode = useRef<boolean>(true);

// 捕获当前状态的快照
const isProd = productionMode.current;
if (isProd) {
    callToProdEnvironment();
}

这种方式不需要在callToProdEnvironment里重复校验，因为你已经确保调用时的状态符合条件，完全避免了竞态。

方案2：操作前二次校验（必要场景） #

如果你的逻辑要求只有调用接口时处于生产模式才执行（比如异步操作耗时很长，期间状态可能合法更新），那就在接口调用前再次校验：

function callToProdEnvironment() {
    // 二次确认最新状态
    if (!productionMode.current) return;
    // 执行生产环境接口调用
}

这不是冗余，而是异步场景下的必要保障，确保操作符合最新状态。

场景二：避免访问undefined属性报错 #

先复制current到局部常量的方案是完全正确的，核心原因是：

• 局部常量在同步代码块中是固定的，异步操作修改aRef.current不会影响这个常量。
• 你的逻辑本来就是“如果当前aRef.current存在，就访问它的属性”，所以用判断时刻的快照（也就是你说的“旧值”）完全符合逻辑——你已经确认这个值存在，后续访问的就是这个确认过的有效值，不会被异步修改成undefined导致报错。

对比两种写法：

错误写法（存在竞态） #

const aRef = useRef<MyCustomObject | undefined>(myObj);

if (aRef.current) {
    // 异步操作可能在这里修改aRef.current为undefined
    console.log(aRef.current.aProperty); // 会报错
}

正确写法（避免竞态） #

const aRef = useRef<MyCustomObject | undefined>(myObj);

// 捕获当前current的快照
const current = aRef.current;
if (current) {
    console.log(current.aProperty); // 安全，current是常量不会变
}

通用解决方案总结 #

1. 快照捕获：这是解决useRef异步竞态最直接的方法，在使用current前先赋值给局部常量，确保后续操作基于同一个状态。
2. 用useState替代useRef：如果这个值的变化需要触发组件更新，或者需要在异步操作中保证状态一致性，优先用useState。因为useState的值是不可变的，每次更新都会触发重渲染，同一次渲染中状态不会被异步修改：

const [isProduction, setIsProduction] = useState(true);

if (isProduction) {
    callToProdEnvironment();
}

3. 操作前二次校验：对于耗时较长的异步操作，若必须确保操作时状态是最新的，在关键步骤前再次校验current值。

内容的提问来源于stack exchange，提问作者cien