RN 性能调优指南：重渲染（Re-renders）控制与长列表（FlatList）优化

对于 Android 开发者来说，性能优化通常意味着减少主线程阻塞、优化内存分配、以及确保 RecyclerView 的丝滑滚动。在 React Native (RN) 中，性能优化的核心理念非常相似，但在具体的线程模型和渲染机制上有所不同。本文将带你深入了解 RN 的性能调优，并将其与 Android 及 Jetpack Compose 的概念进行对比。

1. 核心差异：UI 线程与 JS 线程

在原生 Android 中，我们非常熟悉主线程（Main Thread/UI Thread）。所有的 UI 更新必须在主线程进行，而耗时操作必须放在后台线程。

在 React Native 的旧架构中，主要有两个线程在交互：

JS Thread（JavaScript 线程）：运行所有的 React 逻辑、状态更新、API 请求等。
UI Thread（原生 UI 线程） ：负责实际的视图渲染（调用 Android 原生的 View 和 Canvas）。

这两个线程通过 Bridge（桥接） 异步通信。当 JS 线程忙碌或 Bridge 拥塞时，UI 就会发生卡顿（Jank）。 (注：RN 新架构 Fabric 引入了 JSI，实现了 JS 和原生 UI 的同步调用，极大地缓解了这个问题。)

2. 重渲染（Re-renders）控制：React vs Jetpack Compose

Jetpack Compose 的核心机制之一是智能重组（Smart Recomposition）。Compose 编译器会跟踪状态读取，并在状态改变时，仅重新执行读取了该状态的可组合函数（Composable）。

在 React Native 中，机制稍有不同：当一个组件的状态发生变化时，默认情况下，它及其所有的子组件都会重新渲染（执行 Render 函数）。 这非常容易导致不必要的性能开销。

应对策略对比

优化手段	React Native (Hooks)	Jetpack Compose
跳过不必要的重渲染	`React.memo` (浅比较 props)	默认行为（如果参数为 `@Stable` 或基本类型）
缓存计算结果	`useMemo`	`remember { ... }`
缓存回调函数	`useCallback`	`remember { { ... } }`

实战：使用 React.memo 和 useCallback

如果你有一个复杂的子组件，并且它的 props 没有变，你不希望它跟着父组件一起重渲染。

javascript 复制代码

import React, { useState, useCallback } from 'react';
import { View, Text, Button } from 'react-native';

// 类似 Compose 中参数全是 @Stable 的 Composable
// 使用 React.memo 包裹后，只有当 props 发生变化时才会重渲染
const ExpensiveChild = React.memo(({ onAction }) => {
  console.log("ExpensiveChild 渲染了");
  return (
    <View>
      <Text>我是极其复杂的子组件</Text>
      <Button title="点我" onPress={onAction} />
    </View>
  );
});

export default function Parent() {
  const [count, setCount] = useState(0);

  // ⚠️ 错误写法：每次 Parent 重渲染，都会生成一个新的匿名函数，
  // 导致 ExpensiveChild 的 props (onAction) 发生变化，从而触发重渲染。
  // const handleAction = () => { console.log("Action"); };

  // ✅ 正确写法：使用 useCallback 缓存函数引用
  // 类似 Compose 中的 remember { { console.log("Action") } }
  const handleAction = useCallback(() => {
    console.log("Action");
  }, []); // 依赖数组为空，说明函数永远不变

  return (
    <View>
      <Text>父组件 Count: {count}</Text>
      <Button title="增加 Count" onPress={() => setCount(count + 1)} />
      <ExpensiveChild onAction={handleAction} />
    </View>
  );
}

3. 长列表优化：FlatList vs RecyclerView / LazyColumn

在 Android 中，我们用 RecyclerView 来处理长列表，它的核心是 ViewHolder 模式（视图复用） 。Compose 中我们使用 LazyColumn，它通过按需组合（Compose on demand）来实现。

React Native 的核心长列表组件是 <FlatList>。与 RecyclerView 真正的视图复用不同，FlatList 的默认底层实现（VirtualizedList）主要是通过卸载（Unmount）屏幕外的组件并用空白 View 占位来节省内存。

如果配置不当，FlatList 很容易出现快速滚动时的白屏现象。

FlatList 核心优化属性

将这些属性与 Android 开发经验对应起来，能帮助你更好地理解：

keyExtractor（必须）
- 作用：为列表项提供唯一的 Key，帮助 React 进行高效的 Diff 算法。
- Android 对比 ：类似于 RecyclerView.Adapter 中的 getItemId() 或者 DiffUtil 中的 areItemsTheSame()。
getItemLayout（极度推荐）
- 作用：如果你知道列表项的固定高度，提供此方法可以跳过 React Native 的异步尺寸测量，极大地提升渲染速度和滚动体验。
- Android 对比 ：类似于在 XML 中写死 layout_height="72dp"，而不是 wrap_content，避免了复杂的 Measure 过程。
javascript 复制代码
```
// 假设每个 Item 高度固定为 50
getItemLayout={(data, index) => (
  {length: 50, offset: 50 * index, index}
)}
```
initialNumToRender
- 作用：首屏渲染的条目数。设置一个刚好能填满屏幕的数字，可以加快首屏渲染速度。
- Android 对比：RecyclerView 会自动计算需要填充屏幕的 View 数量，RN 需要你手动提示。
windowSize
- 作用：控制渲染区域的大小。默认是 21（屏幕可见区域算 1，上方 10，下方 10）。如果你内存吃紧，或者列表项极度复杂，可以调小（比如 5），但可能会增加快速滚动时的白屏率。
- Android 对比 ：类似于 RecyclerView 的 setItemViewCacheSize（离屏缓存数量）。
removeClippedSubviews
- 作用：在 Android 上，这会将屏幕外的视图从原生视图树中移除，进一步节省内存（通常针对极长的列表或复杂的卡片）。默认为 false，但针对长列表通常设为 true。

FlatList 优化模板

javascript 复制代码

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

const ITEM_HEIGHT = 60;

const ListItem = React.memo(({ item }) => {
  return (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );
});

export default function MyOptimizedList({ data }) {
  // 使用 useCallback 缓存 renderItem，避免 FlatList 内部不必要的重新渲染
  const renderItem = useCallback(({ item }) => <ListItem item={item} />, []);

  const keyExtractor = useCallback((item) => item.id.toString(), []);

  const getItemLayout = useCallback((data, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  }), []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      initialNumToRender={10} // 假设屏幕最多显示 10 个
      windowSize={11} // 适当减少缓存窗口大小，节省内存
      removeClippedSubviews={true} // Android 性能优化利器
      maxToRenderPerBatch={5} // 每次增量渲染的数量
    />
  );
}

const styles = StyleSheet.create({
  item: { height: ITEM_HEIGHT, justifyContent: 'center', padding: 10 }
});

总结

重渲染 ：把它当成 Compose 的 Recomposition。学会使用 React.memo，useMemo 和 useCallback 来构建你的"智能重组"防御线。
长列表 ：不要指望它像 RecyclerView 那样自动且完美。老老实实配置 getItemLayout，提取稳定的 renderItem 和 keyExtractor，并根据设备性能微调缓存参数。