为何React.Component构造函数实例化一次运行两次且首次无console输出

核心触发条件 #

该现象仅出现在 React 18及以上版本的开发环境，且项目根组件被包裹在 <React.StrictMode> 严格模式标签内，属于React框架的特意设计，和原生JavaScript类的实例化逻辑无关。

具体运行机制 #

• React严格模式的设计目的是提前暴露不符合幂等性要求的代码问题，因此在开发环境下会重复调用类组件的构造函数、render等生命周期方法。
• 第一次调用构造函数时产生的console.log输出会被React静默屏蔽，因此你看不到计数器从0自增到1的日志，只能看到第二次调用的输出，表现为初始instanceCount已经是1，最终自增到2。
• 该重复执行逻辑仅在开发环境生效，生产环境打包上线后构造函数只会执行一次，计数结果和普通JavaScript类表现一致，最终值为1。

验证方法 #

找到项目入口文件（通常为index.js/main.jsx），删除根组件外层的<React.StrictMode>标签，重启开发服务后即可看到构造函数仅执行一次，计数符合预期。

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