避免为列表中的每个项目重新呈现 ListHeaderComponent

Question

在我的 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？

Answer 1

我不知道这是一个好的解决方案还是正确的解决方案，但它对我有用，感觉像是一种解决方法。

在 ListHeaderComponent 中创建一个 useEffect 并使用 Array 将其绑定到一个 State。

useEffect(() => { getCurrentEvent() }, [isActive]);

避免为列表中的每个项目重新呈现 ListHeaderComponent

Avoid rerender of ListHeaderComponent for each item in list

javascript

firebase

react-native

expo

react-native-flatlist