React组件重复执行异常：Comments组件为何打印4次日志？

核心原因是React 18的严格模式（Strict Mode）在开发环境下的特殊行为，它会故意重复执行部分逻辑来帮你提前排查潜在问题，具体拆解如下：

1. 开发环境Strict Mode的重复渲染机制
   React 18在开发环境开启Strict Mode时，会对函数组件做两次渲染、对useEffect做两次执行（第一次执行后会模拟组件卸载，再执行第二次）。这不是bug，是React为了检测副作用是否存在泄漏（比如未清理的定时器、订阅）而设计的特性，生产环境不会有这个重复行为。

2. 对应你代码的执行流程

   • 第一次初始渲染：组件挂载，打印Comments []（第1次日志）
   • Strict Mode强制第二次初始渲染：再次打印Comments []（第2次日志）
   • 第一次useEffect执行：调用API获取数据，setComments更新state，组件重新渲染，打印Comments [接口返回数据]（第3次日志）
   • React模拟组件卸载（你的useEffect没有清理函数，所以无额外操作），然后再次触发useEffect执行：再次调用API，setComments再次更新state，组件又一次渲染，打印Comments [接口返回数据]（第4次日志）

3. 验证方式
   你可以找到项目入口文件（通常是index.js），去掉包裹<App />的<React.StrictMode>标签，再运行项目，开发环境下就会出现你预期的2次日志输出。

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