ReactNative FlatList 一次渲染所有项目？

Question

我正在使用 ReactNative 的新 List 组件 - FlatList。

即使单元格实际上在屏幕上不可见，FlatList 似乎也会一次呈现所有项目。

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

设置 30 个项目，似乎根据项目的总数调用了“渲染”警告。

我认为 FlatList 类似于 Android 中的 RecycleView 的工作方式，仅当项目即将在屏幕上可见时才呈现它。

我错过了什么吗？不会降低性能吗？
我希望它只能在项目即将显示时才呈现它。

Answer 1

在我的一个应用程序中遇到了同样的问题。为我解决这个问题花了我几个小时。

⇓⇓⇓

TDLR； 请注意，您没有将 FlatList 嵌套在 ScrollList（或其他类型的列表）中。

⇑⇑⇑

详细说明：

问题

与 Thread-Opener 相同，起初，我的 Flatlist 仅渲染我在 initialNumToRender 中定义的渲染数量，但紧接着，应用程序开始渲染整个列表的其余部分。

环境

我使用 native-base.io 作为 UI-Library 并用组件封装了屏幕的内容

解决方案

我发现，原生组件<Content> 替换了ScrollList。 ScrollList 中的 FlatList 会将您传送到奇怪的结果。 当我将给定屏幕的 -Component 替换为 <View> 时，所有事情都按预期工作。

Answer 2

FlatList 提前渲染了太多项目以获得更好的填充率。我们有类似的问题。我们构建 RecyclerListView 来解决此类问题。与 RecyclerView 非常相似，但它只是 JS。它比 FlatList 更快，并在 Flipkart 进行了实战测试。你可以试试看。

链接：https://github.com/Flipkart/ReactEssentials

您可以在此处阅读更多信息：https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

Answer 3

是一样的。在文档中，您可以找到以下内容：

为了限制内存并实现平滑滚动，内容在屏幕外异步呈现。这意味着滚动速度可能快于填充率，并且会暂时看到空白内容。这是一种权衡，可以根据每个应用程序的需求进行调整，我们正在努力在幕后对其进行改进。

所以它不会一次渲染所有项目。

此外：

这是一个 PureComponent，这意味着如果 props 保持浅相等，它将不会重新渲染。确保您的 renderItem 函数所依赖的所有内容都作为更新后不 === 的 prop（例如 extraData）传递，否则您的 UI 可能不会在更改时更新。这包括 data prop 和父组件状态。

如果您需要更多详细信息，请告诉我。