该技能是 React 性能与质量的路由与优先级指南,包含 9 个类别共 27 条规则,规则文件提供详细说明、示例、评审问题特征与影响指标。适用场景:编写新 React 组件、实现数据获取、评审性能问题、重构既有 React 代码、优化打包体积或加载时间。
规则按影响优先级排序:1 消除请求瀑布(CRITICAL);2 打包体积优化(CRITICAL);3 客户端数据获取(MEDIUM-HIGH);4 重渲染优化(MEDIUM);5 渲染性能(MEDIUM);6 JavaScript 性能(LOW-MEDIUM);7 组件结构(MEDIUM-HIGH,可维护性);8 测试(MEDIUM-HIGH,正确性);9 类型安全(HIGH)。
关键模式:用 Promise.all() 处理独立异步操作(async-parallel);避免 barrel 文件导入,直接从源文件导入(bundle-barrel-imports);延迟非关键第三方库(bundle-defer-third-party)。中等影响模式包括用 Tanstack Query 做请求去重(client-request-dedupe);惰性状态初始化(rerender-lazy-state-init);非紧急更新用 startTransition(rerender-transitions);不要用 useEffect 重置状态、不要在渲染或 effect 中 setState、不要加 useMemo/useCallback;每个文件一个领域组件/钩子并保持 API 精简;BDD 测试只 mock 网络、避免 className 断言;不使用 as 类型断言(仅允许 as const),用 undefined 与可选 ? 表示缺失而非 null。
使用方式:仅加载相关规则文件,用目录选取规则而不必加载全部示例。可按以下命令检索规则目录:grep -l "Promise.all" references/rules/、grep -l "barrel" references/rules/、grep -l "Tanstack" references/rules/。规则目录分类前缀:async-、bundle-、client-、rerender-、rendering-、js-、types-、structure-、testing-*。
限制:资料未提供安装命令、收费标准、平台支持与效果数据,暂未提供。