本文详解如何利用 useref 保存最新状态值，使 websocket 等异步回调能安全访问当前状态，避免因闭包导致的 stale props/state 问题，兼顾简洁性与可维护性。
本文详解如何利用 useref 保存最新状态值，使 websocket 等异步回调能安全访问当前状态，避免因闭包导致的 stale props/state 问题，兼顾简洁性与可维护性。
在 React 函数组件中，异步操作（如 WebSocket 连接、定时器、事件监听器）的回调函数常需访问组件的最新状态。但若直接在 useEffect 内部引用 useState 的变量（如 status），由于闭包机制，回调会永久捕获首次渲染时的值——即所谓的“过期状态（stale state）”。你提供的示例中，socket.onclose 始终打印 "status_a"，正是这一经典陷阱的体现。
虽然用 useRef 存储整个回调函数（如 callbacks.current.socketOnClose）能绕过闭包问题，但它违背了 React 的设计直觉：回调本身是派生逻辑，不应作为“被记忆的值”；真正需要被跨渲染周期稳定持有的，是状态数据本身。React 官方文档明确指出：useRef 的核心用途是让组件“记住”不触发重渲染的信息——这恰恰匹配我们对 status 等状态快照的需求。
✅ 推荐方案：用 ref 同步状态值，而非存储回调
import { useState, useEffect, useRef } from 'react';
function MyComponent() {
const [status, setStatus] = useState('status_a');
const [socket, setSocket] = useState<WebSocket | null>(null);
// 创建 ref 存储 status 的最新值
const statusRef = useRef(status);
// 每当 status 变化时，同步更新 ref
useEffect(() => {
statusRef.current = status;
}, [status]);
// 初始化 WebSocket —— 依赖项为空数组，仅执行一次
useEffect(() => {
const socketInstance = new WebSocket('ws://foo.com');
socketInstance.onopen = () => console.log('WebSocket connected');
// 关键：从 ref 读取实时 status，避免闭包捕获
socketInstance.onclose = () => {
console.log(`socket closed while status was ${statusRef.current}`);
};
socketInstance.onerror = (err) => {
console.error('WebSocket error:', err);
};
setSocket(socketInstance);
// 清理：关闭连接
return () => {
if (socketInstance.readyState === WebSocket.OPEN) {
socketInstance.close();
}
};
}, []); // ⚠️ 注意：此处无 status 依赖，确保只初始化一次
return (
<div>
<p>Current status: {status}</p>
<button onClick={() => setStatus('status_b')}>Switch to B</button>
</div>
);
}
export default MyComponent;? 为什么这个模式更优？
- 语义清晰：statusRef 明确表达“我需要 status 的最新快照”，而非“我把整个回调塞进 ref”；
- 可扩展性强：当有多个依赖状态（如 status, userId, config）时，只需为每个创建独立 ref 并在对应 useEffect 中同步，无需重构回调定义逻辑；
- 符合 React 思维模型：状态变更驱动 UI，而 ref 仅作数据桥接，不参与渲染流程；
- 避免意外重运行：将 status 从 useEffect 依赖数组中移除，防止 WebSocket 被重复创建。
⚠️ 注意事项与最佳实践
务必添加清理函数：WebSocket 实例必须在组件卸载前关闭，否则可能引发内存泄漏或错误事件触发；
ref 同步时机：useEffect(() => { ref.current = value }, [value]) 是标准模式，确保 ref 值与状态严格一致；
-
多状态场景示例：
const userIdRef = useRef(userId); const configRef = useRef(config); useEffect(() => { userIdRef.current = userId; }, [userId]); useEffect(() => { configRef.current = config; }, [config]); // 在 onclose 中可安全使用：`${userIdRef.current}, ${configRef.current}` 替代方案权衡：useCallback + 依赖数组虽可行，但会导致 useEffect 频繁重执行（破坏“只连一次”的语义）；useReducer 或自定义 Hook（如 useEventCallback）适合复杂场景，但对单状态问题属于过度设计。
总之，用 ref 同步状态值是解决 React 异步回调闭包问题的精准、轻量且符合官方推荐范式的方案。它不增加心智负担，却能从根本上杜绝 stale state 风险，值得在 WebSocket、setTimeout、addEventListener 等所有需跨渲染访问状态的场景中优先采用。
