React - 为什么点击按钮后输出是这样的？

Question

下面是我的 React 代码：

import { useState } from 'react'

function Child() {
  console.log(2)
  return <p>Child Component</p>
}

function App() {
  console.log(1)
  const [count, setCount] = useState(0)

  return (
    <div>
      <button
        onClick={() => {
          console.log('click')
          setCount(1)
        }}
      >
        Click Me
      </button>
      <p>Count: {count}</p>
      <Child />
    </div>
  )
}

export default App

第一次点击按钮，控制台输出

click 1 2

;

第二次点击，控制台输出

click 1

;

第三次及后续点击，控制台输出

click

。

那么为什么它会这样呢？

Answer 1

当新的状态值与当前状态值相同时，React 不会触发组件的重新渲染，以避免不必要的重新渲染来优化性能。