React组件重复渲染疑问：点击相同按钮仍触发重渲染

为什么点击相同状态的按钮仍会触发重渲染？ #

React中调用setState时，默认不会校验新状态和旧状态是否相等——哪怕你传入的新值和当前state完全一样，React也会触发组件重渲染流程（虽然最终DOM可能不会更新，但组件函数会重新执行，也就是你看到的Button component rendered日志会打印）。这是React的默认设计，目的是简化逻辑，避免因比较逻辑遗漏导致的渲染不一致。

解决方法 #

方法1：手动判断状态是否变化再更新

在调用setSection前，先判断目标值是否和当前state一致，只有不一致时才执行更新：

import { useState } from "react"

export default function Button() {
  console.log('Button component rendered');
  const [section, setSection] = useState('Home')
  
  function home() {
    if (section !== 'Home') {
      setSection('Home')
    }
  }
  
  function about() {
    if (section !== 'About') {
      setSection('About')
    }
  }
  
  return (
    <>
      <div>
        <div>
          <button onClick={home}>Home</button>
          <button onClick={about}>About</button>
        </div>
        <p>{section}</p>
      </div>
    </>
  )
}

方法2：使用useState的函数式更新（适合复杂状态依赖场景）

如果状态更新逻辑依赖于当前state，也可以通过函数式更新结合判断来避免无效重渲染：

function about() {
  setSection(prevSection => {
    if (prevSection !== 'About') return 'About'
    return prevSection // 返回原状态，不触发重渲染
  })
}

补充说明 #

如果这个组件是作为子组件被其他父组件渲染，且希望避免父组件重渲染带来的无效更新，可以用React.memo包裹组件，但组件自身state触发的重渲染，React.memo无法直接解决，仍需结合上述状态判断逻辑。

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