使用经过验证的性能模式构建更快的 React 和 Next.js 应用。此技能提供 Vercel 工程团队的可操作指南，帮助消除瀑布式请求、减少打包体积并优化渲染。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“vercel-react-best-practices”。 Component with sequential useEffect fetches
预期结果:
问题：三个 useEffect 钩子按顺序获取数据，导致渲染瀑布。解决方案：将获取合并到单个 useEffect 中使用 Promise.all()，或将父组件转换为服务器组件。
正在使用“vercel-react-best-practices”。 Import statement pulling entire lodash library
预期结果:
问题：import _ from lodash 会增加 72KB 打包体积。解决方案：使用支持 tree-shaking 的导入，如 import debounce from lodash/debounce，或切换到 lodash-es 以获得更好的打包器优化。
正在使用“vercel-react-best-practices”。 Component recalculating expensive value on every render
预期结果:
问题：昂贵的计算在每次渲染时都运行。解决方案：使用适当的依赖项包装在 useMemo 中，或提取到单独的 memoized 组件，仅在输入更改时重渲染。
安全审计
安全Static analysis detected 911 pattern matches across 51 files (4901 lines), but all findings are FALSE POSITIVES. The skill is a documentation-only repository containing React/Next.js performance optimization guidelines in markdown format. Detected patterns (shell commands, dynamic imports, fetch calls, storage access) exist solely as code examples within documentation, not as executable code. No actual security risks identified.
质量评分
你能构建什么
构建新 React 功能
构建新功能的 React 开发人员从零开始编写具有最佳性能的组件，遵循 Vercel 认可的数据获取、渲染和打包优化模式
审查 Pull Request
审查 Pull Request 的团队在合并前检查代码中的性能反模式，在开发早期发现瀑布式请求、不必要的重渲染和打包膨胀
迁移到 Next.js App Router
迁移到 Next.js App Router 的工程师将客户端模式转换为服务器组件架构，学习正确使用服务器缓存、序列化边界和并行数据获取
试试这些提示
检查此 React 组件的性能问题。识别任何渲染瀑布、不必要的重渲染或打包优化机会。基于 Vercel 最佳实践提出具体改进建议。
此组件按顺序获取数据。重构它以使用 Promise.all() 并行获取，或重组为服务器组件。解释哪种方法更适合此用例。
分析此服务器组件的数据获取。推荐使用 React.cache() 进行单次请求去重的缓存策略，或使用 LRU 缓存进行跨请求���化。包括缓存失效考虑。
设计一个包含 10+ 个显示实时和历史数据的小部件的仪表板。指定：1) 服务器与客户端组件边界，2) 数据获取和缓存策略，3) 使用 Suspense 的加载状态，4) 第三方图表库的打包优化。
最佳实践
- 尽早启动 promise，延迟 await - 在需要之前启动数据获取，延迟 await 直到需要该值
- 默认使用服务器组件 - 仅在需要浏览器 API 或交互性时添加 'use client'
- 客户端数据获取首选 SWR 或 React Query - 内置缓存、去重和重新验证
避免
- 在单独的 useEffect 钩子中按顺序获取数据 - 导致渲染瀑布
- 导入整个工具库 - 打包膨胀，应使用特定导入
- 使用 && 进行渲染 '0' 的组件的条件渲染 - 使用三元运算符