render-optimization

用途

本技能提供 React 19+ 的现代渲染性能优化模式，用于诊断和改善 React 应用的渲染性能，减少不必要的组件重渲染，并处理长列表等高频渲染场景。

主要能力

React Compiler 优先（2026 默认策略）

技能给出决策树：若 React Compiler 已启用，则让编译器自动处理 memoization，仅在逃生舱场景使用 useMemo/useCallback，并在 DevTools 中通过 "Memo ✨" 徽章验证；若未启用，则先分析再优化：使用 React DevTools Profiler、定位真实瓶颈、应用针对性优化。

React 19 编译器可自动 memoize：组件重渲染、中间值（类似 useMemo）、回调引用（类似 useCallback）、JSX 元素。

启用方式（资料给出的代码）：

// next.config.js (Next.js 16+)
const nextConfig = {
  reactCompiler: true,
}

// Expo SDK 54+ enables by default

验证方式：打开 React DevTools，查找 "Memo ✨" 徽章。

何时仍需手动 memoization

资料列出三类逃生舱场景：

不应触发重跑的效果依赖：

const stableConfig = useMemo(() => ({
  apiUrl: process.env.API_URL
}), [])

useEffect(() => {
  initializeSDK(stableConfig)
}, [stableConfig])

不支持编译器的第三方库：

const memoizedValue = useMemo(() =>
  expensiveThirdPartyComputation(data), [data])

需要精确控制 memoization 边界：

const handleClick = useCallback(() => {
  // Critical callback that must be stable
}, [dependency])

虚拟化阈值

资料给出建议：项目数 < 100 通常常规渲染即可；100–500 考虑虚拟化；500+ 必须虚拟化。

TanStack Virtual 用法示例：

import { useVirtualizer } from '@tanstack/react-virtual'

const virtualizer = useVirtualizer({
  count: items.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => 50,
  overscan: 5,
})

状态就近放置（State Colocation）

将状态尽可能靠近使用位置。资料对比示例：状态提升过高会导致 Header 等无关组件在 filter 变化时重渲染；将状态放入 FilterableList 内部可实现最小重渲染。

// ❌ State too high - causes unnecessary re-renders
function App() {
  const [filter, setFilter] = useState('')
  return (
    <Header />  {/* Re-renders on filter change! */}
    <FilterInput value={filter} onChange={setFilter} />
    <List filter={filter} />
  )
}

// ✅ State colocated - minimal re-renders
function App() {
  return (
    <Header />
    <FilterableList />  {/* State inside */}
  )
}

性能分析工作流

React DevTools Profiler：录制、交互、分析
定位：渲染次数或耗时高的组件
验证：该重渲染是否真的造成性能问题
修复：应用针对性优化
测量：确认改进效果

快速见效项

Key prop：为列表使用稳定、唯一的 key
懒加载：使用 React.lazy() 做代码分割
防抖：输入处理使用 useDeferredValue
Suspense：配合恰当的边界进行流式渲染

关键决策

决策	建议
Memoization	交给 React Compiler 处理（2026 默认）
100+ 项列表	使用 TanStack Virtual
状态放置	尽可能就近放置
性能分析	优化前始终先测量

适用场景

调试 React 应用渲染性能问题
减少不必要的组件重渲染
处理长列表（100 项以上）的渲染卡顿
决定是否以及何时使用 useMemo/useCallback
在 React 19+ 项目中引入 React Compiler

参考资料

React Compiler Migration：编译器采用
Memoization Escape Hatches：何时需要 useMemo
TanStack Virtual：虚拟化
State Colocation：状态放置
DevTools Profiler：定位瓶颈

限制

资料未提供该技能的具体安装命令、支持的平台范围、收费或价格信息，也未说明其运行环境要求，这些内容暂未提供。

技能介绍

用途