vercel-react-best-practices
优化 React 和 Next.js 性能
También disponible en: ZhanlinCui,sickn33,vercel-labs
此技能提供 45 条 React 和 Next.js 应用性能优化规则，通过自动化指导帮助开发者消除瀑布问题、减少包体积并提升渲染性能。
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "vercel-react-best-practices". Review this component for performance: function Counter() { const [count, setCount] = useState(0); return <div onClick={() => setCount(count + 1)}>{count}</div>; }
Resultado esperado:
发现的问题：1) onClick 中的内联函数在每次渲染时创建新函数 - 使用 useCallback。2) 无记忆化 - 如果父组件频繁重渲染，用 React.memo 包装组件。规则：rerender-functional-setstate、rerender-memo
Usando "vercel-react-best-practices". Optimize this data fetching: const user = await getUser(id); const posts = await getPosts(user.id); const comments = await getComments(user.id);
Resultado esperado:
检测到瀑布 - posts 和 comments 都依赖 user 但顺序获取。修复方法：使用 Promise.all([getPosts(user.id), getComments(user.id)])。规则：async-parallel
Auditoría de seguridad
SeguroAll 911 static findings are false positives. This is a documentation skill containing React/Next.js best practices with code examples. The flagged patterns (backticks, storage access, dynamic imports) are legitimate documentation content, not security risks.
Puntuación de calidad
Lo que puedes crear
生成优化的 React 组件
编写新的 React 组件时，该技能指导您使用 memo、正确的依赖项，并避免 JSX 中的内联函数等常见陷阱。
重构慢速 Next.js 页面
优化现有 Next.js 页面时，该技能帮助识别瀑布问题、并行化数据获取并实施正确的缓存策略。
性能代码审查
审查拉取请求时，该技能提供 45 条规则的检查清单，确保代码在合并前符合性能标准。
Prueba estos prompts
根据 vercel-react-best-practices 技能规则审查此 React 组件的性能问题并提出改进建议。
优化此 Next.js 页面以加快加载时间。识别任何异步瀑布问题并建议并行数据获取模式。
分析此代码库的包体积问题。识别应动态导入的大型依赖项并建议代码分割策略。
使用 vercel-react-best-practices 的所有 45 条规则对此 Next.js 应用进行完整性能审计。按影响类别优先级排序。
Mejores prácticas
- 始终使用 Promise.all 处理独立的异步操作以消除瀑布
- 仅在需要时使用 React.memo 和 useCallback - 过早优化会增加复杂性
- 对重复的函数调用实施 React.cache() 服务端缓存
Evitar
- 避免 JSX props 中的内联函数 - 它们在每次渲染时创建新引用
- 不要在组件内部获取可在构建时或服务端完成的数据
- 避免在 useEffect 依赖项中订阅昂贵对象
Preguntas frecuentes
此技能与通用 React 教程有何不同？
我需要实施所有 45 条规则吗？
此技能能自动修复性能问题吗？
这适用于 Create React App 还是仅适用于 Next.js？
如何知道首先应用哪条规则？
我可以将其用于代码审查自动化吗？
Detalles del desarrollador
Estructura de archivos