反应本机平面列表数据更改渲染

Question

我有一个FlatList。 我在此链接中应用了技巧https://github.com/filipemerker/flatlist-performance-tips

当用户滚动列表时，我正在更新新项目的数据。 但是在更新数据时，列表中有一些缓慢的地方，还有一些错误。 我尽可能使用纯组分。 我该怎么办。 顺便说一句，我想在列表的末尾添加loading（活动指示器）。 我该怎么做，您能举个例子或链接吗。

如果您有帮助，我将很高兴谢谢您。

Answer 1

React Native Pure组件以浅薄的同情实现了shouldComponentUpdate。 通过在Component上实现自己的shouldComponentUpdate方法，可以严格检查要在其上更新数据的道具。

shouldComponentUpdate(nextProps, nextState) {
      return this.props.name !== nextProps.name;
    }

要添加活动指示器，请使用ListFooterComponent的ListFooterComponent属性。 例如 ：

footerLoadingIndicator = () => {
return (
  <View style={styles.footerContainer}>
      <Progress.CircleSnail
          size={30}
          thickness={2.5}
          direction={'clockwise'}
          duration={400}
          color={'#22a790'}
        />
  </View>
);

我使用了第三方指标。 您可以将其替换为AcitivityIndicator