react-native - FlatList renderItem被多次调用

我在做什么？

尝试根据state.data中存储的某些项目呈现FlatList。存在一个按钮，按下该按钮会在state.data中追加一个新项目。

有什么问题？

按下按钮后，我期望renderItem只能被调用state.data.length次数，而它却被调用2*state.data.length次数。同样，此2x行为并不总是一致的，并且随着state.data.length的增加而变化。

例如:当state.data.length=3时，然后在初始渲染时，renderItem的调用次数恰好是state.data中的项目数量的3次，并且在按下按钮后将新项附加到state.data上，现在state.data.length=4和renderItem被调用了8次，即2*state.data.length时间。

但是，当state.data.length=11时，则在初始渲染时，将完全调用renderItem 21次，并且在按下按钮后将新项目追加到state.data上，现在state.data.length=12和renderItem被调用23次，这与2*state.data.length行为有所不同。



我期望什么？

在初始和后续渲染中，renderItem仅被调用state.data.length的次数。

我尝试了什么？

从头开始创建一个新项目，以测试此行为，但没有运气。

renderItem PureComponent内部的组件。仍然与上述行为相同。

使用react-native-web在https://codesandbox.io/s/react-native-nn73t上创建一个CodeSandbox，其行为与以前相同。请引用此沙箱以获取代码。

使用 Prop ，例如maxToRenderPerBatch，initialNumsToRender等，但均无济于事。尽管将它们与较大的state.data一起使用确实会减少renderItem的调用次数，但仍不会有太大的减少。

提出了类似的问题，但不清楚

FlatList renderItem is called multiple times>

FlatList onEndReached being called multiple times

我面临的真正问题是当我试图在FlatList中呈现聊天消息(通过API调用获取并将其设置在状态内)时。目前，大约有200条消息，其renderItem在800-1200次范围内被调用，这对性能造成了影响。

这种行为是否超出我的预期？
如果是，那么背后的逻辑是什么。如果否，那么我在这里做错了什么？

最佳答案

我仔细阅读了您的代码，并尝试了解您的关注。

(renderItem〜FlatList的prop)
注意:-在使用平面列表时，列表项应为纯组件或应实现shouldComponentUpdate，否则它们将比预期的渲染更多时间

因此，请牢记以下要点，您的 list 列表项目已按规定实现。

根据您对性能的关注，尽管renderItem被调用了很多次，但不会有任何问题。当您检查项目实际被渲染多少次(通过项目渲染中的console.log())时，行为是预期的。
因此，您的项目实际上并未得到渲染，仅是flatList中的renderItem被调用了很多次。

尝试在共享的项目链接中按(添加不可变的文本)，您会更好地理解。
Check This project。

所以现在剩下的问题是，为什么renderItem被称为意外次数，以及如何了解幕后发生的事情？

好吧，即使我也不知道事情是如何实现的，但是根据我在文档中阅读的内容，我只会分享一些可能有帮助的内容。

“为了限制内存并实现流畅的滚动，内容会在屏幕外异步呈现。这意味着滚动速度可能比填充率快，并且暂时会看到空白内容。这是一个折衷方案，可以根据每个应用程序的需要进行调整，我们正在幕后进行改进。”

这是少数 Prop 的默认值，有助于控制权衡

maxToRenderPerBatch:10，

onEndReachedThreshold:2，//长度的倍数

scrollEventThrottle:50，

updateCellsBatchingPeriod:50，

windowSize:21，//长度的倍数

为了更清楚地了解，我们需要了解VirtualizedList的实现方式。在挖掘更多内容后，我一定会更新此答案。

关于react-native - FlatList renderItem被多次调用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58651169/