React 性能优化模式

面向 React 和 Next.js 应用的性能优化指南。涵盖 7 类优化模式，按影响程度排序。详细示例见 references/ 目录。

适用场景

• 编写新的 React 组件或 Next.js 页面时
• 实现数据获取（客户端或服务端）时
• 进行性能审查或重构时
• 优化包体积或加载时间时

按优先级划分的类别

安装方式

OpenClaw / Moltbot / Clawbot

npx clawhub@latest install react-performance

1. Async — 消除瀑布式请求（CRITICAL）

并行执行相互独立的操作

顺序 await 是 React 应用中最大的性能失误。

// BAD — 串行，需 3 次网络往返
const user = await fetchUser()
const posts = await fetchPosts()
const comments = await fetchComments()

// GOOD — 并行，仅需 1 次网络往返
const [user, posts, comments] = await Promise.all([
  fetchUser(), fetchPosts(), fetchComments(),
])

延迟 await 至真正需要时再执行

将 await 移至实际使用该值的分支内。

// BAD — 两个分支均被阻塞
async function handle(userId: string, skip: boolean) {
  const data = await fetchUserData(userId)
  if (skip) return { skipped: true }    // 即使跳过仍会等待
  return process(data)
}

// GOOD — 仅在必要时阻塞
async function handle(userId: string, skip: boolean) {
  if (skip) return { skipped: true }    // 立即返回
  return process(await fetchUserData(userId))
}

策略性地设置 Suspense 边界

立即渲染布局，同时让依赖数据的区域独立加载。

// BAD — 整个页面被阻塞
async function Page() {
  const data = await fetchData()
  return 

}

// GOOD — 布局立即渲染，数据流式加载
function Page() {
  return (
    

      

      }>
      
  )
}
async function DataDisplay() {
  const data = await fetchData()
  return 
{data.content}
}

使用 use() 在组件间共享同一个 Promise，避免重复请求。

2. 包体积优化（CRITICAL）

避免使用 barrel 文件导入

barrel 文件会加载数千个未使用的模块。直接导入可节省 200–800ms。

// BAD — 加载 1583 个模块
import { Check, X, Menu } from 'lucide-react'

// GOOD — 仅加载 3 个模块
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'
import Menu from 'lucide-react/dist/esm/icons/menu'

Next.js 13.5+：在配置中启用 experimental.optimizePackageImports。 常见受影响库：lucide-react、@mui/material、react-icons、@radix-ui、 lodash、date-fns。

对重型组件使用动态导入

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

延迟加载非关键第三方库

分析、日志、错误追踪等 —— 使用 dynamic() 配合 { ssr: false } 在 hydration 后加载。

基于用户意图预加载

const preload = () => { void import('./monaco-editor') }
Open Editor

3. Server Components（HIGH）

最小化 RSC 边界处的序列化开销

仅向客户端传递其实际使用的字段。

// BAD — 序列化全部 50 个用户字段
return 

// GOOD — 仅序列化 1 个字段
return 

通过组合实现并行数据获取

RSC 在组件树内按顺序执行。需重构结构以支持并行。

// BAD — Sidebar 等待 header 请求完成
export default async function Page() {
  const header = await fetchHeader()
  return 
{header}

}

// GOOD — 同级异步组件同时发起请求
async function Header() { return 
{await fetchHeader()}
 }
async function Sidebar() { return  }
export default function Page() { return 
 }

使用 React.cache() 实现按请求去重

import { cache } from 'react'
export const getCurrentUser = cache(async () => {
  const session = await auth()
  if (!session?.user?.id) return null
  return await db.user.findUnique({ where: { id: session.user.id } })
})

请使用基础类型参数（而非内联对象）—— React.cache() 内部使用 Object.is 进行比对。 Next.js 会自动对 fetch 调用去重，但数据库查询、鉴权检查及计算类逻辑仍需显式使用 React.cache()。

使用 after() 执行非阻塞操作

import { after } from 'next/server'
export async function POST(request: Request) {
  await updateDatabase(request)
  after(async () => { logUserAction({ userAgent: request.headers.get('user-agent') }) })
  return Response.json({ status: 'success' })
}

4. 重渲染优化（MEDIUM）

在渲染过程中派生状态 —— 而非在 effect 中

// BAD — 多余的状态 + effect
const [fullName, setFullName] = useState('')
useEffect(() => { setFullName(first + ' ' + last) }, [first, last])

// GOOD — 渲染时内联派生
const fullName = first + ' ' + last

使用函数式 setState 保证回调稳定性

// BAD — 每次 items 变更都会重新创建
const addItem = useCallback((item: Item) => {
  setItems([...items, item])
}, [items])

// GOOD — 回调稳定，始终获取最新状态
const addItem = useCallback((item: Item) => {
  setItems((curr) => [...curr, item])
}, [])

将状态读取延迟到实际使用点

若仅在回调中读取状态，则无需订阅动态状态。

// BAD — 每次 searchParams 变更都触发重渲染
const searchParams = useSearchParams()
const handleShare = () => shareChat(chatId, { ref: searchParams.get('ref') })

// GOOD — 按需读取
const handleShare = () => {
  const ref = new URLSearchParams(window.location.search).get('ref')
  shareChat(chatId, { ref })
}

惰性初始化状态

// BAD — 每次渲染都执行 JSON.parse
const [settings] = useState(JSON.parse(localStorage.getItem('s') || '{}'))

// GOOD — 仅执行一次
const [settings] = useState(() => JSON.parse(localStorage.getItem('s') || '{}'))

订阅派生布尔值

// BAD — 每像素变化都触发重渲染
const width = useWindowWidth(); const isMobile = width < 768

// GOOD — 仅当布尔值翻转时重渲染
const isMobile = useMediaQuery('(max-width: 767px)')

对非紧急更新使用 Transition

// BAD — 滚动时阻塞 UI
const handler = () => setScrollY(window.scrollY)

// GOOD — 非阻塞
const handler = () => startTransition(() => setScrollY(window.scrollY))

将耗时逻辑提取为 memoized 组件

const UserAvatar = memo(function UserAvatar({ user }: { user: User }) {
  const id = useMemo(() => computeAvatarId(user), [user])
  return 
})
function Profile({ user, loading }: Props) {
  if (loading) return 
  return 

}

注意：React Compiler 可自动处理，无需手动添加 memo()/useMemo()。

5. 渲染性能（MEDIUM）

对长列表使用 CSS content-visibility

对于含 1000 条目的列表，浏览器可跳过约 990 条屏幕外条目（首屏渲染快约 10 倍）。

.list-item { content-visibility: auto; contain-intrinsic-size: 0 80px; }

将静态 JSX 提升至组件外部

避免重复创建，尤其适用于大型 SVG 节点。React Compiler 会自动执行此优化。

const skeleton = 

function Container() { return 
{loading && skeleton}
 }

6. 客户端数据（MEDIUM）

使用 SWR 实现去重与缓存

// BAD — 每个实例独立发起请求
useEffect(() => { fetch('/api/users').then(r => r.json()).then(setUsers) }, [])

// GOOD — 多个实例共享单次请求
const { data: users } = useSWR('/api/users', fetcher)

7. JavaScript 性能（LOW-MEDIUM）

使用 Set / Map 实现 O(1) 查找

// BAD — O(n)
items.filter(i => allowed.includes(i.id))
// GOOD — O(1)
const allowedSet = new Set(allowed)
items.filter(i => allowedSet.has(i.id))

合并数组遍历操作

// BAD — 3 次遍历
const a = users.filter(u => u.isAdmin)
const t = users.filter(u => u.isTester)
// GOOD — 1 次遍历
const a: User[] = [], t: User[] = []
for (const u of users) { if (u.isAdmin) a.push(u); if (u.isTester) t.push(u) }

其他建议：尽早返回、在循环中缓存属性访问、将 RegExp 提升至循环外、热路径优先选用 for...of。

快速决策指南

1. 页面加载缓慢？ → 先检查包体积（2），再排查异步瀑布流（1）
2. 交互卡顿？ → 先优化重渲染（4），再关注 JS 性能（7）
3. 服务端页面响应慢？ → 检查 RSC 序列化开销与并行数据获取（3）
4. 客户端数据陈旧或缓慢？ → 使用 SWR（6）
5. 长列表滚动卡顿？ → 启用 content-visibility（5）