React的闭包陷阱

在 React Hook 中，闭包问题是一个常见陷阱，通常表现为：在 useEffect、事件处理函数等中访问的状态 / 属性值不是最新的，而是捕获了函数创建时的 "旧值"。这是因为 Hook 依赖 JavaScript 的闭包特性，函数会保留其创建时所处作用域的变量引用。

典型的闭包问题示例

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      // 这里的 count 始终是 0（初始值），因为定时器函数捕获了初始作用域的 count
      console.log('当前 count:', count); 
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖数组：effect 只执行一次

  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

问题：点击按钮更新 count 后，定时器中打印的 count 始终是 0，因为 useEffect 只执行一次，内部的定时器函数捕获了初始的 count 闭包。

解决闭包问题的 4 种方案

1. 将依赖项加入依赖数组（最推荐）

如果 useEffect 或事件处理函数依赖某个状态 / 属性，应将其加入依赖数组。这样当依赖变化时，函数会重新创建，捕获最新的闭包。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('当前 count:', count); // 能获取最新 count
  }, 1000);
  return () => clearInterval(timer);
}, [count]); // 加入 count 依赖：count 变化时重新执行 effect

原理：count 变化后，useEffect 会重新运行，创建新的定时器函数，此时函数捕获的是最新的 count。

2. 使用 useRef 存储最新值

useRef 创建的变量在组件生命周期内保持唯一引用，且修改其 current 属性不会触发重渲染。可用于存储最新状态，突破闭包限制。

function Counter() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count); // 用 ref 存储最新值

  // 每次 count 变化时，更新 ref.current
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  useEffect(() => {
    const timer = setInterval(() => {
      // 访问 ref.current 获取最新值，不受闭包限制
      console.log('当前 count:', countRef.current); 
    }, 1000);
    return () => clearInterval(timer);
  }, []); // 空依赖：effect 只执行一次

  // ... 其余代码不变
}

适用场景：不希望因依赖变化而重新执行 useEffect（如避免频繁创建 / 销毁定时器），但需要访问最新状态。

3. 使用函数式更新获取最新状态

当需要基于前一个状态计算新状态时，使用函数式更新（setState(prev => newState)），可以避免直接依赖状态变量。

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    // 函数式更新：prev 始终是最新状态，不受闭包影响
    setCount(prev => prev + 1);
  };

  useEffect(() => {
    // 假设需要在 effect 中更新状态
    setCount(prev => prev + 10); 
  }, []);

  return <button onClick={handleClick}>{count}</button>;
}

原理：函数式更新的回调参数 prev 会始终指向最新的状态值，无需依赖外部闭包中的状态。

4. 使用 useReducer 管理复杂状态

对于多状态或复杂逻辑，useReducer 的 dispatch 引用是稳定的（不会随状态变化而重新创建），且 reducer 函数中能获取最新状态。

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'LOG':
      console.log('当前状态:', state); // reducer 中始终是最新状态
      return state;
    default:
      return state;
  }
}

function Counter() {
  const [count, dispatch] = useReducer(reducer, 0);

  useEffect(() => {
    const timer = setInterval(() => {
      dispatch({ type: 'LOG' }); // dispatch 引用稳定，触发后 reducer 能获取最新 state
    }, 1000);
    return () => clearInterval(timer);
  }, [dispatch]); // dispatch 稳定，effect 只执行一次

  return <button onClick={() => dispatch({ type: 'INCREMENT' })}>{count}</button>;
}

原理：dispatch 函数的引用在组件生命周期内不变，通过 dispatch 触发的 reducer 能始终访问最新的 state。

总结：如何避免闭包问题？

1. 优先遵循依赖数组规则：明确 useEffect、useCallback 等 Hook 的依赖项，确保依赖变化时函数能重新创建。

2. 用 useRef 突破闭包限制：适用于需要在不重新执行 effect 的情况下访问最新状态。

3. 函数式更新 /useReducer：处理状态更新依赖前状态的场景，避免直接依赖闭包中的旧值。

核心原则是：理解 Hook 中函数会捕获其创建时的状态快照，通过显式声明依赖或使用稳定引用的方式，确保访问到最新值。