react-best-practices

# React 最佳实践 - 性能优化 针对 React 和 Next.js 应用程序的综合性能优化指南，包含按影响级别组织的 40 多条规则。旨在帮助开发者消除性能瓶颈并遵循最佳实践。 ## 何时使用此技能 **在以下情况使用 React 最佳实践：** - 优化 React 或 Next.js 应用程序性能 - 审查代码以进行性能改进 - 重构现有组件以获得更好的性能 - 在考虑性能的前提下实现新功能 - 调试缓慢的渲染或加载问题 - 减小包体积 - 消除请求瀑布流 **涵盖的关键领域：** - **消除瀑布流** (关键)：防止顺序异步操作 - **包体积优化** (关键)：减少初始 JavaScript 有效负载 - **服务端性能** (高)：优化 RSC 和数据获取 - **客户端数据获取** (中高)：实现高效缓存 - **重渲染优化** (中)：最小化不必要的重渲染 - **渲染性能** (中)：优化浏览器渲染 - **JavaScript 性能** (低中)：热路径的微优化 - **高级模式** (低)：针对边缘情况的专业技术 ## 快速参考 ### 关键优先级 1. **延迟 await 直到需要时** - 将 await 移动到使用它们的分支中 2. **使用 Promise.all()** - 并行化独立的异步操作 3. **避免桶文件导入 (Barrel imports)** - 直接从源文件导入 4. **动态导入** - 懒加载大型组件 5. **策略性 Suspense** - 在显示布局的同时流式传输内容 ### 常见模式 **并行数据获取：** typescript const [user, posts, comments] = await Promise.all([ fetchUser(), fetchPosts(), fetchComments() ]) **直接导入：** tsx // ❌ 加载整个库 import { Check } from 'lucide-react' // ✅ 仅加载你需要的内容 import Check from 'lucide-react/dist/esm/icons/check' **动态组件：** tsx import dynamic from 'next/dynamic' const MonacoEditor = dynamic( () => import('./monaco-editor'), { ssr: false } ) ## 使用指南 完整的性能指南可在参考文件夹中找到： - **react-performance-guidelines.md**：包含所有 40 多条规则、代码示例和影响分析的完整指南 每条规则包括： - 不正确/正确代码对比 - 具体影响指标 - 何时应用该优化 - 真实世界示例 ## 分类概览 ###