FlatList ListHeaderComponent 频繁刷新

最新推荐文章于 2025-01-24 23:56:45 发布

原创最新推荐文章于 2025-01-24 23:56:45 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

react-native 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种改进React Native中FlatList组件头部渲染的方法。通过将ListHeaderComponent设置为一个指向组件函数的指针而非内联箭头函数，可以提高应用性能。文章提供了具体的代码示例并邀请读者分享其他优化方案。

检查是不是这样写的

listHeaderComponent = () => {
    return (
     <View>
     </View>
)};

render() {
 return
   <FlatList
     data={[1,1,1,1,1]}
     keyExtractor={(item, index) =>index.toString()}
     ListHeaderComponent={() => {
        return (
             <View>
                 ...
             </View>
        )
    }
     renderItem={({index, item}) =>
       <View>
           ...
       </View>}
  />
}

修改为下面这种写法就好了

listHeaderComponent = () => {
    return (
     <View>
     </View>
)};

render() {
 return
   <FlatList
     data={[1,1,1,1,1]}
     keyExtractor={(item, index) =>index.toString()}
     ListHeaderComponent={this.listHeaderComponent()}
     renderItem={({index, item}) =>
       <View>
       ...
       </View>}
  />
}

我是这么解决的有不同方法可以共同探讨下