避免为列表中的每个项目重新渲染 ListHeaderComponent
在我的 React Native Function 组件中，我使用 Expo FlatList 来显示许多图像来自 Google firebase 存储。
这样做时，我注意到 ListHeaderComponent 为每个单独的事件呈现。
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
and so on...
由于我还从 ListHeaderComponent 中的 Local Sotrage 查询数据，这会导致负载过重。
有谁知道如何避免重新渲染 ListHeaderComponent ？
In my React Native Function component I use Expo FlatList to display many images from the Google firebase storage.
In doing so, I noticed that the
ListHeaderComponent is rendered for each individual event.
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
Storage loaded:
"1645357882600"
######################################
and so on...
Since I also query data from the Local Sotrage in the ListHeaderComponent, this leads to a heavy load.
Does anyone have an idea how I can avoid the rerendering the ListHeaderComponent?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不知道这是否是一个好的或正确的解决方案，但它对我有用，感觉像是一种解决方法。
在 ListHeaderComponent 中创建一个 useEffect 并使用数组将其绑定到一个 State。
I don't know if this is a good or the right solution, but it works for me an feels like a workaround.
In the ListHeaderComponent create a useEffect and bind this to one State using the Array.