React组件异常：状态日志两次输出后不再触发求助

1. 为什么"the state is true"会输出两次？ #

这是React**开发环境下严格模式（Strict Mode）**的默认行为。为了帮开发者提前发现组件中的副作用问题（比如非幂等操作、不合理的DOM直接修改），React会在开发模式下重复执行组件函数、状态更新相关逻辑。你的console.log写在组件函数体内，当状态从false变为true触发重渲染时，组件函数会被执行两次，所以这条日志会输出两次。

这个现象仅在开发环境出现，生产环境下严格模式会被禁用，组件函数只会执行一次。

2. 为什么第三次及之后点击不再输出这条日志？ #

React处理状态更新时，会对比新状态和旧状态的值：

• 第一次点击：isShown从false变为true，状态发生变化，触发组件重渲染，因此会执行console.log。
• 第二次点击：调用setShown(true)时，isShown已经是true，新状态和旧状态完全相等（true === true），React判定不需要重渲染，组件函数不会再次执行，自然不会进入if (isShown)分支输出日志。
• 第三次及之后点击：逻辑和第二次一致，状态无变化，不触发重渲染，日志不再输出。

而"button was clicked"每次点击都能输出，是因为它在按钮的点击事件回调中，只要点击按钮就会触发该回调，和组件是否重渲染无关。

验证与修复建议 #

如果想在开发环境中看到组件函数只执行一次，可以移除index.js中包裹App的<React.StrictMode>标签，但不建议这么做——严格模式能帮你提前发现很多潜在问题。

如果希望每次点击按钮都能触发console.log("the state is true")，可以修改点击事件强制状态变化，或者把日志逻辑放到useEffect中监听isShown的变化：

export default function App() {
  const [isShown, setShown] = React.useState(false);

  React.useEffect(() => {
    if (isShown) {
      console.log("the state is true");
    }
  }, [isShown]);

  return (
    <button
      onClick={() => {
        console.log("button was clicked");
        // 强制切换状态，保证每次点击都触发更新
        setShown(prev => !prev);
      }}
    >
      Click Me!
    </button>
  );
}

内容的提问来源于stack exchange，提问作者713sean