FlatList renderItem 被多次调用

Question

我在做什么 ？

尝试根据存储在state.data. 有一个按钮，按下后会在 中附加一个新项目state.data。

问题是什么 ？

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

例如： when state.data.length=3，然后在初始渲染时，renderItem 被调用的次数正好是 3 次，这state.data与按下按钮时的项目数相同，按钮将新项目附加到state.datanowstate.data.length=4并且 renderItem 被调用 8 次，即2*state.data.length次数。

但是，当state.data.length=11，然后在初始渲染时，renderItem 被精确调用 21 次，并且在按下将新项目附加到state.data现在的按钮时，state.data.length=12renderItem 被调用 23 次，这偏离了2*state.data.length行为。

我在期待什么？

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

我试过什么？

1. 从头开始创建一个新项目来测试这种行为，但没有运气。
2. 在 renderItem PureComponent 中制作组件。仍然与提到的行为相同。
3. 在https://codesandbox.io/s/react-native-nn73t 上使用 react-native-web制作了一个 CodeSandbox，其行为与以前相同。请参阅此沙箱以获取代码。
4. 使用诸如 maxToRenderPerBatch、initialNumsToRender 等道具但也无济于事。虽然使用相对较大的它们state.data确实会减少调用 renderItem 的次数，但仍然没有那么大的减少。
5. 提到了类似的问题，但不太清楚
   • FlatList renderItem 被多次调用>
   • FlatList onEndReached 被多次调用

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

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

Answer 1

我浏览了您的代码并尝试了解您的担忧。

(renderItem ~ FlatList 的道具) 注意：-当使用 flatlist 时，你的列表项应该是纯组件或者应该实现 shouldComponentUpdate 否则它们会比预期的渲染更多的时间

因此，请记住以下几点，您的 flatlist 项目已按规定实施。

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

尝试在共享的项目链接中按（添加项目不可变 文本），您会更好地理解。 检查这个项目。

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

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

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

这是一些道具的默认值，有助于控制权衡

maxToRenderPerBatch: 10,

onEndReachedThreshold: 2, // 长度的倍数

scrollEventThrottle: 50,

updateCellsBatchingPeriod: 50,

windowSize: 21, // 长度的倍数

为了更清楚地理解，我们需要了解 VirtualizedList 是如何实现的。在挖掘更多信息后，我肯定会更新这个答案。