用途:审计 React 组件的渲染性能,适用于用户提出优化 React 性能、修复重复渲染或提升 UI 速度的场景。属于技术栈相关的 Tier 3 参考技能。
主要能力与工作流:先读取项目配置,检查 .chalk/docs/engineering/ 中的架构文档、React 版本、状态管理库(Redux、Zustand、Jotai、Context)与渲染框架(CRA、Vite、Next.js、Remix),框架决定可用优化手段。再确定范围:解析 $ARGUMENTS 指定的组件或区域;未指定时扫描 src/ 中最大的组件文件与组件树入口。
审计内容:一是不必要重渲染,包括 props 未变仍重渲染(缺少 React.memo)、JSX props 中内联对象/数组/函数、频繁变化值的 Context Provider 引发大范围重渲染、状态位置过高导致子组件重渲染。二是 memoization 使用,决策树为:React.memo 用于频繁接收相同 props 且渲染昂贵的组件,不用于几乎总是接收新 props 的组件;useMemo 用于昂贵计算(大列表排序/过滤、复杂转换),不用于简单操作;useCallback 用于传给已 memo 化子组件的回调,不包裹每个函数。三是组件树结构,包括超过 100 项的大列表未虚拟化(react-window 或 @tanstack/virtual)、深层嵌套无 Suspense 边界、导入大库未用 React.lazy 代码分割、异步或第三方组件缺少错误边界。四是打包影响,包括为小功能导入大依赖、缺少 tree-shaking(从 barrel 文件默认导入)、图片与资源未优化或懒加载。
输出与优先级:按影响排序——关键渲染路径、减小包体积、提升感知性能、很少重要的微优化;报告含具体文件引用、问题、建议修复与预期影响,格式为对话中的审计报告,含按影响排序的发现摘要、带代码引用的详细发现与建议修复、供后续参考的决策树摘要。
反模式:过早 memoization;用 useMemo 掩盖状态管理问题而非调整状态位置;忽略 Profiler,建议先用 React DevTools Profiler 测量优化前后实际渲染时间;虚拟化过短列表(50–100 项以下通常无收益);对所有路由和组件做代码分割,应在路由、重型功能、少用弹窗等有意义边界分割。
限制:资料未提供具体安装命令、收费方式或平台支持信息。