javascript - 关于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

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

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

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