react-best-practices by onekeyhq/app-monorepo
npx skills add https://github.com/onekeyhq/app-monorepo --skill react-best-practices归属声明:此技能派生自 vercel-labs/agent-skills。所有文档和参考资料均已包含在此仓库本地,无需网络访问。
适用于 React 和 Next.js 应用程序的全面性能优化指南,包含 8 个类别下的 40 多条规则。规则按影响优先级排序,以指导自动化重构和代码生成。
在以下情况下参考这些指南:
规则按影响优先级排序:
| 优先级 | 类别 | 影响 |
|---|---|---|
| 1 | 消除瀑布流 | 关键 |
| 2 | 包大小优化 | 关键 |
| 3 | 服务器端性能 | 高 |
| 4 | 客户端数据获取 | 中高 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 5 | 重渲染优化 | 中 |
| 6 | 渲染性能 | 中 |
| 7 | JavaScript 性能 | 低中 |
| 8 | 高级模式 | 低 |
消除瀑布流:
await 直到需要时(移入分支)Promise.all()awaitbetter-all减少包大小:
next/dynamicReact.cache() 进行每次请求的去重startTransitioncontent-visibility: auto? : 而非 &&)toSorted() 而非 sort()包含代码示例的完整文档位于:
references/react-performance-guidelines.md - 包含所有模式的完整指南references/rules/ - 按类别组织的独立规则文件要查找特定模式,请使用 grep 搜索规则目录:
grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/
references/rules/ 中的规则类别async-* - 瀑布流消除模式bundle-* - 包大小优化server-* - 服务器端性能client-* - 客户端数据获取rerender-* - 重渲染优化rendering-* - DOM 渲染性能js-* - JavaScript 微优化advanced-* - 高级模式每周安装次数
109
仓库
GitHub 星标数
2.3K
首次出现
2026 年 1 月 22 日
安全审计
安装于
gemini-cli101
opencode100
github-copilot99
codex99
cursor95
claude-code94
Attribution : This skill is forked from vercel-labs/agent-skills. All documentation and references are included locally in this repository - no network access required.
Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are prioritized by impact to guide automated refactoring and code generation.
Reference these guidelines when:
Rules are prioritized by impact:
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Server-Side Performance | HIGH |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
| 5 | Re-render Optimization | MEDIUM |
| 6 | Rendering Performance | MEDIUM |
| 7 | JavaScript Performance | LOW-MEDIUM |
| 8 | Advanced Patterns | LOW |
Eliminate Waterfalls:
Promise.all() for independent async operationsbetter-all for partial dependenciesReduce Bundle Size:
next/dynamic for heavy componentsReact.cache() for per-request deduplicationstartTransition for non-urgent updatescontent-visibility: auto for long lists? : not &&)toSorted() instead of sort() for immutabilityFull documentation with code examples is available in:
references/react-performance-guidelines.md - Complete guide with all patternsreferences/rules/ - Individual rule files organized by categoryTo look up a specific pattern, grep the rules directory:
grep -l "suspense" references/rules/
grep -l "barrel" references/rules/
grep -l "swr" references/rules/
references/rules/async-* - Waterfall elimination patternsbundle-* - Bundle size optimizationserver-* - Server-side performanceclient-* - Client-side data fetchingrerender-* - Re-render optimizationrendering-* - DOM rendering performancejs-* - JavaScript micro-optimizationsadvanced-* - Advanced patternsWeekly Installs
109
Repository
GitHub Stars
2.3K
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli101
opencode100
github-copilot99
codex99
cursor95
claude-code94
Tailwind CSS v4 + shadcn/ui 生产级技术栈配置指南与最佳实践
2,600 周安装