ReactNative FlatList 一次渲染所有项目？

Posted 2023-02-16

【中文标题】ReactNative FlatList 一次渲染所有项目？

【英文标题】：ReactNative FlatList render all items at once?

【发布时间】：2018-01-18 12:23:18

【问题描述】：

我正在使用 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 的工作方式，仅当项目即将在屏幕上可见时才呈现它。

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

【问题讨论】：

我也遇到过同样的问题。所有行都立即呈现，无需向下滚动

我在物理设备上看到了这个问题，但在模拟器上没有。它在向屏幕显示任何内容之前渲染所有行。

@itinance Josh 你是否以某种方式解决了这个问题？

【参考方案1】：

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

⇓⇓⇓

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

⇑⇑⇑

详细说明：

问题

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

环境

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

解决方案

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

【讨论】：

嘿，@suther 我也遇到过同样的问题 :)，但我不能很好地理解您的解决方案？你的意思是替换<Content> with <View>？

参见“TDLR”。考虑到这一点，您会发现，NativeBase.io 的 <Content>-Component 提供了自己的 ScrollLists see the SourceCode here,。为确保您不会将 FlatList 嵌套到 ScrollList 中，可能会解决您的问题。祝你好运。

【参考方案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

【讨论】：

我查过了，很好，如果有一个用钩子代替夹子的例子就更好了

【参考方案3】：

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

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

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

此外：

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

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

【讨论】：

我有一个包含 10 个项目的 FlatList。其中只有 2 个同时可见。每个 renderChild 返回的组件都会渲染一个 Image。然而，对这些图像的所有请求都是在呈现 FlatList 时发出的（尽管只有 2 个项目可见）

我有一个包含 1000 个启用疼痛的项目的平面列表。它仍然渲染 100 多个项目。这令人毛骨悚然。并且因为我使用 redux，每次我滑动一个页面，所有 100 个项目并再次增加渲染。

@DanielJosePadillaPeña 我也面临同样的问题，您找到解决方案了吗？ FlatList 在里面渲染 ScrollView，我似乎找不到解决方案。检查堆栈溢出或检查 github 问题似乎无法解决这个问题。

@DanielJosePadillaPeña 你找到解决方案了吗？