SuperAPI AI 工具集

prop-drilling-fix

编程与开发

查看项目

更新于 10-15 22:19

技能介绍

用途:诊断 React 组件树中的 prop drilling 链,即某个值经过不使用它的中间组件层层转发到深层消费者,并给出最合适的重构方案。

主要能力:扫描代码识别透传迹象,例如属性出现在函数签名却从未被读取、同名属性贯穿 3 层以上、组件接收大量属性后立即全部传给单一子组件;为每个属性追踪来源、实际消费点与中间纯转发组件数量,构建链式映射。

可选修复模式:组件组合(children 或 render props),适合布局壳、包装器、页面骨架等不需要数据的中间组件;React Context,适合主题、认证用户、语言、权限等被多处消费的子树级数据,并建议导出自定义 hook 以校验使用位置;提升状态,适合两个兄弟组件共享状态,将 useState 移到最近公共祖先。资料还给出决策矩阵,例如频繁更新的状态避免用 Context,使用 Redux、Zustand、Jotai 时对应 store slice。

使用方式:按步骤先检测透传链,再为每条链选择模式并说明理由,然后执行重构,最后按固定输出格式给出链映射、推荐方案、重构前后代码、被移除的属性清单以及性能注意事项。

限制与注意:不要过度使用 Context,仅父子一层传递属正常;按关注点拆分 Context;Provider 中内联对象或函数需用 useMemo、useCallback 避免消费者重复渲染;高频状态如输入值、悬停、滚动位置应保持局部或使用 ref。资料未提供安装命令、收费与平台信息。