你如何优化 React Native 应用的性能？

Question

Accepted Answer

优化 React Native 性能涉及最小化不必要的**重新渲染**、高效的**列表**、减少**JS 线程工作**和 bridge 流量、优化图像以及使用原生线程进行动画。性能对于平滑、响应式应用很重要。

## 最小化重新渲染（React 的关键问题）

```text
✓ Avoid unnecessary RE-RENDERS:
  → React.memo (memoize components), useMemo (values), useCallback (functions)
  → correct, stable KEYS in lists; avoid creating new objects/functions inline that
    cause children to re-render
  → proper state structure (don't put everything in one big state that re-renders all)
```

## 高效列表

```text
✓ Use FLATLIST (not ScrollView + map) for long lists — lazy rendering/virtualization
✓ Optimize FlatList: keyExtractor, getItemLayout, windowSize, removeClippedSubviews;
  keep item components light and memoized
✓ For very large/complex lists → FlashList (Shopify) — a faster drop-in alternative
```

## JS 线程和 bridge

```text
✓ The JS thread runs your code — keep it free for responsiveness (avoid heavy synchronous
  work; it causes jank/dropped frames)
✓ Minimize BRIDGE traffic (old architecture) — frequent JS↔native passes are costly
  (the NEW ARCHITECTURE / JSI reduces this)
✓ Run ANIMATIONS on the native thread (useNativeDriver / Reanimated) — not the JS thread
✓ Offload heavy computation; debounce expensive operations
```

## 其他优化

```text
✓ Optimize IMAGES (sizes, caching — e.g. FastImage); lazy-load
✓ Reduce app startup time and bundle size; use Hermes (optimized JS engine)
✓ PROFILE to find bottlenecks (Flipper, performance monitor, React DevTools profiler)
✓ Test on lower-end devices (not just high-end)
```

## 为什么这很重要

理解 React Native 性能优化是有价值的高级开发者级别知识，因为**平滑性能对于良好的用户体验至关重要**，而 React Native 有特定的性能考虑，所以这对于构建高质量应用很重要。

与 React web 类似，关键问题是**最小化不必要的重新渲染**（使用 React.memo、useMemo、useCallback、稳定的 key 和适当的状态结构来避免组件不必要的重新渲染）——这是 React Native 应用中常见的性能问题。**高效列表**很关键：对于长列表使用 **FlatList**（而不是 ScrollView + map）并进行适当优化（keyExtractor、getItemLayout、轻量级的 memoized 项组件），对于非常大的列表使用 **FlashList**——因为列表很常见，渲染不当的列表会导致真实的性能问题。

理解 **JS 线程和 bridge** 的考虑特别重要且是 React Native 特定的：**JS 线程必须保持空闲**以保证响应性（繁重的同步工作会导致卡顿），**bridge 流量**（在旧架构中）成本高，所以应该最小化 JS↔native 通信（新架构/JSI 可以减少这一点），最关键的是**动画应该在原生线程上运行**（通过 useNativeDriver/Reanimated，而不是 JS 线程）以保证流畅性——这些反映了 React Native 独特的 JS/native 线程架构及其性能影响。

其他优化（通过缓存优化图像、减少启动/bundle 大小、使用 Hermes、分析以找到瓶颈以及在低端设备上测试）完善了工具包。

平滑的性能直接影响用户体验，而 React Native 的架构引入了特定的考虑（JS 线程、bridge、原生线程动画）超越了通用的 React 优化。

由于平滑性能对于用户体验至关重要，React Native 有特定的性能考虑（重新渲染、高效列表、JS 线程/bridge、原生线程动画），而且由于解决这些问题的适当优化可以保持应用平滑，理解 React Native 性能优化是有价值的高级开发者级别知识，用于构建响应式、精细的应用——一项关键技能，既反映了 React 优化（重新渲染、列表）也反映了 React Native 特定的问题（JS 线程、bridge、原生动画），这对高级 React Native 开发者所需的性能意识很重要。