React18如何根据环境控制Strict Mode？解决useEffect重复执行问题

核心问题分析 #

你遇到的useEffect重复执行问题，大概率是因为React.StrictMode的enabled属性存在版本兼容性限制：这个属性是React 18.2.0才新增的特性，如果你的项目React版本低于这个版本，enabled参数会被直接忽略，Strict Mode会始终处于启用状态，不管你设置的值是true还是false。

验证与解决步骤 #

1. 检查React版本

先确认你的React版本是否达标，在项目根目录执行命令：

npm list react react-dom
# 或 yarn list react react-dom

如果版本低于18.2.0，先升级到最新稳定版：

npm install react@latest react-dom@latest
# 或 yarn add react@latest react-dom@latest

2. 改用条件渲染（更可靠的方案）

即使版本达标，也推荐用条件渲染StrictMode组件的方式替代enabled属性，这种写法兼容性更好，逻辑更直观：

const isLocalhost = window.location.hostname === "localhost";
const shouldUseStrictMode = process.env.NODE_ENV === "development" && isLocalhost;

console.log("Current hostname:", window.location.hostname);
console.log("NODE_ENV:", process.env.NODE_ENV);
console.log("shouldUseStrictMode:", shouldUseStrictMode);

const root = ReactDOM.createRoot(document.getElementById("root"));

// 先定义公共的应用内容
const appContent = (
  <IconContext.Provider value={{ className: "text-slate-500", size: "1.25rem" }}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </IconContext.Provider>
);

// 条件判断是否用StrictMode包裹
root.render(
  shouldUseStrictMode ? <React.StrictMode>{appContent}</React.StrictMode> : appContent
);

3. 验证结果

修改后，打开React DevTools查看组件树：

• 在localhost环境下，组件树顶部会出现StrictMode节点，useEffect会重复执行（符合预期）
• 在https://dev...站点，组件树中不会有StrictMode节点，useEffect只会执行一次

内容的提问来源于stack exchange，提问作者Michael Luo