FlatList renderItem 被多次调用 [英] FlatList renderItem is being called multiple times

问题描述

我在做什么?

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

Trying to render a FlatList based on some items stored in state.data. A button is present which upon press appends a new item in state.data.

有什么问题?

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

Upon pressing the button, I'm expecting that the renderItem to be called only state.data.length number of times whereas it's being called 2*state.data.length number of times. Also, this 2x behaviour is not always consistent and changes as state.data.length increases.

例如:当 state.data.length=3 时，则在初始渲染时，renderItem 被调用的次数正好是 3 次，这与 state.data 中的项目数相同 并按下按钮将新项目附加到 state.data 和现在 state.data.length=4 并且 renderItem 被调用 8 次，即 2*state.data.length 次.

Ex: when state.data.length=3, then on initial render, number of times renderItem is called exactly 3 times which is same as the number of items in state.data and upon pressing button which appends a new item to state.data and now state.data.length=4 and renderItem is called 8 times i.e. 2*state.data.length times.

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

But, when state.data.length=11, then on initial render, renderItem is called exactly 21 times and upon pressing button which appends a new item to state.data and now state.data.length=12 and renderItem is called 23 times times which deviates from 2*state.data.length behaviour.

我在期待什么?

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

renderItem to be called only state.data.length number of times on initial and subsequent renderings.

我尝试过什么?

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

1. Created a new project from scratch to test this behaviour with no luck.
2. Made component inside renderItem PureComponent. Still the same behaviour as mentioned.
3. Made a CodeSandbox at https://codesandbox.io/s/react-native-nn73t with react-native-web with the same behaviour as before. Please refer this sandbox for the code.
4. Using props such as maxToRenderPerBatch, initialNumsToRender etc but to no avail either. Though using them with relatively large state.data does bring down the number of times renderItem is called but it's still not that great decrease.
5. Referred similar questions but couldn't get much clarity
   • FlatList renderItem is called multiple times>
   • FlatList onEndReached being called multiple times

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

The real issue I'm facing is when I'm trying to render chat messages (fetching through API call and setting it inside the state) inside a FlatList. Right now there are about ~200 messages for which the renderItem is being called in a range of 800-1200 times which is taking a hit on the performance.

这种行为是否偏离了我的预期?如果是，那么这背后的逻辑是什么.如果不是，那么我在这里做错了什么?

Is this behaviour which is deviating from my expectation expected ? If yes, then what's the logic behind this. If no, then what am I doing wrong here ?

推荐答案

我查看了您的代码并尝试理解您的顾虑.

I went through your code and tried understanding your concern.

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

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

So the below points are keeping in mind that your flatlist item are implemented as stated.

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

尝试在共享的项目链接中按 (Add Item Immutably text) 你会更好地理解.检查这个项目.

try pressing (Add Item Immutably text) in the project link shared you will understand better. Check This project.

1. 那么现在剩下的问题是为什么 renderItem 被调用的次数出乎意料，以及如何理解幕后发生的事情?

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

Well even i am unaware of how things are implemented but as per what i read in docs i will just share few content that may help.

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

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

and this is default value of few props which helps in controlling the tradeoff

maxToRenderPerBatch: 10,

maxToRenderPerBatch: 10,

onEndReachedThreshold: 2,//长度的倍数

onEndReachedThreshold: 2, // multiples of length

scrollEventThrottle: 50,

scrollEventThrottle: 50,

updateCellsBatchingPeriod: 50,

updateCellsBatchingPeriod: 50,

windowSize: 21,//长度的倍数

windowSize: 21, // multiples of length

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

for understanding more clearly , we need to understand how VirtualizedList is implemented. I will surely update this answer after digging more.

这篇关于FlatList renderItem 被多次调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！