关于React FC useState，如何解释以下console.log？

Question

React代码如下, 前三次每次点击button都会打印不同的结果，苦思不得解，请大佬解惑。。

第一次点击button打印：click 1 2
第二次点击button打印：click 1
第三 ~ 第 N 次点击button打印：click

function A() {
  console.log(2)
  return null
}

const App: React.FC = () => {
  const [flag, setFlag] = useState(false)
  console.log(1)
  return (
    <div>
      <button
        onClick={() => {
          console.log("click")
          setFlag(true)
        }}
      >
        click me
      </button>
      <A />
    </div>
  )
}

如何解释第二次的打印结果呢？？？
我原以为第二次点击button，只会打印click，依据是状态的newValue === prevValue，不会触发re-render，但是想不通为什么还打印了“1”。然后奇怪的是，第三次往后，又没有“1”了

Answer 1

这个涉及react的更新策略问题，建议网上搜索eagerState相关内容，或者看下这篇https://juejin.cn/post/7073692220313829407

Answer 2

先把代码看明白就行了。你的三个打印分别为：

1. 按钮每次被点击打印click（所以永远有效）
2. state的值变化导致组件刷新打印2
3. A组件渲染打印1

目前我怀疑你描述的打印顺序是错误，这个组件加载就会打印1，然后完成A加载，打印2；然后你才能点到button打印click，由于点击时修改了state的值，马上会再次打印1，A组件应该不需要重新渲染，所以不会再次打印2；以后再点按钮因为state已经是true，所以不会再有啥反应了，这样就只能看到click了。

Answer 3

第一次点击按钮后，flag 由 flase 被更新为 true，触发了 App 的重新渲染，同时也会重新渲染它的子组件 A，所以会输出 click 1 2。

第三次点击按钮，flag 的值已经是 true，再次设置相同的值会被 React 忽略，所以不会触发更新，所以仅输出 click。

第二次点击按钮，这里的情况比较复杂，按照 React 旧文档的描述，这里仅会重新运行 App 的渲染函数，而不会重新渲染子组件：

更多详情，阅读 SetState with same value, rerenders one more time #28779 - Github