为什么React组件在state值未变更时仅触发一次重渲染？

import React, { useState } from "react";

export const App = () => {
  const [state, setState] = useState(0);
  // 注：原代码中的stateA属于笔误，实际应为state
  console.log("Render App Render", state);

  return (
    <div className="App">
      <button onClick={() => setState(1)}>setState in App Component</button>
    </div>
  );
};

现象解释 #

核心逻辑和React的状态更新校验规则相关，你遇到的现象符合React 17及更早版本的运行逻辑：

• 组件挂载时：属于组件首次初始化渲染，useState默认赋值为0，自然会执行日志输出Render App Render 0
• 首次点击按钮：传入的新状态1和旧状态0浅比较不相等，触发组件重渲染，因此输出Render App Render 1
• 第二次点击按钮：传入的新状态1和当前状态1浅比较相等，React 17及更早版本为了规避部分边界场景的状态不一致问题，会主动执行1次额外的重渲染做校验，所以会再输出一次Render App Render 1
• 第三次及更多次点击：经过上一次的额外渲染校验后，React已经确认该状态更新不会产生任何变化，后续所有传入相同值的setState调用都会被直接跳过，不会触发组件重渲染，因此无日志输出

补充说明：如果是React 18及以上版本，优化了状态比对逻辑，第二次点击时就不会出现那次额外的重渲染，第二次及之后的点击都不会有日志输出。

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