为何React在状态/UI无变化时仍会触发额外渲染？

你遇到的问题核心在于React的状态更新机制和渲染触发逻辑：

1. setState调用即触发渲染，而非先判断值是否变化
   不管传入的新状态和当前状态是否一致，只要调用setState（或useState的更新函数），React就会标记组件需要重新渲染，执行组件的render函数。之后才会通过Diff算法对比新旧虚拟DOM，决定是否更新真实DOM——但这一步是在render之后，所以你会看到console.log('Header rendered')被打印，也就是组件确实执行了渲染流程，只是最终没有更新真实DOM。

2. 代码逻辑导致每次点击都调用更新函数
   你的按钮点击事件里，每次点击都会执行setBtnName('Logout')，哪怕当前btnName已经是Logout。这种情况下，React依然会触发组件重渲染，因为它不会在调用更新函数前主动判断新值是否和旧值相等。

你的代码示例 #

import { useState } from 'react';
import { LOGO_URL } from '../utils/constants';

const Header = () => {
  const [btnName, setBtnName] = useState('Login');
  console.log('Header rendered');
  return (
    <div className='header'>
      <div className='logo-container'>
        <img className='logo' src={LOGO_URL} />
      </div>
      <div className='nav-items'>
        <ul>
          <li>Home</li>
          <li>About us</li>
          <li>Contact</li>
          <li>Cart</li>
          <button
            className='login-btn'
            onClick={() => {
              setBtnName('Logout');
            }}
          >
            {btnName}
          </button>
        </ul>
      </div>
    </div>
  );
};
export default Header

可选优化方案 #

如果要避免这种无意义的重渲染，可以在调用更新函数前先判断当前状态：

onClick={() => {
  if (btnName !== 'Logout') {
    setBtnName('Logout');
  }
}}

这样只有当状态确实需要改变时才调用setState，避免多余的渲染流程。

内容的提问来源于stack exchange，提问作者Pavan Kumar Gvs