React级联渲染（Cascading Renders）问题

级联渲染（Cascading Renders）

指一次状态更新触发渲染，渲染过程中又触发新的状态更新，导致连锁式的多轮渲染。

---

典型场景

effect 执行 → setState → 触发渲染 → 渲染完成后 effect 再次执行 → setState → 再次渲染 → ...

在你的代码中：

useEffect(() => {
  setLoaded(false); // 1. effect 里同步 setState
}, [target]);

执行流程：

target 变化
  → effect 执行
    → setLoaded(false)        ← 同步 setState
      → React 立即安排重渲染
        → 组件重渲染
          → effect 可能再次执行（如依赖未稳定）
            → 再次 setState
              → 再次渲染 ...

React 担心这种模式会形成无限循环或多余的渲染链，所以给出警告。

---

与正常渲染的对比

	正常更新	级联渲染
触发点	用户交互 / 异步回调	effect 体内同步 setState
渲染次数	1次	多次连锁
性能	正常	可能造成卡顿或无限循环

---

startTransition 如何解决

useEffect(() => {
  startTransition(() => setLoaded(false)); // 标记为低优先级
}, [target]);

startTransition 告诉 React：这个更新不紧急，等当前渲染批次完成后再处理。React 不会在 effect 执行阶段立即插入一轮同步渲染，而是将其推迟并合并，打断了级联链条。