react navite手写 FlatList 优化配置

如果你是在准备 React Native 高频手写题/面试题 ，FlatList 优化配置建议直接记这一套：

<FlatList
  data={data}
  renderItem={renderItem}
  keyExtractor={(item) => String(item.id)}

  // ===== 核心性能优化 =====
  initialNumToRender={10}
  maxToRenderPerBatch={10}
  updateCellsBatchingPeriod={50}
  windowSize={5}

  // ===== 固定高度列表 =====
  getItemLayout={(_, index) => ({
    length: ITEM_HEIGHT,
    offset: ITEM_HEIGHT * index,
    index,
  })}

  // ===== 减少无意义刷新 =====
  removeClippedSubviews={true}

/>

1. 面试最重要的 5 个配置

配置	作用	怎么记
initialNumToRender	首屏渲染多少条	控制首次渲染
maxToRenderPerBatch	每批最多渲染多少条	控制批量渲染数量
updateCellsBatchingPeriod	两批渲染之间的时间间隔	控制批量渲染频率
windowSize	保留多少屏的列表项	控制内存占用
getItemLayout	提前计算 item 位置	固定高度必加

2. getItemLayout 是高频考点

比如每个 Item 高度固定 80：

const ITEM_HEIGHT = 80;

const getItemLayout = (_, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

这样 RN 不用逐个测量 Item 高度，可以直接计算：

第 0 个：offset = 0
第 1 个：offset = 80
第 2 个：offset = 160
第 3 个：offset = 240
...

尤其是：

scrollToIndex()

这种跳转操作，固定高度 + getItemLayout 非常有价值。

---

3. renderItem 也要优化

不要每次 render 都创建新的函数：

// ❌
<FlatList
  data={data}
  renderItem={(item) => <Item item={item} />}
/>

可以：

const renderItem = useCallback(
  ({ item }) => <Item item={item} />,
  []
);

<FlatList
  data={data}
  renderItem={renderItem}
/>

Item 本身再配合：

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

核心思路就是：

FlatList
   ↓
减少渲染数量
   +
减少重新渲染
   +
减少测量
   +
控制内存

---

4. 一套比较完整的"手写答案"

面试时可以直接写：

const ITEM_HEIGHT = 80;

const renderItem = useCallback(
  ({ item }) => <ListItem item={item} />,
  []
);

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

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

return (
  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={keyExtractor}
    getItemLayout={getItemLayout}

    initialNumToRender={10}
    maxToRenderPerBatch={10}
    updateCellsBatchingPeriod={50}
    windowSize={5}

    removeClippedSubviews
  />
);