ReactJS扫线Demo问题：多Surface无法同步更新数据

问题根因 #

你碰到的问题是因为多个Surface共用了同一套动画控制逻辑或状态，新创建的组件会覆盖旧组件的动画上下文（比如全局的requestAnimationFrame引用、共享的状态变量），导致旧组件的绘制循环被中断。

具体修复步骤 #

1. 给每个Surface独立维护动画与数据状态 #

每个Surface组件必须拥有自己的动画帧ID和数据集，不能用全局变量或者父组件共享的单一状态：

// Surface组件内部
const [animationId, setAnimationId] = useState(null);
const [localData, setLocalData] = useState([]);

2. 每个Surface单独启动/清理动画循环 #

在Surface的useEffect里，挂载时启动专属的动画循环，卸载时及时清理，避免资源泄漏和上下文冲突：

useEffect(() => {
  const updateLine = () => {
    // 这里只更新当前Surface的本地数据，比如生成新的扫线点
    setLocalData(prev => [...prev, generateNewPoint()]);
    const frameId = requestAnimationFrame(updateLine);
    setAnimationId(frameId);
  };

  const initFrameId = requestAnimationFrame(updateLine);
  setAnimationId(initFrameId);

  // 组件卸载时取消当前动画
  return () => {
    animationId && cancelAnimationFrame(animationId);
  };
}, []);

3. 隔离数据源 #

不要让多个Surface共用同一个数据源，要么每个组件自己生成数据，要么从父组件接收对应唯一标识的独立数据（比如给每个Surface分配唯一的dataKey）。

4. 适配SortableJS拖拽的组件稳定性 #

用SortableJS做拖拽排序时，必须给每个Surface组件设置唯一稳定的key（比如用组件的唯一ID，不能用数组索引），防止React在拖拽时错误地销毁重建组件，导致动画中断：

// 父组件渲染列表
{surfaceList.map(item => (
  <Surface key={item.uniqueId} {...item.props} />
))}

关键提醒 #

• 绝对不能用全局变量存requestAnimationFrame的返回值，每个组件必须单独管理自己的动画帧
• 组件状态要彻底隔离，避免跨组件状态污染
• 拖拽排序的key必须唯一且稳定，保证组件实例不被意外销毁

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