react 这个技术栈到底是如何做到每天都有新发现的？

[nazalewoyuanyi]

1. 第一次点击按钮，组件重新渲染，输出'render'，此时 count 为 1 （ count: 0 -> 1)
2. 第二次点击按钮，组件重新渲染，输出'render'，此时 count 为 1(count: 1 -> 1)
3. 第三次点击按钮，组件不重新渲染(count: 1 -> 1)
4. 第四次...第五次，都不会重新渲染

就...当 setCount 的值即使和当前 count 值一样，组件是否会重新渲染，竟然不一定，还要看当前 count 值的上一次渲染...如果是 0 -> 1,那么在 setCount(1)会渲染，如果是 1 -> 1 ，那么就不会再渲染...

[dcsuibian]

让我想起了我当初的这个问题：
https://www.v2ex.com/t/1006034

[nazalewoyuanyi]

@dcsuibian 你的这个问题和我的这个问题，其实是一个问题，react 内部有一个优化机制，叫做 bailout ，就是停止重新渲染。

当调用 setState 时，会走类似于：调度 -> 组件重渲染 -> 提交到 DOM 的流程。在「调度」这个阶段，react 有一个优化机制，会对比你要 set 的 state 值和当前的 state 值，是否一样，如果一样，直接 bailout ，后续流程都不走了，组件也不会重新渲染。

但是「调度」这个阶段的这个优化机制，触发的时机特别“缺心眼”，反正我是没看明白。

所以你的那个问题的原因就是，触发了「调度」阶段的 bailout 优化机制，这个机制会读取 setState 的值，如果你 set 的是一个函数，那么他会调用这个函数得到要 set 的值，所以你的那个 setState 的函数才立即被调用。


[lovelyxiaod]

还真是，如果不看源码肯定以为第二次点击就不会打印"render"了。

[nazalewoyuanyi]

@lovelyxiaod 早知道不手欠点那一下了