React首次渲染控制台两次打印‘hi’问题求助

问题原因 #

这是**React 18开发环境下Strict Mode（严格模式）**的默认行为。Strict Mode为了帮开发者检测组件中的意外副作用，会在开发阶段故意重复执行以下操作：

• 函数组件的顶层代码
• 不带依赖项的useEffect回调
• 组件的挂载逻辑（如useState初始化函数）

如果你的console.log("hi")写在组件顶层，或是无依赖的useEffect中，就会触发两次输出。而生产环境下Strict Mode不会启用，只会打印一次。

解决方案 #

方案1：关闭Strict Mode #

若仅需验证单次渲染效果，找到项目入口文件（如你的index.js），移除包裹组件的<React.StrictMode>标签即可：

// 修改前
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 修改后
ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
);

方案2：保留Strict Mode（推荐） #

Strict Mode能提前发现很多潜在的副作用问题，属于开发环境的正常检测机制。生产构建时，React会自动禁用这一行为，不会出现两次打印的情况。若代码无意外副作用，可直接忽略开发环境的两次输出。

内容的提问来源于stack exchange，提问作者Rajat Singh