React 的性能优化手段有哪些？

1. 减少不必要重渲染

• React.memo：包裹函数组件，通过浅比较（Shallow Comparison）检查 Props 是否变化，未变化时跳过重渲染。需注意：如果 Props 包含对象或函数引用（每次渲染都新建），则 React.memo 无法发挥作用，需配合 useMemo/useCallback 使用
• useMemo：缓存昂贵的计算结果（如大数据列表排序、过滤），仅在依赖项变化时重新计算
• useCallback：缓存函数引用，确保传递给子组件的回调函数保持稳定引用，配合 React.memo 才能有效避免子组件重渲染

2. 代码分割与懒加载

通过 React.lazy() 和 <Suspense> 实现组件级代码分割，将不同路由对应的页面拆分为独立的 JS 包，首屏只加载当前页面所需的代码。动态 import() 语法让大型库（如图表库、富文本编辑器）仅在真正需要时加载。

3. 列表虚拟化

当渲染超过 200 条列表数据时，应使用虚拟化技术（如 @tanstack/react-virtual，即原 react-window）只渲染可视区域内的行，将 DOM 节点数量从数千个降低到 10-20 个，大幅提升滚动流畅度。

4. 状态管理优化

避免将频繁变化的状态放在全局 Context 中（每次 Context 值变化都会导致所有消费者重渲染）。应优先使用组件局部状态，全局状态只放置真正需要跨组件共享的数据（如主题、认证信息）。

5. React 19 编译器的自动优化

React Compiler 是独立的构建时优化工具（2025年10月发布稳定版 v1.0），可配合 React 19 使用，能够自动分析组件代码并插入适当的记忆化指令，在多数场景下可替代手动编写 useMemo 和 useCallback 的需要，减少大量重渲染开销。