React useState 更新不是立即生效拿到的是旧值

jsx import { useState } from "react";

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

const handleClick = () => { setCount(count + 1); console.log(count); // 第一次点击输出 0，而不是 1 };

return (

你期望点击按钮后控制台立刻输出 `1`，但实际输出的是 `0`。同时页面上的 `count` 会正确渲染为 `1`。这证明状态已经更新，只是 `console.log` 拿到的仍然是旧值。

### 深入原理：useState 的异步更新与闭包

#### 1. 状态更新的批处理机制

React 出于性能考虑，会将一个事件处理函数中的多次 `setState` 调用合并为一次更新，并在下一次渲染前统一计算新状态。因此 `setCount` 并不会立即修改当前作用域中的 `count` 变量，而是“安排”了一次重新渲染。

#### 2. 函数组件中的闭包陷阱

函数组件每一次渲染都会形成全新的闭包。`handleClick` 函数捕获的是**本次渲染**传入的 `count` 值（例如 `0`）。即使 React 内部已经安排了状态更新，但当前函数执行上下文里的 `count` 依然引用着旧值。所以 `console.log(count)` 打印的自然就是旧值。

#### 3. 为什么界面会更新？

React 在状态更新调度完毕后，会用新的 `count` 值重新执行整个组件函数，返回新的 JSX，并提交到 DOM。新渲染中的 `count` 就是正确的值，因此界面正确。但旧渲染中的事件处理函数永远不会再改变。

### 解决方案一：使用 `useEffect` 监听状态变化

如果你需要在状态更新后执行副作用（如日志记录、接口调用），将逻辑放入 `useEffect` 是正确的做法。

```jsx
import { useState, useEffect } from "react";

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

  useEffect(() => {
    console.log("count 更新为:", count);
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return ( /* ... */ );
}

useEffect 会在 DOM 更新完成后调用，此时拿到的 count 一定是最新值。

适用场景：任何需要依赖最新状态值的副作用。

解决方案二：使用函数式更新获取最新状态

当你需要基于前一个状态计算新状态时，setState 可以直接传入一个函数：

const handleClick = () => {
  setCount(prevCount => prevCount + 1);
  // 依然无法在此处拿到最新值，但至少更新逻辑正确
};

如果需要同时获取更新后的值进行下一步操作，可以结合 useRef 或 useEffect，但多数场景下函数式更新已经能避免很多因闭包导致的计算错误（例如短时间内多次点击累加）。因为 prevCount 参数永远是最新的版本。

适用场景：新状态依赖旧状态时（计数器、累加、切换等）。

解决方案三：使用 useRef 保存最新值（谨慎使用）

useRef 创建的引用在组件的整个生命周期内保持不变，并且值的变更不会触发重渲染。你可以用它来“绕过”闭包：

import { useState, useRef, useEffect } from "react";

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

  // 同步最新值到 ref
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
    // 此时 ref 中保存的仍是旧值，因为 useEffect 还未执行
    // 可以在需要的地方（如异步回调中）读取 countRef.current
  };

  // 例如在定时器或事件监听中使用
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("ref 中的最新 count:", countRef.current);
    }, 1000);
    return () => clearInterval(timer);
  }, []);

  return ( /* ... */ );
}