React Native FlatList渲染含setTimeout的列表项是否会引发性能问题

结论 #

该实现存在明确的性能隐患与逻辑风险，不建议直接使用。

存在的问题 #

• 首先要明确：renderItem 是 FlatList 的渲染回调，本质属于组件 render 逻辑的一部分，会随着列表滚动、项出入视口、数据源更新等场景频繁触发，并非20条数据就只会执行20次。每次执行都会生成一个新的3秒定时器，快速滚动几次就会生成上百个待执行的定时器，大量定时器回调抢占JS线程调度资源，中低端设备会直接出现掉帧、卡顿问题。
• 存在内存泄漏风险：如果组件卸载、或者列表项被移出视口销毁时，定时器还未触发，回调中如果引用了组件的 state、props 等变量，会导致组件实例无法被垃圾回收，内存占用持续升高，长时间使用可能触发应用闪退。
• 会出现不符合预期的逻辑异常：同一个列表项如果多次触发重渲染，会生成多个定时器先后执行，若回调中包含状态更新逻辑，会出现重复触发、甚至在页面销毁后还触发状态更新的问题，同时会抛出「对未挂载组件执行 setState」的运行时警告。
• 额外补充：你提供的代码中 FlatList 绑定的 data 属性为 list，但定义的数据源是 DATA，属于笔误，实际运行会导致列表无数据。

优化方案 #

1. 不要在 renderItem 这类渲染函数中执行 setTimeout 这类副作用逻辑，将定时器逻辑下沉到每个列表项组件的生命周期钩子中，保证每个列表项仅在首次挂载时创建一次定时器。
2. 必须添加定时器清理逻辑，在列表项卸载、组件销毁时清除对应的定时器，避免内存泄漏。
3. 如果定时器逻辑仅需要对可见的列表项生效，可以配合 FlatList 的可见性监听回调，仅为当前视口内的项创建定时器，进一步减少不必要的性能开销。

优化后代码示例 #

// 单独封装列表项组件
const ListItem = ({ item }) => {
  React.useEffect(() => {
    // 仅在列表项首次挂载时创建定时器
    const timerId = setTimeout(() => {
      // handle task
    }, 3000);
    // 列表项卸载时自动清理定时器
    return () => clearTimeout(timerId);
  }, [item.id]); // 仅当item.id变化时才重新创建定时器

  return <some stuff></some>;
};

// 父组件中FlatList用法
const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
  //...MORE ITEMS
];

<FlatList
  keyExtractor={item => item.id}
  data={DATA}
  renderItem={({item}) => <ListItem item={item} />}
/>

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