React 的 setState 是异步的，无法在调用后立刻读取更新值；但可通过函数式更新的回调参数直接捕获新值，并在同步上下文中使用它，避免依赖重新渲染或闭包陷阱。
react 的 `setstate` 是异步的，无法在调用后立刻读取更新值；但可通过函数式更新的回调参数直接捕获新值，并在同步上下文中使用它，避免依赖重新渲染或闭包陷阱。
在 React 函数组件中，useState 的 setter（如 setValue）并不会立即改变状态变量的引用值——它只是向 React 调度一个更新任务，实际赋值发生在下一次渲染时。因此，像 setValue(prev => prev + 1); console.log(value) 这样的写法永远输出旧值，这是由 JavaScript 闭包和 React 渲染机制共同决定的，而非“延迟”或“bug”。
✅ 正确解法：利用函数式更新的返回值即新状态这一特性，在 setValue 的回调函数内部直接处理更新后的值：
React Native For Android 源码编译 中文WORD版
下载
本文档主要讲述的是React Native For Android 源码编译；希望对大家会有帮助；感兴趣的朋友可以过来看看
import { useState } from 'react';
export default function App() {
const [value, setValue] = useState(0);
const increaseValueAndAlertUpdatedValue = () => {
setValue((prev) => {
const newValue = prev + 1;
// ✅ 此处 newValue 就是即将生效的新值
alert(`updated value: ${newValue}`);
return newValue; // 必须返回，否则状态不会更新
});
};
return (
<div classname="App">
<h1>Hello React TypeScript.</h1>
<h2>Start editing to see some magic happen!</h2>
<button onclick="{increaseValueAndAlertUpdatedValue}">
increaseValueAndAlertUpdatedValue
</button>
</div>
);
}
⚠️ 注意事项：
- 不要尝试在 setValue 外部读取 value —— 它仍是旧值，且该行为不可靠；
- 若需执行副作用（如 alert、API 调用、DOM 操作等），必须放在函数式更新的回调内，确保逻辑与新状态严格绑定；
- 对于大型对象状态，推荐使用 immer 或结构化更新（如 setState(prev => ({ ...prev, field: newValue }))），避免意外引用共享；
- setTimeout(..., 0) 或 Promise.resolve().then() 等“微任务”技巧不能解决根本问题：它们仍会捕获旧闭包中的 value，除非配合 useRef 手动同步（不推荐，增加复杂度）；
- useEffect 和 useLayoutEffect 属于副作用钩子，适用于响应状态变更后的统一处理，而非同步业务逻辑分支。
? 总结：React 的设计哲学是“状态驱动视图”，而非“命令式赋值”。当你需要“设置并立即使用新值”，本质上是在表达“基于新状态执行动作”——这正契合函数式更新的语义。将业务逻辑内聚于 setState 的 updater 函数中，既简洁、可靠，又完全符合 React 的数据流模型。
