本文讲解如何利用 useRef 保存上一次状态值，避免因服务端同步导致的组件频繁重渲染中断动画，确保 UI 过渡效果（如模式切换动画）完整呈现。
本文讲解如何利用 `useref` 保存上一次状态值，避免因服务端同步导致的组件频繁重渲染中断动画，确保 ui 过渡效果（如模式切换动画）完整呈现。
在 React 应用中，当组件依赖服务端状态（如通过 Socket.IO 实时接收 mode 更新）并需触发本地动画时，常见的陷阱是：状态更新触发重渲染，导致动画被意外中断或跳过。你观察到“动画只闪现不到一秒就停止”，根本原因并非网络延迟或逻辑错误，而是 activeMode 的同步逻辑强制覆盖了当前动画所需的中间状态——每次 serverMode 变更，useEffect 立即调用 setActiveMode，使组件进入新状态，而 CSS/JS 动画往往依赖 mode 的变化过程（例如从 'locked' → 'unlocked'），而非最终值。
✅ 正确解法：用 useRef 捕获状态变更事件，而非被动同步
不要让 activeMode 总是“跟随” serverMode，而应将其视为受控的本地表现状态，仅在真正需要响应服务端变更时才更新，并保留过渡所需的上下文：
import { useState, useEffect, useRef } from 'react';
// 在组件内
const [activeMode, setActiveMode] = useState<string null>(null);
const prevServerModeRef = useRef<string null>(null); // 记录上一次 serverMode
useEffect(() => {
// 初始化：首次加载时可设默认 activeMode
if (activeMode === null && serverMode) {
setActiveMode(serverMode.toLowerCase());
}
}, [activeMode, serverMode]);
// 关键：仅当 serverMode 实际变更时，才触发本地状态更新和动画逻辑
useEffect(() => {
if (serverMode && prevServerModeRef.current !== serverMode) {
const newMode = serverMode.toLowerCase();
// ✅ 触发动画前，先记录旧值（供动画逻辑使用）
const oldMode = activeMode;
setActiveMode(newMode);
// ? 此处可安全启动动画（如 CSS class 切换、Framer Motion 或自定义 transition）
// 例如：添加 'mode-transition' class，或调用 animate() 方法
console.log(`Mode changed: ${oldMode} → ${newMode}`);
// 更新 ref，为下次变更做准备
prevServerModeRef.current = serverMode;
}
}, [serverMode, activeMode]);</string></string>
⚠️ 注意事项与最佳实践
- 不要在 useEffect 依赖数组中同时放 serverMode 和 activeMode 并做相等判断（如你原代码中的 serverMode !== activeMode.charAt(0).toUpperCase() + ...），这极易引发无限循环或竞态，且无法区分“初始同步”和“真实变更”。
- useRef 不会触发重渲染，因此它完美适合作为跨渲染周期的“状态快照”工具，尤其适合存储上一帧值、DOM 引用或动画起始状态。
- 若需更健壮的状态同步（如处理离线、冲突、回滚），建议升级为 useReducer + 自定义 hook，将服务端事件、本地命令、动画生命周期统一建模。
- 动画本身也应具备防抖/中断恢复能力。例如使用 transition + will-change，或在 setActiveMode 后通过 requestAnimationFrame 延迟启动，确保 DOM 已更新。
✅ 总结
问题本质是状态同步策略失当：把服务端权威状态直接映射为本地 UI 状态，忽略了动画对“变化过程”的依赖。通过 useRef 捕获 serverMode 的变更时刻，并显式控制 activeMode 的更新节奏，即可让动画获得完整的执行窗口。记住：UI 状态 ≠ 数据状态；前者服务于体验，后者服务于一致性——二者需解耦设计。
