SuperAPI AI 工具集

context-rerenders-fix

前端与建站

查看项目

更新于 10-15 22:19

技能介绍

用途:诊断并修复 React Context 导致的非必要重渲染,适用于用户反馈 React 性能慢、组件频繁重渲染的场景。

主要能力:提供四类修复方案。Fix A 拆分 Context,把用户、主题、购物车等无关关注点拆成独立 Provider,使组件只订阅所需数据;Fix B 用 useMemo 稳定 Context value 引用,避免父组件每次渲染都创建新对象;Fix C 提取到外部 store(Zustand/Jotai),利用选择器订阅实现细粒度更新;Fix D 用 React.memo 或 useMemo 优化昂贵的消费者组件。

使用方式:先诊断——确认涉及哪些 Context、value 变化频率、消费者数量与分布、value 对象是否每次渲染重建;再按决策树选择修复方案;最后输出诊断摘要、修复计划、前后代码对比和验证步骤。验证可安装 React DevTools,在 Profiler 中开启“Highlight updates when components render”,触发状态变化后确认只有预期组件高亮;也可用 Profiler API 包裹组件记录渲染。

适用场景:单一 Context 混合多个无关字段、value 内联对象每次渲染重建、Context 在频繁更新的父组件内、消费者只用到大量字段中的少数字段、Context 跨多个子树广泛使用且需求各异。

限制与注意:不要预防性地 memo 一切,useMemo 有开销,应只在实测有性能问题时使用;Context value 含函数时需同时用 useCallback,否则 useMemo 无效;Context 不是缓存,API 数据应使用 React Query/SWR;过度拆分 Context 会造成 Provider 地狱,应按领域关注点而非单个字段拆分;React.memo 只检查 props 变化,若组件直接调用 useContext,仍会因 Context 变化而重渲染。参考文件 references/patterns.md 与 references/zustand-patterns.md 提供更详细的组合模式与迁移配方。