调试与停止 React 中的无限渲染循环

Source: Dev.to

理解无限渲染循环

1. 组件渲染
2. 某些响应式逻辑运行（effect、watcher、computed、subscription）
3. 该逻辑更新状态
4. 状态更新导致重新渲染
5. 永久循环

关键洞察

渲染不会意外地循环——它们循环是因为状态在 每次 渲染时都会变化。

重现循环

1. 注释掉除一个状态值和一个响应式钩子（effect / watcher）之外的所有代码。
2. 在渲染函数和状态更新处都加入日志。

// example.jsx
import { useState, useEffect } from 'react';

function Component() {
  console.log('render');

  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('effect');
    setCount(count + 1);
  }, [count]);
}

如果你看到 render → effect → render → effect → …，则说明循环已被确认。

引用不稳定性

大多数无限循环来源于 引用不稳定性，而不是逻辑错误。

{} !== {}
[] !== []
() => {} !== () => {}

即使值看起来相等，它们的身份在每次渲染时都会改变。

function Component({ userId }) {
  const filters = { active: true, userId };

  useEffect(() => {
    fetchData(filters);
  }, [filters]); // ❌ 每次渲染都会产生新对象 → 无限 effect
}

解决办法： 对对象进行 memo 化，使其引用保持稳定。

import { useMemo } from 'react';

function Component({ userId }) {
  const filters = useMemo(() => ({
    active: true,
    userId,
  }), [userId]);

  useEffect(() => {
    fetchData(filters);
  }, [filters]); // 仅在 userId 改变时运行
}

经验法则： 放在依赖数组中的任何变量都必须是引用稳定的。

常见反模式

useEffect(() => {
  if (status === 'loaded') return;
  setStatus('loaded');
}, [status]); // updates its own dependency once, then stabilizes

该 effect 只会更新一次自身的依赖，然后收敛到一个稳定状态，而不是永远循环。

防止循环的 Lint 检查

在项目中启用 React Hooks 的 lint 规则（例如通过 ESLint）：

• react-hooks/rules-of-hooks
• react-hooks/exhaustive-deps

这些规则会强制使用正确的依赖列表，提前暴露不稳定的引用，并防止被伪装成“修复”的陈旧闭包。

注意： 缺失依赖的警告并不总是正确的建议；应将其视为需要审查的设计缺陷。

why‑did‑you‑render

why-did-you-render 在开发环境中对 React 进行 monkey‑patch，记录导致重新渲染的确切原因：

• 哪些 props 发生了变化
• 变化是因为引用不同还是值不同
• 哪些 hook 触发了更新

示例输出：

MyComponent re-rendered because of props changes:
  props.filters changed
    prev: { active: true, userId: 1 }
    next: { active: true, userId: 1 }
  reason: props.filters !== prev.props.filters

这立即告诉你：

• 值相等，但引用不同 → 缺少 memoization。

将日志提供给 LLM

1. 将 why-did-you-render 的控制台日志保存为 .log 文件。

2. 将日志和相关代码一起提供给 LLM（例如 Copilot、ChatGPT），并使用类似以下的提示：

   “我已附上 why-did-you-render 的控制台日志以及出现无限循环的代码。能否帮我找出导致这种行为的原因并给出稳定方案？”

因为日志已经编码了身份与相等性，LLM 可以：

• 识别不稳定的对象/函数
• 建议合适的 useMemo / useCallback 放置位置
• 检测不必要的属性钻取
• 推荐架构性修复（提升状态、memo 边界）

工作流程

1. 重现渲染问题。
2. 捕获 why-did-you-render 日志。
3. 将日志 + 代码粘贴到 LLM 中。
4. 应用建议的修复。
5. 验证渲染的稳定性。

最终思考

• 数据流不稳定
• 身份被误解
• 副作用位置错误

尊重引用的稳定性和依赖的正确性，无限循环将永久消失。