React组件多次渲染原因排查：是否关联useEffect或环境差异？

一、开发环境下的两次渲染：React严格模式导致 #

React在开发模式（如npm start启动的项目）中，会通过严格模式（<React.StrictMode>）刻意触发两次组件渲染，目的是检测潜在的副作用问题（比如未清理的订阅、重复的状态更新等）。这种情况下日志输出两次是正常现象，生产环境打包后（npm run build）会自动关闭这个行为，渲染次数会恢复为一次。

如果你想临时验证，可以找到项目入口文件（通常是index.js），去掉<React.StrictMode>的包裹，开发环境下的渲染次数就会变成一次，但不建议长期这么做——严格模式能帮你提前发现很多隐藏问题。

二、useEffect导致的重复渲染/执行 #

如果渲染次数远超过两次，那大概率和useEffect的使用有关，常见问题包括：

• 依赖项设置错误：
  • 依赖项中包含每次渲染都会重新创建的引用类型（比如对象、数组、函数），比如：

    // 错误示例：每次渲染都会新建{ key: 'value' }，导致useEffect重复执行
    useEffect(() => {
      // 执行逻辑
    }, [{ key: 'value' }])
    

  • 依赖项未写全，ESLint的react-hooks/exhaustive-deps规则会提示你补全，但如果忽略提示，可能导致useEffect在不该执行的时候触发，进而触发state更新导致组件重渲染。
• useEffect内部触发state更新：如果useEffect里的逻辑会修改组件state，且依赖项包含这个state，就会形成循环更新，导致组件反复渲染。

三、子组件（如Details.jsx）重复渲染的其他原因 #

如果是Details组件单独重复输出日志，还要考虑：

• 父组件（WeatherCard.jsx）重复渲染：父组件每次渲染都会重新生成传递给子组件的props（比如未用useMemo缓存的对象/数组），即使props值没变，React也会认为props更新，触发子组件重渲染。
• 未使用React.memo优化子组件：如果子组件的props没有变化，但父组件重渲染时，子组件也会跟着重渲染，可以用React.memo包裹Details组件，避免不必要的重渲染：

  const Details = React.memo(({ data }) => {
    // 组件逻辑
  })
  

排查步骤 #

1. 先确认渲染次数：如果是开发环境下的两次，直接忽略，生产环境会自动修复；如果是多次（超过两次），再往下排查。
2. 检查useEffect的依赖项：用ESLint规则校验，确保依赖项是稳定的（用useMemo/useCallback缓存引用类型依赖）。
3. 检查props传递：父组件传递给子组件的props是否每次渲染都变化，必要时用useMemo缓存。
4. 排查循环更新：检查useEffect或事件处理函数中是否有导致state反复更新的逻辑。

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