非严格模式下：多次点击按钮React组件为何渲染三次？

我有一个使用useState Hook的简单React组件，初始状态为false，点击按钮时会将状态设置为true。我在组件中添加了console.log语句来记录组件的渲染时机。

代码如下：

import { useState } from 'react';

function App() {
  const [value, setValue] = useState(false);

  function changeState() {
    setValue(true);
  }

  return (
    <>
      {console.log('rendered!')}
      <button onClick={changeState}>Click</button>
    </>
  );
}

export default App;

当我多次点击按钮时，控制台会三次打印‘rendered!’，我原本预期只会打印两次——初始渲染一次，状态变更后重渲染一次，想请教为何会多一次渲染？

原因解析 #

这多出来的一次渲染是**React严格模式（Strict Mode）**在开发环境下的特性导致的：

• 第一次渲染：组件初始化，状态为false，控制台输出rendered!
• 第二次渲染：Strict Mode触发的重复渲染（仅开发环境存在，用于检测非纯函数等潜在问题，生产环境会自动跳过）
• 第三次渲染：点击按钮调用setValue(true)，状态变更触发的重渲染

如果移除应用根组件外层的React.StrictMode标签，再次测试就会符合预期：初始渲染1次，点击后重渲染1次，总共2次。Strict Mode的重复渲染不会影响实际业务逻辑，只是开发阶段的校验机制。

内容的提问来源于stack exchange，提问作者Rohit Sharma