为何React组件会渲染两次？示例代码与排查方法咨询

最小可复现代码 #

import { useState, useEffect } from "react";

export default function App() {
  const [isShown, setIsShown] = useState(true);
  return (
    <>
      <button onClick={() => setIsShown(!isShown)}>
        {isShown ? 'Hide Counter' : 'Show Counter'}
      </button>
      {isShown ? <Counter /> : null}
    </>
  );
}

function Counter(){
  const [count, setCount] = useState(0);
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log('render');
  });
  
  useEffect(() => {
      console.log('mounted');
    }, []);
  return (
    <div className="counter">
      <button onClick={() => setBool(!bool)}>Re-Render</button>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p> Count: {count}</p>
    </div>
  );
}

问题现象 #

刷新页面，或者点击「Hide Counter」后再点击「Show Counter」时，控制台会两次输出render和mounted，但预期应该只输出一次，该现象在Firefox和Chrome中均存在。

原因分析 #

这是**React严格模式（Strict Mode）**在开发环境下的刻意行为。

在开发模式中，Strict Mode会重复调用以下操作来检测潜在代码问题：

• 组件的渲染函数
• 无依赖项的useEffect回调
• 挂载阶段的useEffect（空依赖数组的useEffect）

它的核心目的是暴露非幂等的副作用代码——比如如果副作用在重复执行时会导致逻辑错误（如重复创建定时器、重复发起请求却不清理），Strict Mode能帮你提前发现这类问题。而生产环境下，Strict Mode会自动禁用，不会出现重复执行的情况。

调试排查步骤 #

1. 检查根组件的Strict Mode包裹
   打开项目入口文件（通常是index.js或main.jsx），查看是否有<React.StrictMode>标签包裹<App />。暂时去掉该标签后重新运行项目，若控制台不再重复输出，即可验证是Strict Mode导致的。

2. 用React DevTools确认渲染次数
   打开浏览器的React DevTools，选中Counter组件，查看它的渲染记录。Strict Mode下组件挂载时会显示两次渲染记录，可直接佐证原因。

3. 验证生产环境行为
   运行生产构建命令（如npm run build），再启动生产环境服务器（如serve -s build），此时控制台只会输出一次render和mounted，确认生产环境无此问题。

4. 检查副作用的幂等性
   借Strict Mode的检测机会，检查副作用代码是否符合幂等要求。比如mounted对应的useEffect若有创建资源的操作，要确保组件卸载时添加清理逻辑，避免重复执行导致资源泄漏。

内容的提问来源于stack exchange，提问作者vikram-s-narayan