SuperAPI AI 工具集

react-performance

编程与开发

查看项目

更新于 10-16 03:43

技能介绍

用途:以 Nadia Makarevich《Advanced React》的规则为视角,对 React 代码给出建议与审查,关注是否会多余重渲染、记忆化是否真的起作用、闭包是否过期、异步路径是否安全;不用于查找逻辑错误。

两种模式:Advisor 在写新代码前介入决策,倾向组合而非 memo、正确放置 state、组织请求结构;Reviewer 审查已有或改动的代码,按视角分组报告,引用 file:line、指明规则并给出具体修复,不适用视角可跳过,组件干净就直说。

使用前先探测目标:读取 package.json(react/react-dom 及 lockfile)确认 React 主版本,识别外部状态库(Redux Toolkit、Zustand、Jotai、MobX、TanStack Query、SWR、Apollo)与 UI 库(MUI、Chakra、Radix、Headless UI、Ant、shadcn/ui、Tailwind 或手写组件),再按版本标记相关规则,例如 React 19 起 ref 为普通 prop、不再需要 forwardRef,React 18 起自动批处理覆盖更广。

九类视角:一、多余重渲染,优先下移 state、用 children 或元素作 prop 承载重子树;二、无效记忆化,useMemo/useCallback 仅在作为依赖或传给 React.memo 组件时才有意义,注意非原始 prop 会使 memo 失效;三、Context 性能,内联 value 对象会波及所有消费者,可拆分 Provider 或改用已有外部 store 的选择器;四、refs、闭包与过期 state,注意缺失依赖导致闭包冻结,可用 ref 刷新最新函数;五、防抖节流需保持同一实例并经由 ref 读取最新状态;六、测量后再改 DOM 应使用 useLayoutEffect 避免闪烁;七、Portal 与层叠上下文;八、请求瀑布与竞态,可并行化并用 id 比较、清理标记或 AbortController 处理;九、错误边界覆盖渲染错误并桥接异步错误。

限制:资料未提供安装方式、收费、价格或平台信息;适用 React 17 及以上,书中规则基于 2023 年内容,与更新版本冲突时应以实际探测到的框架文档行为为准。