React延迟回调无法捕获最新值的优化方案咨询

这个问题的本质是JS闭包的捕获特性和React组件渲染逻辑结合产生的闭包陷阱：当你点击按钮触发setTimeout时，当前执行上下文捕获的是那一刻父组件传入的onFinish函数引用，哪怕5秒等待期内父组件因为count状态变化重新渲染、传入了更新后的onFinish，已经入队的定时器回调依然会持有最初捕获的旧引用，不会自动获取最新值。

你用useRef存储回调引用的解决思路是完全正确的，但直接在组件函数体里写cb.current = onFinish的实现存在隐患：在React 18并发渲染模式下，组件函数体可能被中断、重复执行，这种在渲染阶段直接修改ref的操作不符合React对渲染阶段纯函数的要求，可能出现赋值不一致的问题。

• 规范ref的同步赋值时机
  把ref的赋值逻辑放到React的提交阶段完成，既保留你原来的核心逻辑，又规避并发渲染的问题：

  import { useState, useRef, useLayoutEffect } from "react";
  
  const Child = ({ onFinish }) => {
    const [finished, setFinished] = useState(false);
    // 初始化ref的默认值为最初传入的onFinish
    const cbRef = useRef(onFinish);
    // 在DOM提交后同步最新的回调引用，不阻塞渲染流程
    useLayoutEffect(() => {
      cbRef.current = onFinish;
    }, [onFinish]);
  
    const finish = async () => {
      setFinished(true);
      // 定时器触发时读取ref中保存的最新回调，避免捕获旧值
      setTimeout(() => cbRef.current?.(), 5000);
    };
  
    return finished ? (
      <p>Wait 5 seconds and increment while waiting.</p>
    ) : (
      <button onClick={finish}>Click here to finish</button>
    );
  };
  

  父组件的代码不需要做任何修改，就能实现“等待5秒期间不管怎么修改count，最终弹窗都能拿到最新count值”的效果。

• 适配React官方未来API的写法
  React团队目前在canary版本中开发的useEffectEvent钩子，就是专门为这类“延迟/异步执行时需要获取最新回调，又不希望回调变化影响已注册副作用”的场景设计的。这个钩子生成的函数会始终持有最新的props/state值，同时自身引用保持稳定，完全不需要手动维护ref的赋值逻辑，等正式发布后会成为这类场景的最优解：

  import { experimental_useEffectEvent as useEffectEvent, useState } from "react";
  
  const Child = ({ onFinish }) => {
    const [finished, setFinished] = useState(false);
    // 自动持有最新的onFinish引用，函数引用永远保持稳定
    const latestOnFinish = useEffectEvent(onFinish);
  
    const finish = async () => {
      setFinished(true);
      // 直接调用即可拿到包含最新状态的回调逻辑
      setTimeout(() => latestOnFinish(), 5000);
    };
    // 其余组件逻辑和原实现完全一致
  };
  

常见坑：很多人遇到这类问题第一反应是给传入的onFinish套一层useCallback固定引用，避免回调变化触发组件重渲染。但这和你要实现的效果完全相反——useCallback固定的是最初闭包里的count值，哪怕你在等待期把count加了好几次，最终弹出来的还是点击那一刻的count值，根本拿不到最新结果。

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