React 的闭包陷阱 + 状态异步更新机制

🔹1. 为什么 useState 更新了,但打印是旧值?

scss 复制代码
const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
  console.log("count:", count); // ❌ 打印的还是旧值
};

原因:

  • setCount 并不会立刻修改 count,而是 调度一次重新渲染
  • 在当前函数调用上下文里,count 还是旧的。
  • 下一次渲染函数执行时,count 才会变成新值。

👉 React 的 state 更新是异步的、批量的


🔹2. 为什么 useEffect 里总是打印上一次的值?

scss 复制代码
useEffect(() => {
  console.log("count in effect:", count);
}, [count]);

这个逻辑其实是正确的

  • useEffect 执行时机是 DOM 更新后
  • 打印的值就是本次 render 的 count,但因为 console.log 常和点击事件混用,很多人会以为"怎么总是落后一步"。

示例:

rust 复制代码
// 初始 count=0
点击按钮 -> setCount(1)
-> render(count=1)
-> DOM 更新
-> useEffect 执行,打印 1 ✅

如果你在 点击回调里打印effect 里打印对比,就会发现一个"延迟一拍"的错觉。


🔹3. 怎么解决/避免?

✅ 方法1:用 函数式更新 拿到最新值

ini 复制代码
setCount(prev => {
  console.log("最新 count:", prev + 1);
  return prev + 1;
});

这样不会受闭包影响,永远基于最新状态更新。


✅ 方法2:在 useEffect 里观察变化

scss 复制代码
useEffect(() => {
  console.log("count 更新:", count);
}, [count]);

更符合 React 思路:状态变化 → 副作用


✅ 方法3:如果确实要获取"最新的值",用 useRef

ini 复制代码
const countRef = useRef(count);

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

// 在任何地方访问 countRef.current 都是最新的

🔹4. 总结口诀

  1. setState 不会立即更新,打印的还是旧值
  2. useEffect 打印的其实是对的值,只是它本来就滞后执行
  3. 想要拿到最新值 → 用函数式更新或 useEffect/useRef
相关推荐
7ayl6 小时前
Vue3 - Reactivity的核心流程
前端·vue.js
The 旺6 小时前
【AI编程实战】零基础用ChatGPT+Cursor开发完整Web应用:30分钟从idea到上线
前端·chatgpt·ai编程
sulikey6 小时前
Qt 入门简洁笔记:信号与槽
前端·c++·笔记·qt·前端框架·1024程序员节·qt框架
袁煦丞6 小时前
安卓旧机变服务器,KSWEB部署Typecho博客并实现远程访问:cpolar内网穿透实验室第645个成功挑战
前端·程序员·远程工作
爱抽烟的大liu6 小时前
iOS进阶1-combine
前端
俩毛豆6 小时前
【图片】【编缉】图片增加水印(通过组件的Overlay方法增加水印)
前端·harmonyos
gustt6 小时前
JS 变量那些坑:从 var 到 let/const 的终极解密
前端·javascript
出师未捷的小白6 小时前
[NestJS] 手摸手~工作队列模式的邮件模块解析以及grpc调用
前端·后端
Z_B_L6 小时前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
袁煦丞6 小时前
PandaWiki开源知识库系统破解内网限制:cpolar内网穿透实验室第616个成功挑战
前端·程序员·远程工作