React类组件中constructor与数组控制台打印两次的原因

核心原因：React严格模式（Strict Mode）的开发环境行为 #

在开发环境下，React的Strict Mode会刻意重复调用部分核心方法，目的是帮你提前排查代码中的潜在问题（比如不符合规范的副作用、非幂等操作），这些方法包括：

• 类组件的constructor
• render方法
• 函数组件的顶层逻辑代码
• 状态更新函数等

你的代码里，constructor内的console.log会因Strict Mode被执行两次；同时render方法里的this.state.articles.map(...)中的console.log(Element)，也会跟着render的重复调用执行两次，这都是Strict Mode的正常检测机制。

关键说明 #

• 这种重复执行仅存在于开发环境，生产环境下不会触发，完全不影响线上用户体验。
• Strict Mode的设计初衷是提前暴露代码隐患，比如某些逻辑在重复执行时会引发内存泄漏、状态异常等问题。

如何取消单次打印（可选） #

如果只是想在开发阶段看到单次日志输出，只需修改项目根组件的渲染代码，去掉<React.StrictMode>的包裹即可。示例：
原根渲染代码：

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

修改后：

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

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