React中普通变量修改不生效？为何与state表现存在差异

你的代码 #

export default function navbar(props) {
  const text = "DARK MODE ";
  function handelMode() {
  
    if (props.mode==='light') {
      props.setmode('dark');
      text ="DARK MODE ";
    } else {
      props.setmode('light');
      text ="LIGHT MODE ";
    }
    
  }

  return (
    <li className="nav-item">
      <button type="button" onClick={handelMode} className="btn btn-primary btn-sm mx-3 my-1">{text}</button>
    </li>
  )
}

问题原因 #

1. 普通变量无法触发组件重渲染：React组件只有在自身state变化、接收的props变化，或者上下文更新时才会重新渲染。你修改的text是普通常量，这种操作不会通知React重新渲染组件，按钮显示的始终是初始渲染时的text值。
2. 变量作用域与重新赋值无效：你在handelMode里给text重新赋值，本质是在函数内部创建了一个同名局部变量，和组件顶层的const text不是同一个引用。就算改用let声明text，当父组件因mode变化重新渲染时，子组件会重新执行整个navbar函数，text会被重新初始化为"DARK MODE "，之前的赋值会被完全覆盖。

替代方案（不用额外state） #

其实不需要用useState存储text，直接根据props.mode实时计算即可：

export default function navbar(props) {
  function handelMode() {
    props.setmode(props.mode === 'light' ? 'dark' : 'light');
  }

  // 直接根据当前mode计算按钮文字
  const text = props.mode === 'light' ? "DARK MODE " : "LIGHT MODE ";

  return (
    <li className="nav-item">
      <button type="button" onClick={handelMode} className="btn btn-primary btn-sm mx-3 my-1">{text}</button>
    </li>
  )
}

内容的提问来源于stack exchange，提问作者Akshit Tomar