SuperAPI AI 工具集

state-colocation

前端与建站

查看项目

更新于 10-15 22:19

技能介绍

用途:诊断并重构 React 中状态位置不当的问题,让状态与真正使用它的组件保持就近,减少无意义的重渲染和过度全局化。

主要能力:区分三类问题并给出对应修复——状态过度上提(下压)、两个兄弟组件需要同一值(上提到最近共同祖先)、属性层层透传(按成因选择 context 或组合)。还给出判断规则:若最近共同祖先是会渲染大量无关子树、频繁重渲染的布局组件,应改用轻量包装组件或 ref+回调;判断属性透传属于“层级正确但树太深”(用 context/插槽模式)还是“层级错误”(移动状态而非加 context);明确 context 是依赖注入而非全局状态,provider 也需共置;列出真正需要全局状态的三种情形(持久化边界、跨切面身份、高频写加选择性读);强调派生状态不是状态,应先用 useMemo 计算而非上提。

使用方式:按阶段执行——先映射每处状态的位置、读取者与修改者;标记“拥有者从不渲染该值”的状态与“经过但不使用该属性”的组件;逐项归类为下压、上提、组合或 context;检查派生状态后再建议移动;上提时评估新拥有者的重渲染成本。资料给出正反代码示例说明父组件不渲染的值应下沉到唯一消费者、派生值用 useMemo 替代 useState+useEffect、theme context 作用域收窄到 sidebar 等。

适用场景:React 应用的状态管理重构、性能优化与架构评审。

限制:资料未提供安装方式、平台支持范围、版本要求或收费信息。