React中操作不同元素触发重渲染时console.log计数为何会重置

嘿，这个问题其实是React开发模式和浏览器控制台的小特性在“搞事情”！咱们一步步拆解来看：

首先看你的代码，useEffect(() => { console.log('Render'); })没有设置依赖数组，这意味着组件每一次重渲染都会执行这个副作用函数。不管是在输入框打字触发setItem，还是点击按钮触发setWord，只要组件状态更新导致重渲染，console.log('Render')就会跑一次——理论上输入3次+点击2次，应该总共输出5次日志才对。

那为啥控制台里的计数不是累计的5次，而是分成了“3 Render”和“2 Render”两组呢？

这是因为React在开发模式下，会自动把同一个用户交互触发的所有重渲染日志进行分组。比如你输入"abc"时，每敲一个字符都会触发一次状态更新和重渲染，这三次重渲染属于同一个输入操作的连锁反应，所以控制台把它们归为一组，显示“3 Render”；之后你两次点击按钮，每次点击触发的重渲染属于另一个独立的交互序列，所以又被分成了新的一组，显示“2 Render”。

你看到的“计数重置”其实不是真的重置了，只是控制台把不同交互触发的渲染日志分开展示而已。如果展开每组前面的箭头，就能看到每一条单独的Render日志，加起来刚好是5次~

另外补充一点：这种分组是React开发环境的调试优化，到了生产环境就不会有这个分组了，日志会按顺序一条一条显示，累计计数就会是5啦。

备注：内容来源于stack exchange，提问作者David Klempfner