javascript - 当 numColumns > 1 时防止 FlatList 重新渲染

Question

我在一个 React Native 项目中使用 FlatList 来显示一个图像 GridView ，它代表一个上传队列。

<FlatList
  extraData={this.state.images}
  data={this.state.images}
  renderItem={this.renderItem}
  keyExtractor={image => {
   return image.id;
  }}
/>



renderItem = ({item, index}) => {

    return (
      <TouchableOpacity
        id={item.id}
        delayLongPress={500}
        //onLongPress={() => this.props.onLongPressImage(item)}
      >
        <SingleImage
          onFinishUpload={this.props.onFinishUpload}
          index={index}
          item={item}
          title={this.props.title}
        />
      </TouchableOpacity>
    );
};

每次添加或删除图像时，只要我设置 numColumns > 1，就会重新渲染其他图像，并触发 SingeImage 类的 componendDidMount。

这是个问题，因为我在 componendDidMount() 中开始上传特定图像，每次上传成功时，图像都会从 FlatList 中删除。所有其他正在上传的图像都将重新安装并重新开始它们的上传过程。

如果我只显示一行且未设置 numColumns，则列表的每个元素只渲染一次，一切正常。

我是否遗漏了什么或如何防止列表重新呈现数据数组被修改的每个项目？

Answer 1

首先，请务必记住重新渲染和重新安装之间的区别。重新渲染是非常好的组件(SingleImage)，但不能重新安装它们，因为在这种情况下组件会被销毁并重新创建，当然会丢失状态

现在进入正题:FlatList延伸VirtualizedList

Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and replacing all items outside of the render window with appropriately sized blank space

简而言之，FlatList 不会实例化并保持您创建的所有要渲染的组件实例。想象一个包含 10000 个项目的列表，它不会创建 10000 个 SingleImage 实例并让它们保持事件状态。相反，它将只创建其中的几个(通常与屏幕上一样多)，并且当您滚动时，先前渲染的结果将被丢弃，这些“插槽”将被重新用于具有其他数据的项目。这就是虚拟化的本质，它可以通过只绘制一小部分数据来显示无限大的列表

“绘图”是这里的关键(这就是为什么该 Prop 被称为 renderItem，而不是 Item)。它只会在“插槽”上画一些东西而忘记它。这就是 您无法在 FlatList 的 renderItem 中呈现有状态组件的原因。这些项目的内部状态不会在重新渲染时保留

执行此操作的正确方法是在 FlatList 之外处理图像上传，并且仅使用 FlatList 绘制具有无状态组件的 UI。作为一种更便宜的替代方案，如果你真的想在一个 SingleImage 组件中保留逻辑和表示，你可以使用 this.state.images.map 而不是 FlatList(就像你会在 React web 中执行)以确保同时呈现所有项目并在重新呈现时保留它们的身份

我想，如果没有 numColumns 属性集，它不会出错的原因是，numColumns 触发了一些额外的重新渲染，但有额外的重新渲染 非常好并且不是问题的根源。基本上，如果没有 numColumns，您只是走运，因为列表中没有足够的项目来进行虚拟化。如果您添加更多项目，即使没有 numColumns

，您也会观察到相同的效果