React Native打开Modal时List组件重渲染导致界面卡顿如何解决？

核心原因 #

• 父组件状态更新触发全局重渲染：isDetails是父组件控制Modal显隐的状态，状态更新时父组件会整体重渲染，若List的props存在不稳定的引用类型，会直接触发List重渲染
• React.memo浅比较失效：代码中直接在JSX内定义currency对象字面量，以及未用useCallback包裹的函数props（onChoose、showMoreFlightOffers等），每次父组件重渲染都会生成新的引用，React.memo默认浅比较会判定props发生变化，进而触发List重渲染
• FlatList未做性能优化：50个列表项如果没有提前做布局缓存、唯一key绑定，重渲染时会全量重新计算布局、创建视图，直接导致卡顿

修复方案 #

第一步：稳定List的props引用 #

1. 所有传递给List的函数类props，用useCallback包裹，锁定引用：

// 示例，根据实际逻辑补全依赖项
const onChoose = useCallback((selectedItem) => {
  // 原有onChoose逻辑
}, [/* 依赖项 */])
const showMoreFlightOffers = useCallback(() => {
  // 原有逻辑
}, [/* 依赖项 */])

2. 抽离currency对象，用useMemo缓存，避免每次渲染生成新对象：

const currency = useMemo(() => {
  return {
    value: searchId?.searchId.currencyRates[body.currency],
    name: body.currency
  }
}, [searchId, body.currency])

3. 可自定义React.memo的比较逻辑，确保只有必要的props变化时才重渲染List：

const List = React.memo((props) => {
  // List原有逻辑
}, (prev, next) => {
  // 返回true表示props无变化，不重渲染；返回false表示需要重渲染
  return prev.flightOffers === next.flightOffers
    && prev.isRequesting === next.isRequesting
    && prev.isLoadingMore === next.isLoadingMore
    && prev.isLoadingResults === next.isLoadingResults
    && prev.currency === next.currency
    && prev.onChoose === next.onChoose
    && prev.showMoreFlightOffers === next.showMoreFlightOffers
})

第二步：优化FlatList性能 #

• 给FlatList配置keyExtractor，返回每个列表项唯一且稳定的标识，禁止使用数组索引作为key
• 提前配置getItemLayout，跳过动态布局计算：

// 假设你的列表项固定高度为80，根据实际高度调整
getItemLayout={(data, index) => ({
  length: 80,
  offset: 80 * index,
  index
})}

• 用React.memo包裹renderItem返回的列表项组件，避免单个列表项不必要的重渲染
• 开启removeClippedSubviews={true}，自动回收不在可视区域内的列表项视图，降低渲染压力

额外优化 #

Modal打开期间可给List组件添加pointerEvents="none"属性，暂时禁用列表的交互与重绘响应，Modal关闭后再恢复为默认值，进一步降低Modal动画期间的性能开销。

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