React Native大FlatList高效更新及图片选择器性能优化咨询

嘿，这个场景我之前做图片选择器时也踩过坑！当选中数量达到上限后全量更新FlatList项确实容易卡顿，尤其是相册里图片多的时候，咱们可以从这几个方向来优化性能：

FlatList默认会在extraData变化时重新渲染所有可见项，这是性能瓶颈的核心。咱们要做的是让只有真正需要变化的项才重渲染：

1. 把图片项抽成独立组件，用React.memo包裹并自定义比较逻辑
   把每个图片项封装成CameraRollItem，通过React.memo的自定义比较函数，只在关键属性变化时才重渲染：

   const CameraRollItem = React.memo(({ item, isSelected, shouldDisable, onSelect }) => {
     return (
       <TouchableOpacity 
         disabled={shouldDisable}
         onPress={() => onSelect(item)}
         style={{ position: 'relative', width: 100, height: 100 }}
       >
         <Image 
           source={{ uri: item.node.image.uri }} 
           style={{ width: '100%', height: '100%' }}
           resizeMode="cover"
         />
         {/* 选中标记 */}
         {isSelected && (
           <View style={{
             position: 'absolute',
             top: 4,
             right: 4,
             backgroundColor: '#1677ff',
             borderRadius: 12,
             width: 24,
             height: 24,
             justifyContent: 'center',
             alignItems: 'center'
           }}>
             <Text style={{ color: 'white', fontSize: 16 }}>✓</Text>
           </View>
         )}
         {/* 禁用覆盖层 */}
         {shouldDisable && (
           <View style={{
             position: 'absolute',
             inset: 0,
             backgroundColor: 'rgba(0,0,0,0.4)'
           }} />
         )}
       </TouchableOpacity>
     );
   }, (prevProps, nextProps) => {
     // 只有当选中状态、禁用状态、图片地址变化时才重渲染
     return prevProps.isSelected === nextProps.isSelected &&
            prevProps.shouldDisable === nextProps.shouldDisable &&
            prevProps.item.node.image.uri === nextProps.item.node.image.uri;
   });
   

2. 优化extraData的传递
   不要把整个selectedPhotos数组传给extraData，只传递选中数量这个最精简的状态，避免不必要的触发：

   <FlatList
     data={cameraRollPhotos}
     keyExtractor={(item) => item.node.image.uri}
     renderItem={({ item }) => {
       const isSelected = selectedPhotos.some(photo => photo.node.image.uri === item.node.image.uri);
       // 只在选满且当前项未选中时禁用
       const shouldDisable = selectedPhotos.length >= maxPhotos && !isSelected;
       return (
         <CameraRollItem
           item={item}
           isSelected={isSelected}
           shouldDisable={shouldDisable}
           onSelect={handleSelectPhoto}
         />
       );
     }}
     extraData={{ selectedCount: selectedPhotos.length }}
   />
   

利用FlatList的内置属性减少不必要的渲染和计算：

• 设置getItemLayout提前计算布局：
  让FlatList不用实时测量每个项的尺寸，提升滚动和渲染流畅度：

  const getItemLayout = (data, index) => ({
    length: 100, // 你的图片项宽度/高度
    offset: 100 * index,
    index,
  });
  
  // 加到FlatList属性里
  <FlatList
    ...
    getItemLayout={getItemLayout}
  />
  

• 合理配置渲染批次参数：
  根据设备性能调整initialNumToRender（初始渲染数量）、maxToRenderPerBatch（每次批量渲染数量）、windowSize（预渲染窗口大小），避免一次性渲染太多项：

  <FlatList
    ...
    initialNumToRender={8} // 屏幕可见数量+2
    maxToRenderPerBatch={4}
    windowSize={5}
  />
  

如果相册里图片极多，还可以只给当前可见的项渲染禁用覆盖层，滚动到新项时再判断是否需要显示。这需要结合onViewableItemsChanged实现：

const [viewableItems, setViewableItems] = useState([]);
const viewabilityConfig = { viewAreaCoveragePercentThreshold: 50 };

// 渲染时只给可见项判断是否禁用
<FlatList
  ...
  onViewableItemsChanged={({ viewableItems }) => setViewableItems(viewableItems.map(item => item.key))}
  renderItem={({ item }) => {
    const isViewable = viewableItems.includes(item.node.image.uri);
    const shouldDisable = isViewable && selectedPhotos.length >= maxPhotos && !isSelected;
    return <CameraRollItem ... shouldDisable={shouldDisable} />;
  }}
/>

核心思路就是最小化重渲染范围，让每个列表项只在真正需要更新的时候才重新渲染，同时优化FlatList的渲染策略，这样即使处理上千张图片，更新起来也会流畅很多。

内容的提问来源于stack exchange，提问作者K.Wu