是什么导致 React Native 中的 FlatList 出现故障？答案

【问题标题】：What cause glitching in FlatList in React Native?是什么导致 React Native 中的 FlatList 出现故障？
【发布时间】：2019-11-04 16:42:00
【问题描述】：

我有一个简单的提要，我使用 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>

【问题讨论】：

增加 onEndReachedThreshold

标签： reactjs react-native react-native-flatlist

【解决方案1】：

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

【讨论】：