为何React项目启动时App.js组件会渲染两次？

这是React StrictMode的特性导致的，具体说明如下：

• StrictMode是React专为开发环境设计的检测工具，它会刻意重复执行组件渲染、useEffect/useLayoutEffect等操作，目的是帮你提前排查代码中不符合React规范的副作用问题——比如未清理的订阅、重复发起的请求、非幂等的函数调用等。
• 你的index.js代码里，App组件被<React.StrictMode>标签包裹，所以在开发模式下，React会触发两次组件渲染，直接导致console.count()输出两次计数。
• 注意：这种重复渲染的行为仅在开发环境生效，生产环境下StrictMode不会触发重复执行，App组件只会渲染一次。

验证方法 #

如果想确认这个结论，可以暂时移除index.js中的<React.StrictMode>标签：

root.render(
  // 移除StrictMode包裹
  <App />
);

重新运行项目后，console.count()只会输出一次。

建议 #

虽然两次渲染看起来有点多余，但StrictMode的存在是为了帮你写出更健壮的React代码，因此不建议在开发阶段移除它。只要你的组件是纯函数（没有意外的副作用），这种重复渲染不会影响功能，生产环境也不会出现该问题。

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