⚡

React最佳实践-性能优化Skill react-best-practices

这个技能提供全面的React和Next.js性能优化指南，包含40多个规则，用于消除瀑布、优化包大小和提高渲染性能。适用于开发者优化应用性能、审查代码、重构组件等场景，帮助提升前端开发效率和用户体验。关键词：React性能优化、Next.js优化、前端性能、包大小优化、消除瀑布、渲染优化、JavaScript性能。

前端开发 0 次安装 0 次浏览 更新于 3/20/2026

name: react-best-practices description: 全面的React和Next.js性能优化指南，包含40多个规则，用于消除瀑布、优化包大小和提高渲染。在优化React应用、审查性能或重构组件时使用。

React最佳实践 - 性能优化

全面的React和Next.js应用程序性能优化指南，包含40多个按影响级别组织的规则。旨在帮助开发者消除性能瓶颈并遵循最佳实践。

何时使用此技能

使用React最佳实践当：

  • 优化React或Next.js应用程序性能
  • 审查代码以进行性能改进
  • 重构现有组件以提高性能
  • 实施新功能时考虑性能
  • 调试慢渲染或加载问题
  • 减少包大小
  • 消除请求瀑布

覆盖的关键领域：

  • 消除瀑布（关键）：防止顺序异步操作
  • 包大小优化（关键）：减少初始JavaScript负载
  • 服务器端性能（高）：优化RSC和数据获取
  • 客户端数据获取（中-高）：实现高效缓存
  • 重新渲染优化（中）：最小化不必要的重新渲染
  • 渲染性能（中）：优化浏览器渲染
  • JavaScript性能（低-中）：热路径的微优化
  • 高级模式（低）：边缘情况的专门技术

快速参考

关键优先级

  1. 推迟await直到需要时 – 将await移动到使用它们的分支中
  2. 使用Promise.all() – 并行化独立的异步操作
  3. 避免桶导入 – 直接从源文件导入
  4. 动态导入 – 懒加载重组件
  5. 战略性Suspense – 在显示布局时流式传输内容

常见模式

并行数据获取：

const [user, posts, comments] = await Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])

直接导入：

// ❌ 加载整个库
import { Check } from 'lucide-react'

// ✅ 只加载所需内容
import Check from 'lucide-react/dist/esm/icons/check'

动态组件：

import dynamic from 'next/dynamic'

const MonacoEditor = dynamic(
  () => import('./monaco-editor'),
  { ssr: false }
)

使用指南

完整的性能指南可在参考文件夹中获得：

每个规则包括：

  • 不正确/正确代码比较
  • 具体影响指标
  • 何时应用优化
  • 真实世界示例

类别概述

1. 消除瀑布（关键）

瀑布是头号性能杀手。每个顺序的await都会增加完整的网络延迟。

  • 推迟await直到需要时
  • 基于依赖关系的并行化
  • 防止API路由中的瀑布链
  • Promise.all()用于独立操作
  • 战略性Suspense边界

2. 包大小优化（关键）

减少初始包大小改善交互时间和最大内容绘制。

  • 避免桶文件导入
  • 条件模块加载
  • 推迟非关键第三方库
  • 动态导入重组件
  • 基于用户意图的预加载

3. 服务器端性能（高）

优化服务器端渲染和数据获取。

  • 跨请求LRU缓存
  • 最小化RSC边界的序列化
  • 通过组件组合并行数据获取
  • 使用React.cache()进行每请求去重

4. 客户端数据获取（中-高）

自动去重和高效数据获取模式。

  • 去重全局事件监听器
  • 使用SWR进行自动去重

5. 重新渲染优化（中）

减少不必要的重新渲染以最小化浪费的计算。

  • 推迟状态读取到使用点
  • 提取到记忆化组件
  • 缩小效果依赖项
  • 订阅派生状态
  • 使用懒状态初始化
  • 使用transition处理非紧急更新

6. 渲染性能（中）

优化浏览器渲染过程。

  • 动画SVG包装器而不是SVG元素
  • CSS content-visibility用于长列表
  • 提升静态JSX元素
  • 优化SVG精度
  • 防止水合不匹配而不闪烁
  • 使用Activity组件进行显示/隐藏
  • 使用显式条件渲染

7. JavaScript性能（低-中）

热路径的微优化。

  • 批量DOM CSS更改
  • 为重复查找构建索引映射
  • 在循环中缓存属性访问
  • 缓存重复函数调用
  • 缓存存储API调用
  • 合并多个数组迭代
  • 数组比较的早期长度检查
  • 函数早期返回
  • 提升RegExp创建
  • 使用循环求最小值/最大值而不是排序
  • 使用Set/Map进行O(1)查找
  • 使用toSorted()而不是sort()

8. 高级模式（低）

边缘情况的专门技术。

  • 在refs中存储事件处理器
  • 使用useLatest获取稳定的回调refs

实施方法

当优化React应用程序时：

  1. 先分析：使用React DevTools Profiler和浏览器性能工具识别瓶颈
  2. 关注关键路径：从消除瀑布和减少包大小开始
  3. 测量影响：用指标（LCP、TTI、FID）验证改进
  4. 逐步应用：不要过早过度优化
  5. 彻底测试：确保优化不破坏功能

关键指标跟踪

  • 交互时间（TTI）：页面完全交互的时间
  • 最大内容绘制（LCP）：主要内容可见的时间
  • 首次输入延迟（FID）：对用户交互的响应性
  • 累计布局偏移（CLS）：视觉稳定性
  • 包大小：初始JavaScript负载
  • 服务器响应时间：服务器渲染内容的TTFB

常见陷阱避免

❌ 不要：

  • 从大型库使用桶导入
  • 用顺序await阻塞并行操作
  • 当只有部分需要更新时重新渲染整个树
  • 在关键路径中加载分析/跟踪
  • 使用.sort()而不是.toSorted()突变数组
  • 在渲染内部创建RegExp或重对象

✅ 要：

  • 直接从源文件导入
  • 使用Promise.all()进行独立操作
  • 记忆化昂贵组件
  • 懒加载非关键代码
  • 使用不可变数组方法
  • 提升静态对象到组件外部

资源

版本历史

v0.1.0（2026年1月）

  • Vercel Engineering的初始发布
  • 40多个性能规则，跨越8个类别
  • 全面的代码示例和影响分析