性能优化

RN 性能问题的根源

React Native 的性能问题大多源于一个核心矛盾：JavaScript 是单线程的，而移动应用的渲染需要每秒 60 帧（高刷屏 120 帧）的更新频率，每帧只有约 16ms（或 8ms）。当 JS 线程在某一帧内耗时超过这个阈值，就会掉帧，用户感知为卡顿。

常见的 JS 线程性能杀手包括：在渲染函数里进行复杂计算、频繁创建新对象（内联样式、内联函数）、不必要的组件重渲染、大量图片解码、同步读取 AsyncStorage 等。

核心名词解释

三线程模型

FlatList 深度优化

import { FlatList, View, Text, StyleSheet } from 'react-native';
import { memo, useCallback } from 'react';

interface Item { id: string; text: string; height: number; }

// 1. renderItem 组件用 memo 包裹，避免列表父组件重渲染时重渲所有 item
const ListItem = memo(({ item }: { item: Item }) => (
  <View style={[styles.item, { height: item.height }]}>
    <Text>{item.text}</Text>
  </View>
));

export function OptimizedList({ data }: { data: Item[] }) {
  // 2. useCallback 稳定 renderItem 函数引用
  const renderItem = useCallback(
    ({ item }: { item: Item }) => <ListItem item={item} />,
    []
  );

  // 3. getItemLayout：告知 FlatList 每个 item 的精确高度
  //    避免 FlatList 测量 item 高度的开销
  //    仅适用于固定高度的 item！
  const ITEM_HEIGHT = 80;
  const getItemLayout = useCallback(
    (_: any, index: number) => ({
      length: ITEM_HEIGHT,
      offset: ITEM_HEIGHT * index,
      index,
    }),
    []
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      getItemLayout={getItemLayout}      // 固定高度时使用，性能大幅提升
      initialNumToRender={10}           // 首屏渲染数量（不要设太大）
      windowSize={5}                   // 渲染窗口（默认21，缩小节省内存）
      maxToRenderPerBatch={5}          // 每批次渲染数量
      updateCellsBatchingPeriod={30}   // 批次更新间隔（ms）
      removeClippedSubviews={true}    // Android：裁剪屏幕外视图
      // 不要用这个！会重置滚动位置
      // legacyImplementation={false}
    />
  );
}

Hermes 引擎与启动优化

Hermes 是 Meta 专为 React Native 设计的 JavaScript 引擎。传统引擎（如 V8、JavaScriptCore）在应用启动时需要：加载 JS Bundle → 解析 JS 文本 → 编译为字节码 → 执行。这个过程在低端 Android 设备上可能需要 2-3 秒。

Hermes 采用 AOT（提前编译）策略：在构建时就将 JS 代码编译为字节码，应用启动时直接执行字节码，省去了运行时编译的时间。实测可将 TTI（Time to Interactive）减少 40-50%。