跳到主要内容

React / Vue 状态与生命周期问题

♻️ 聚焦状态来源混乱、生命周期时机错误、依赖缺失及组件复用导致的异常。

常见症状​

  • UI 与数据不同步，需要再次操作才刷新
  • 切换路由或不同数据项后残留旧状态
  • Effect / Watcher 重复执行或形成循环
  • 父子组件更新顺序与预期不一致
  • 开发环境正常，生产环境或 Strict Mode 下异常

React 排查重点​

  • useEffect 依赖是否完整且稳定
  • 是否直接修改 state，导致引用未变化
  • key 是否能正确标识组件身份
  • 异步回调是否捕获旧 state
  • 清理函数是否释放订阅、监听器和请求

Vue 排查重点​

  • 解构是否破坏响应式，必要时使用 toRefs
  • watch 与 watchEffect 的依赖和刷新时机
  • computed 中是否存在副作用
  • v-for 的 key 是否稳定且唯一
  • keep-alive 场景是否需要 activated / deactivated

最小复现步骤​

  1. 删除业务无关组件与样式
  2. 将数据源替换为固定本地数据
  3. 保留唯一一次状态写入
  4. 记录 render、mount、update、cleanup 顺序
  5. 对比首次进入、二次进入和快速切换

修复原则​

  • 单一事实来源，避免重复保存可推导状态
  • 副作用放在明确生命周期中并提供清理
  • 用稳定标识控制组件复用与重建
  • 将异步状态建模为 idle / loading / success / error

回归验证​

  • 首次挂载与重复进入均正确
  • 快速切换数据不会串状态
  • Strict Mode 下无重复副作用
  • 组件卸载后监听与请求已清理
  • 空数据、错误数据和边界状态已覆盖