React Best Practices 说明文档

# React 最佳实践 一个用于创建和维护针对智能体和 LLM 优化的 React 最佳实践的结构化仓库。 ## 结构 - `rules/` - 单个规则文件（每个规则一个文件） - `_sections.md` - 章节元数据（标题、影响、描述） - `_template.md` - 创建新规则的模板 - `area-description.md` - 单个规则文件 - `src/` - 构建脚本和工具 - `metadata.json` - 文档元数据（版本、组织、摘要） - __`AGENTS.md`__ - 编译后的输出（自动生成） - __`test-cases.json`__ - 用于 LLM 评估的测试用例（自动生成） ## 入门指南 1. 安装依赖： bash pnpm install 2. 从规则构建 AGENTS.md： bash pnpm build 3. 验证规则文件： bash pnpm validate 4. 提取测试用例： bash pnpm extract-tests ## 创建新规则 1. 将 `rules/_template.md` 复制到 `rules/area-description.md` 2. 选择适当的区域前缀： - `async-` 用于消除瀑布流（第 1 节） - `bundle-` 用于包体积优化（第 2 节） - `server-` 用于服务端性能（第 3 节） - `client-` 用于客户端数据获取（第 4 节） - `rerender-` 用于重渲染优化（第 5 节） - `rendering-` 用于渲染性能（第 6 节） - `js-` 用于 JavaScript 性能（第 7 节） - `advanced-` 用于高级模式（第 8 节） 3. 填写 frontmatter 和内容 4. 确保有清晰的示例和解释 5. 运行 `pnpm build` 以重新生成 AGENTS.md 和 test-cases.json ## 规则文件结构 每个规则文件应遵循此结构： markdown --- title: 规则标题 impact: MEDIUM impactDescription: 可选描述 tags: 标签1, 标签2, 标签3 --- ## 规则标题 规则的简要说明及其重要性。 **错误（错误做法的描述）：** typescript // 错误代码示例 **正确（正确做法的描述）：** typescript // 正确代码示例 示例后的可选解释性文本。 参考：[链接](https://example.com) ## 文件命名约定 - 以 `_` 开头的文件为特殊文件（从构建中排除） - 规则文件：`area-description.md` (例如 `async-parallel.md`) - 章节从文件名前缀自动推断 - 规则在每个章节内按标题字母顺序排序 - ID（例如 1.1, 1.2）在构建期间自动生成 ## 影响级别 - `CRITICAL` - 最高优先级，重大的性能提升 - `HIGH`