为何React组件状态未变更时仍会出现重复渲染？

问题描述 #

在以下React组件中，点击第三个按钮（type="submit" with state change）时出现了不符合预期的渲染行为：

• 第一次点击：dummy从false变为true，组件正常渲染（控制台打印rendering），符合预期。
• 第二次点击：dummy保持true无变化，但组件仍重新渲染（打印rendering）。
• 第三次及之后点击：组件不再渲染，仅触发表单的submit事件（打印submitting）。

组件代码：

function Demo()
{
   console.log('rendering')
   const [dummy, setDummy] = useState(false);

   return (
      <form onSubmit={(e) => {e.preventDefault();console.log('submitting')}}>
         <button>type="submit"</button>
         <button type="button">type="button"</button>
         <button type="submit" onClick={(e) => {setDummy(true)}}>type="submit" with state change</button>
         {dummy ? 'on' : 'off'}
      </form>
   )
}

原因分析 #

这个现象的核心是React状态更新机制的细节，结合表单事件的触发顺序：

1. 事件触发顺序：点击第三个按钮时，会先后触发两个事件：按钮的onClick，然后是表单的onSubmit。

2. 第一次点击：
   onClick中调用setDummy(true)，将状态从false改为true，状态变更触发组件渲染，之后onSubmit执行（e.preventDefault()阻止了表单默认跳转）。

3. 第二次点击：
   onClick中再次调用setDummy(true)，此时状态值没有变化，但React会尝试触发一次渲染流程——这是因为React的优化机制需要确认状态确实连续无变化，第一次遇到相同值的状态更新时，仍会执行组件函数（打印rendering），但虚拟DOM对比后会跳过实际DOM更新。随后onSubmit正常执行。

4. 第三次及之后点击：
   React已经确认连续两次调用setDummy(true)都没有改变状态，此时会彻底跳过状态更新和组件渲染流程，仅执行onSubmit事件处理函数，因此不再打印rendering。

简单来说：React对于重复的相同状态更新，会在第一次“无效更新”时仍触发一次渲染尝试，后续则会完全跳过，以此平衡性能和机制一致性。

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