# 反应最佳实践基于 Vercel Engineering 指南的 React 和 Next.js 应用程序性能优化指南。包含 8 个类别的 45 条规则，按影响优先顺序。 ## 何时申请在以下情况下请参考这些指南： * 编写新的 React 组件或 Next.js 页面 * 实现数据获取（客户端或服务器端） * 检查代码是否存在性能问题 * 重构现有的 React/Next.js 代码 * 优化包大小或加载时间 ## 按优先级规则类别优先|类别 |影响 ---|---|--- 1 |消除瀑布|关键 2 |捆绑包大小优化 |关键 3 |服务器端性能 |高 4 |客户端数据获取 |中高 5 |重新渲染优化 |中 6 |渲染性能 |中 7 | JavaScript 性能 |低-中 8 |高级模式 |低 ## 关键规则总结 ### 1\.消除瀑布（关键） **瀑布是第一大性能杀手。**每个顺序等待都会增加完整的网络延迟。 // 不好：顺序 - 3 次往返 const 用户 = 等待 fetchUser() const posts = 等待 fetchPosts() 常量评论 = 等待 fetchComments() // 好：并行 - 1 次往返 const [用户、帖子、评论] = wait Promise.all([ 获取用户(), 获取帖子(), 获取评论() ]） **使用 Suspense 进行直播：** // 好：布局立即显示，数据流在函数页面（）{ 返回（

<标题/> <悬念后备={<骨架/>}> <数据显示/> <页脚/>

） } ### 2\.捆绑包大小优化（关键） **避免桶文件导入**（200-800ms 导入成本）： // 不好：导入整个库从 'lucide-react' 导入 { 检查，X } // 好：直接导入从 'lucide-react/dist/esm/icons/check' 导入检查从 'lucide-react/dist/esm/icons/x' 导入 X **重型部件的动态导入：** 从“下一个/动态”导入动态 const HeavyEditor = 动态(() => import('./Editor'), { 加载：() => <骨架/>, ssr: 假 }) ### 3\.服务器端性能（高） **使用 React.cache() 进行每个请求的重复数据删除：** 从“反应”导入{缓存} const getUser = 缓存（异步（id：字符串）=> { 返回等待 db.user.findUnique({ 其中：{ id } }) }) **最小化传递给客户端组件的数据：** // 不好：发送整个用户对象 // 好：只发送需要的内容 ### 4\.重新渲染优化（中） **使用函数式 setState 来实现稳定的回调：** // 不好：每次渲染都创建新函数 onClick={() => setCount(count + 1)} // 好：稳定的参考 onClick={() => setCount(c => c + 1)} **将昂贵的工作提取到记忆组件中：** const ExpenseList = memo(function ExpenseList({ items }) { 返回 items.map(item => ) }) ## 完整参考有关详细说明和更多示例，请参阅 [references/performance-rules.md]()。

反应最佳实践

包含技能