本文详解 react native 中因闭包导致 usestate 状态值在事件回调中“卡住”的经典问题，并提供 useref、依赖更新、清理机制等三种可靠解决方案。
本文详解 react native 中因闭包导致 usestate 状态值在事件回调中“卡住”的经典问题，并提供 useref、依赖更新、清理机制等三种可靠解决方案。
在 React Native（或任何基于 React 的应用）中，使用 useState 管理 WebSocket 接收的状态时，常遇到一个典型陷阱：状态已更新，但事件处理函数中读取的仍是初始值。这并非 Bug，而是 JavaScript 闭包与 React 渲染周期共同作用的结果。
如示例代码所示，functionTwo 被定义在组件顶层，它在首次渲染时捕获了 id 的初始值（null）。而 useEffect 的依赖数组为空（[]），意味着其回调仅在挂载时执行一次——此时绑定的 message 事件处理器始终引用着第一次渲染时的 functionTwo，而该函数内部闭包持有的 id 永远不会更新。
✅ 解决方案一：正确设置 useEffect 依赖并妥善清理
最符合 React 思想的方式是让 useEffect 响应 id 或相关函数的变化，并确保事件监听器被正确移除：
const [id, setId] = useState(null);
const functionOne = (newId) => {
setId(newId);
};
const functionTwo = useCallback((newId) => {
if (id === newId) {
console.log('ids are the same');
} else {
console.log('ids are not the same');
}
}, [id]); // 关键：使 functionTwo 在 id 变化时重新创建
useEffect(() => {
const socket = new WebSocket(url);
const openHandler = () => console.log('socket connection opened');
const closeHandler = () => console.log('socket connection closed');
const messageHandler = (msg: MessageEvent) => {
const data = JSON.parse(msg.data);
if (data.eventType === 'one') functionOne(data.id);
if (data.eventType === 'two') functionTwo(data.id); // 此时使用的是最新版 functionTwo
};
socket.addEventListener('open', openHandler);
socket.addEventListener('message', messageHandler);
socket.addEventListener('close', closeHandler);
return () => {
// 必须使用相同函数引用移除监听器
socket.removeEventListener('open', openHandler);
socket.removeEventListener('message', messageHandler);
socket.removeEventListener('close', closeHandler);
};
}, [functionTwo]); // 将 functionTwo 加入依赖项⚠️ 注意：若省略清理逻辑或使用匿名函数注册监听器，将导致内存泄漏与重复监听；useCallback 包裹 functionTwo 可避免 useEffect 过度重执行。
✅ 解决方案二：使用 useRef 同步最新状态值（推荐用于高频/复杂场景）
当函数需频繁访问最新状态，又不希望触发重渲染或 effect 重运行时，useRef 是轻量高效的替代方案：
const [id, setId] = useState(null);
const idRef = useRef(id);
useEffect(() => {
idRef.current = id; // 同步 ref 值，无需渲染
}, [id]);
const functionTwo = (newId) => {
if (idRef.current === newId) {
console.log('ids are the same');
} else {
console.log('ids are not the same');
}
};此方式解耦了状态读取与渲染生命周期，functionTwo 无需重定义，useEffect 也无需监听它，适合 WebSocket、定时器、动画等长期存活的异步上下文。
✅ 补充说明：为何 Redux 能“绕过”此问题？
正如提问者后续所用，Redux（或 Zustand、Jotai 等状态库）将状态存储在组件树之外。functionTwo 通过 store.getState() 或 useSelector 获取的是当前全局最新值，而非闭包捕获的局部快照——本质上是将“状态读取”从闭包中剥离，交由外部可变存储统一管理。
? 总结建议
- 优先尝试方案一：符合 React 官方推荐模式，语义清晰，易于维护；
- 高频/长生命周期回调选方案二：useRef + useEffect 同步是最小侵入式修复；
- 避免空依赖数组（[]）中引用组件内部变量——Lint 工具（如 eslint-plugin-react-hooks）会明确警告；
- 所有 addEventListener 必须配对 removeEventListener，且函数引用一致，否则监听器将累积。
掌握闭包与 Hook 依赖机制，是写出健壮 React Native 应用的关键一步。
