React生命周期方法与Hooks中控制台日志重复打印问题求助

• 核心原因：Strict Mode（严格模式）
  React的严格模式在开发环境里会重复调用组件的渲染函数、useState/useEffect这类hooks，还有类组件的constructor、render、componentDidMount这些生命周期方法——这么做是为了帮你揪出代码里可能存在的副作用问题，比如没清理的订阅、重复触发的状态更新之类的。生产环境下不会有这种重复执行的情况。

• 快速验证方案
  打开项目入口文件（一般是src/index.js或者src/main.jsx），找到包裹着<App />的<React.StrictMode>标签，把它注释掉，重启开发服务后再看控制台，日志就只会打印一次了。

• 关于是否移除Strict Mode
  不建议直接删掉它。严格模式是React给开发人员的bug预警工具，日志重复只是开发环境的提示而已。要是你的代码没副作用问题，哪怕日志打两次也不影响功能；要是真有副作用，正好借着这个提示去修复——比如在useEffect里正确清理订阅，别在渲染函数里执行副作用操作。

• 类组件和函数组件都有这情况
  不管你用类组件的生命周期方法，还是函数组件的Hooks，在严格模式下都会被调用两次，这属于开发环境的正常行为，不用慌。

内容的提问来源于stack exchange，提问作者kishore kumar kaparapu