react-native - FlatList renderItem 被多次调用

Question

我在做什么 ？

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

问题是什么 ？

按下按钮后，我希望仅调用 renderItem state.data.length被调用的次数 2*state.data.length次数。此外，这种 2x 行为并不总是一致的，并且会随着 state.data.length 而变化。增加。

例如:当 state.data.length=3 ，然后在初始渲染时，renderItem 被调用的次数正好是 3 次，这与 state.data 中的项目数相同并按下按钮将新项目附加到 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 中制作组件。仍然与提到的行为相同。

在 https://codesandbox.io/s/react-native-nn73t 制作了一个 CodeSandbox与 react-native-web 具有与以前相同的行为。请参阅此沙箱以获取代码。

使用诸如 maxToRenderPerBatch、initialNumsToRender 等 Prop 但也无济于事。虽然使用它们与相对较大的 state.data确实减少了调用 renderItem 的次数，但仍然没有那么大的减少。

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

FlatList renderItem is called multiple times >

FlatList onEndReached being called multiple times

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

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

Answer 1

我浏览了您的代码并尝试了解您的担忧。
(renderItem ~ FlatList 的 Prop )
注意:- 当使用 flatlist 时，你的列表项应该是纯组件或者应该实现 shouldComponentUpdate 否则它们会比预期的渲染更多的时间
因此，请记住以下几点，您的 flatlist 项目已按规定实现。

根据您对性能的关注，尽管多次调用 renderItem 也不会有任何问题。当您检查项目实际呈现的次数(通过项目呈现中的 console.log() )时，该行为符合预期。
所以你的 项目实际上并没有被渲染 只有 flatList 中的 renderItem 被调用了很多次。

尝试在共享的项目链接中按 (Add Item Immutably text) 你会更好地理解。
Check This project .

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

好吧，即使我不知道事情是如何实现的，但根据我在文档中读到的内容，我只会分享一些可能有帮助的内容。
“为了限制内存并启用平滑滚动，内容在屏幕外异步呈现。这意味着滚动速度可能比填充率更快，并且可能会暂时看到空白内容。这是一种权衡，可以进行调整以满足每个应用程序的需求，我们正在幕后努力改进它。”
这是一些 Prop 的默认值，有助于控制权衡
maxToRenderPerBatch: 10,
onEndReachedThreshold: 2,//长度的倍数
scrollEventThrottle: 50,
updateCellsBatchingPeriod: 50,
windowSize: 21,//长度的倍数
为了更清楚地理解，我们需要了解 VirtualizedList 是如何实现的。在挖掘更多信息后，我肯定会更新这个答案。