用途
本技能是一套 React 最佳实践指南，用于在编写、审查或重构 React 组件时提供性能优化与组合模式方面的参考。其目标是确保渲染与打包模式达到较优状态，包含 33 条规则，分布在 6 个类别中，重点在于减少重渲染、优化打包体积、改进组件组合，以及避免常见的 React 陷阱。
适用时机
在以下场景中可参考这些指南：
- 编写新的 React 组件
- 审查代码中的性能问题
- 重构现有的 React 代码
- 优化打包体积
- 处理 hooks 与状态
规则概览
打包体积优化（关键）
- bundle-barrel-imports：直接从源文件导入，避免 barrel 文件。例如从
lucide-react/dist/esm/icons/check直接导入，而不是从lucide-react整体导入，以避免加载整个库（200-800ms）。 - bundle-conditional：仅在功能被激活时加载模块，通过动态
import()实现。 - bundle-preload：在 hover/focus 时预加载，以提升感知速度。
重渲染优化（中）
- rerender-functional-setstate：使用函数式 setState 以获得稳定的回调，避免闭包陈旧风险。
- rerender-derived-state-no-effect：在渲染期间派生状态，而不是在 effect 中派生，避免额外的状态与渲染。
- rerender-lazy-state-init：对昂贵的初始值向 useState 传入函数，使其仅在初始渲染时运行。
- rerender-dependencies：在 effect 中使用原始类型依赖，避免因对象整体变化而频繁触发。
- rerender-derived-state：订阅派生的布尔值，而不是原始值，减少重渲染次数。
- rerender-memo：将昂贵的工作提取到 memo 化的组件中。
- rerender-memo-with-default-value：将默认的非原始类型 props 提升为常量，避免破坏 memo 化。
- rerender-simple-expression-in-memo：不要将简单的原始表达式包裹在 useMemo 中，因为 useMemo 的开销可能大于表达式本身。
- rerender-move-effect-to-event：将交互逻辑放在事件处理器中，而不是 effect 中。
- rerender-transitions：对非紧急更新使用 startTransition。
- rerender-use-ref-transient-values：对频繁变化的瞬态值使用 ref，避免重渲染并直接更新 DOM。
渲染性能（中）
- rendering-conditional-render：对包含数字的条件渲染使用三元表达式，而不是 &&，避免在计数为 0 时渲染出 "0"。
- rendering-hoist-jsx：将静态 JSX 提取到组件外部，复用同一元素，尤其适用于大型 SVG。
- rendering-content-visibility：对长列表使用 content-visibility。
- rendering-animate-svg-wrapper：动画作用于包裹 div 而非 SVG 元素，以获得 GPU 加速。
- rendering-svg-precision：使用 SVGO 降低 SVG 坐标精度，例如
npx svgo --precision=1 --multipass icon.svg。 - rendering-hydration-no-flicker：对仅客户端数据使用内联脚本，防止闪烁。
- rendering-hydration-suppress-warning：抑制预期内的 hydration 不匹配警告。
- rendering-client-only：使用 ClientOnly 与 fallback 渲染仅浏览器组件。
- rendering-use-hydrated：使用 useHydrated 处理 SSR/CSR 差异。
- rendering-usetransition-loading：优先使用 useTransition 而非手动 loading 状态。
- fault-tolerant-error-boundaries：在功能边界放置错误边界。
客户端模式（中）
- client-passive-event-listeners：对 scroll/touch 使用 passive 监听器。
- client-localstorage-schema：对 localStorage 数据进行版本化并最小化，处理隐私模式或配额超限情况。
Hooks（高）
- hooks-limit-useeffect：仅在绝对必要时使用 useEffect，优先使用派生状态或事件处理器。
- hooks-useeffect-named-functions：在 useEffect 中使用具名函数声明，便于调试与自文档化，同时为清理函数命名。
组合模式（高）
- composition-avoid-boolean-props：不要通过添加布尔 props 来自定义行为，应使用组合方式。
- composition-compound-components：将复杂组件构建为带共享上下文的复合组件。
- composition-state-provider：将状态提升到 provider 组件中，以便跨组件访问。
- composition-explicit-variants：创建显式的变体组件，而不是 props 组合。
- composition-children-over-render-props：优先使用 children 进行组合，仅在需要回传数据时使用 render props。
- composition-avoid-overabstraction：避免僵化的配置 props，优先使用可组合的 children API。
- composition-typescript-namespaces：使用 TypeScript 命名空间将组件与其类型合并，实现单次导入访问。注意：命名空间应只包含类型，绝不包含运行时代码。
使用方式
每条规则以独立文件形式提供，路径形如 @rules/<规则名>.md，可在编写或审查代码时按需查阅对应规则文件。
适用场景
适用于 React 项目的日常开发、代码审查、性能调优与重构工作，尤其适合关注渲染性能与打包体积的前端团队。
限制
资料未提供该技能的安装命令、收费方式、支持平台或具体效果数据，这些信息暂未提供。