Question

我有一个简单的供稿，可以在其中使用FlatList来加载帖子，并且它具有的页面在达到特定点后也可以加载。一段时间后，它运行良好，可以完美地加载页面，但过了几页，它就会开始出现毛刺，有时会消失。

我上传了有关该问题的这个GIF https://i.stack.imgur.com/zPhkg.gif

 <SafeAreaView style={Common.container}>
          <FlatList
            ref={ref => {
              this.flatListRef = ref;
            }}
            ListEmptyComponent={<LandingImage />}
            showsVerticalScrollIndicator={false}
            data={this.state.dataSource}
            onEndReached={()=> handleLoadMore(this)}
            onEndReachedThreshold={0.5}
            onRefresh={() => handleRefresh(this)}
            refreshing={this.state.refreshing}
            ItemSeparatorComponent={RenderSeparator}
            renderItem={({item, index}) => this.renderData(item, index)}
            keyExtractor={({item, index}) => index}
          />
          <NewPost
            goCreatePost={() =>
              this.props.navigation.navigate('CreatePost', {
                edit: false,
                refresh: () => handleRefresh(this),
                screen: 'Home',
              })
            }
          />
  </SafeAreaView>

Answer 1

如果列表中现有的renderItem组件是基于类的，并且在您handleLoadMore()时预计不会更改，请考虑让它们扩展React.PureComponent而不是React.Component。只要它们保持浅到等于渲染之前的水平，就可以做出反应以跳过重新渲染它们。这是处理内部未更改或包含可变嵌套数据的大数据集的建议方法。

什么原因导致React Native的FlatList中出现故障？

1 个答案: