React性能优化实战：从核心原理到关键技能提升

3次阅读

没有评论

共计 1902 个字符，预计需要花费 5 分钟才能阅读完成。

在开发 React 应用时，我们经常会遇到一些性能瓶颈。通过 Chrome Performance 面板分析，可以清晰地看到这些问题：

不必要的组件重渲染：父组件状态变化导致整个子树重新渲染，即使子组件 props 未变化
大列表渲染卡顿：未做虚拟化处理的长列表会明显拖慢页面响应
Context 滥用：高频更新的 Context 会触发所有消费者组件重渲染
状态管理混乱：Redux 等状态库中存储了过多不必要的数据

React 通过 Virtual DOM 的差异比较来决定哪些 DOM 需要更新。这个过程分为两个阶段：

Reconciliation 阶段：递归对比新旧 Virtual DOM 树
Commit 阶段：将差异应用到真实 DOM

React.memo：用于函数组件，避免相同 props 下的重渲染

const MemoComponent = React.memo(MyComponent, (prevProps, nextProps) => {return prevProps.value === nextProps.value})

useMemo：缓存计算结果，避免重复计算

const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

useCallback：缓存函数引用，避免子组件不必要更新

const handleClick = useCallback(() => {doSomething(a, b)
}, [a, b])

Context 虽然方便，但不当使用会导致性能问题：

拆分 Context：按功能将大 Context 拆分为多个小 Context
使用选择器：在消费者组件中只订阅需要的值
结合 useMemo：对 Context 值进行记忆化

// 优化前：所有消费者都会重渲染
const AppContext = createContext({theme: 'dark', user: null})

// 优化后：拆分 Context
const ThemeContext = createContext('dark')
const UserContext = createContext(null)

React DevTools 的 Profiler 组件可以帮助我们找到性能瓶颈：

记录组件渲染过程
分析火焰图找出耗时长的组件
查看哪些组件进行了不必要的渲染

React 18 引入的并发特性可以显著改善用户体验：

function App() {const [isPending, startTransition] = useTransition()
  const [tab, setTab] = useState('home')

  function selectTab(nextTab) {startTransition(() => {setTab(nextTab)
    })
  }

  return (
    <>
      <button onClick={() => selectTab('home')}>Home</button>
      <button onClick={() => selectTab('profile')}>Profile</button>
      {isPending ? 'Loading...' : <TabContent tab={tab} />}
    </>
  )
}