GoForum › 🌐 V2EX
react 这个技术栈到底是如何做到每天都有新发现的？
nazalewoyuanyi ·
2026-05-27 23:43 ·
0 次点赞 · 4 条回复
- 第一次点击按钮，组件重新渲染，输出’render’，此时 count 为 1 （ count: 0 -> 1)
- 第二次点击按钮，组件重新渲染，输出’render’，此时 count 为 1(count: 1 -> 1)
- 第三次点击按钮，组件不重新渲染(count: 1 -> 1)
- 第四次…第五次，都不会重新渲染
就…当 setCount 的值即使和当前 count 值一样，组件是否会重新渲染，竟然不一定，还要看当前 count 值的上一次渲染…如果是 0 -> 1,那么在 setCount(1)会渲染，如果是 1 -> 1 ，那么就不会再渲染…
4 条回复
nazalewoyuanyi · 2026-05-28 00:18
@dcsuibian 你的这个问题和我的这个问题，其实是一个问题，react 内部有一个优化机制，叫做 bailout ，就是停止重新渲染。
当调用 setState 时，会走类似于：调度 -> 组件重渲染 -> 提交到 DOM 的流程。在「调度」这个阶段，react 有一个优化机制，会对比你要 set 的 state 值和当前的 state 值，是否一样，如果一样，直接 bailout ，后续流程都不走了，组件也不会重新渲染。
但是「调度」这个阶段的这个优化机制，触发的时机特别“缺心眼”，反正我是没看明白。
所以你的那个问题的原因就是，触发了「调度」阶段的 bailout 优化机制，这个机制会读取 setState 的值，如果你 set 的是一个函数，那么他会调用这个函数得到要 set 的值，所以你的那个 setState 的函数才立即被调用。
lovelyxiaod · 2026-05-28 00:23
还真是，如果不看源码肯定以为第二次点击就不会打印”render”了。
nazalewoyuanyi · 2026-05-28 00:33
@lovelyxiaod 早知道不手欠点那一下了
添加回复
你还需要 登录
后发表回复
让我想起了我当初的这个问题： https://www.v2ex.com/t/1006034