求助：React Native FlatList滚动时反复重渲染问题排查

你遇到的问题核心是FlatList的renderItem函数每次都被重新创建，导致FlatList认为渲染逻辑发生变化，进而触发全量重渲染——哪怕子组件用了PureComponent也无法阻止。结合你的代码，给你几个具体的解决步骤：

1. 用useCallback缓存renderItem函数 #

你的Swiper是函数组件，每次组件重渲染时，renderItem都会被重新定义成一个新函数。FlatList检测到renderItem这个prop发生变化，就会重新渲染所有可见列表项。

修改代码，用useCallback把renderItem缓存起来：

import React, { useRef, useCallback, PureComponent } from "react";

// ... 其他代码不变

const renderItem = useCallback(({ item, index }) => {
  console.log(index)
  return <Item content={item} index={index}  />
}, []) // 依赖项为空，因为item和index是函数参数，不需要外部依赖

这样renderItem的引用会保持稳定，FlatList就不会因为这个prop变化而触发无意义的重渲染。

2. 用memo包裹Swiper组件，避免父组件触发的冗余重渲染 #

如果Swiper的父组件每次渲染时，传入的props（比如header）导致Swiper本身重渲染，也会连带FlatList一起渲染。用memo包裹Swiper，对props做浅比较，只有当props真的变化时才重渲染：

const Swiper = memo(props => {
  const flatList = useRef()
  const renderItem = useCallback(/* ... 同上 */)

  return (
    <View style={styles.container}>
      {props.header ? <AppText style={styles.header} text={props.header} /> : null}
      <FlatList {/* ... 原有属性 */} />
    </View>
  )  
})

3. 确保data的引用稳定 #

你现在直接import的data如果是静态数据，那没问题。但如果是动态获取的（比如接口请求返回），要注意不要每次渲染时都重新创建数组对象——比如不要在组件内部写const data = [...fetchedData]这类会生成新数组的代码，尽量保持data的引用稳定，否则FlatList会因为data变化而全量重渲染。

4. 优化FlatList渲染参数，缓解性能警告 #

针对你收到的VirtualizedList性能警告，可以给FlatList加几个参数，控制渲染批次和预渲染数量，减少渲染压力：

<FlatList
  data={data}
  horizontal
  pagingEnabled
  renderItem={renderItem}
  keyExtractor={item => item.id}
  ref={flatList}
  initialNumToRender={5} // 初始渲染的项数
  maxToRenderPerBatch={3} // 每次批量渲染的项数
  windowSize={5} // 视窗之外预渲染的项数（横向列表可适当调小）
/>

这些参数可以根据你的列表长度和项的复杂度调整，目的是避免一次性渲染太多组件，降低滚动时的卡顿。

验证PureComponent是否生效 #

做完上面的优化后，你可以把Item组件里的console.log移到render方法里，看看滚动时只有新进入视窗的Item才触发render，就说明PureComponent已经生效了。

内容的提问来源于stack exchange，提问作者Jat90