如何在React的useEffect中将状态更新传递给自定义渲染循环？

针对你遇到的React里requestAnimationFrame循环无法获取最新状态，同时又不想因状态变化重启开销巨大的初始化逻辑的问题，最符合React设计理念且优雅的做法就是你提到的第三种方案——通过useRef同步组件状态，让循环始终能拿到最新值，同时保持循环持续运行不中断。

具体实现代码 #

function Animation({ someState }) {
  const loopDataRef = useRef();
  // 用来存储最新状态的引用
  const someStateRef = useRef(someState);

  // 专门负责同步状态的Effect，仅在someState变化时触发
  useEffect(() => {
    someStateRef.current = someState;
  }, [someState]);

  useEffect(() => {
    // 只执行一次的初始化工作（比如获取WebGL上下文、创建纹理/着色器）
    let frameId;
    const renderLoop = (timestamp) => {
      frameId = window.requestAnimationFrame(renderLoop);
      // 这里直接取someStateRef.current就能拿到最新的状态
      const currentState = someStateRef.current;
      // 结合loopDataRef.current执行你的渲染逻辑
    };
    renderLoop();
    // 组件卸载时清理循环
    return () => window.cancelAnimationFrame(frameId);
  }, []);
}

为什么这是最优解？ #

• 贴合React的生命周期设计：用单独的Effect来同步状态，既遵循了React的依赖追踪规则（明确把someState加入依赖数组），又避免了循环的频繁重启。
• 性能开销最小：初始化逻辑只执行一次，不会因为状态变化重复执行昂贵的操作；状态同步只是简单的赋值，几乎没有性能损耗。
• 代码职责清晰：把初始化/循环启停和状态同步拆分成两个独立的Effect，逻辑边界明确，后续维护和修改起来也更方便。

其他方案的局限性分析 #

再聊聊你提到的其他几种方案的问题，帮你更清楚为什么它们不是最优选择：

1. 把someState加入初始化Effect的依赖数组

   • 问题：每次someState变化都会重新执行整个Effect，包括重启循环和重新初始化。如果初始化有像WebGL资源创建这种昂贵操作，会直接导致性能暴跌，完全不可行。

2. 双Effect负责循环启停

   • 问题：状态变化时停止再重启循环，会让动画出现卡顿甚至中断，不符合"循环持续运行到主动停止"的需求，还可能引入额外的状态不同步问题。

3. 每次渲染直接写入Ref

   • 问题：虽然性能还行，但这种做法跳过了React的Effect生命周期，把副作用逻辑直接放在了渲染阶段。React要求渲染阶段的代码是纯函数，不能有修改Ref这类副作用，在并发模式下可能会引发不可预期的bug，不符合React的设计规范。

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