React useState状态未变更时第二次点击setState出现额外组件执行日志问题

这个是React内置的状态更新退出（bailout）逻辑的正常表现，该行为在React 16.8引入Hook之后的所有版本都适用，具体触发流程对应你观察到的现象如下：

• 首次点击按钮时，check状态从false变为true，属于状态值变更，触发组件完整重渲染，所以控制台打印日志，DevTools也会显示重渲染高亮。
• 第二次点击按钮时，你调用setCheck(true)传入的新值和当前check的现有值完全一致，React为了避免遗漏可能的上下文变更导致的组件输出变化，会先执行一次单次轻量预检查渲染：
  • 这次预检查会完整执行一次组件函数体，所以会触发console.log打印
  • 预检查结束后React比对组件前后输出完全一致，会直接退出渲染流程，不会更新DOM，也不会触发后续的渲染生命周期，所以React DevTools不会显示重渲染高亮。
• 后续点击按钮时，React已经确认过“该状态传入相同值时组件输出不会变化”，就会直接跳过所有渲染步骤，连预检查都不会执行，所以不会再产生新的日志。

内容的提问来源于stack exchange，提问作者Giorgos