React Native Flatlist,分页工作缓慢

时间:2019-10-30 07:50:16

标签: reactjs react-native native mobx

错误:您的清单很大,更新速度很慢-确保您的renderItem函数呈现遵循React性能最佳实践的组件,例如PureComponent,shouldComponentUpdate等。

-v

"react-native": "0.59.8",
"mobx": "^5.9.4",
"mobx-react": "^5.4.3",

我已经研究了这个问题,但是答案对我没有用

平面列表

              <FlatList
                ref={(ref) => { this.flatListRef = ref; }}
                initialNumToRender={10}
                refreshing={GozlemStore.getRefreshing}
                //onRefresh={async () => GozlemStore.onRefreshx()}
                data={GozlemStore.filtered}
                renderItem={this.renderItem}
                keyExtractor={(item, index) => index.toString()}
                onEndReached={this.loadMore}
                onEndReachedThreshold={0.5}
                onMomentumScrollBegin={() => {
                  this.onEndReachedCalledDuringMomentum = false;
                }}
              />

渲染项功能,在此功能中,我正在使用观察者对象进行监听。

renderItem = ({ item }) => { <Observer>...</Observer>}

为分页加载更多工作

  loadMore = () => {
    if (!this.onEndReachedCalledDuringMomentum) {
      this.props.GozlemStore.loadMoreSideStore();
      this.onEndReachedCalledDuringMomentum = true;
    }
  };

页面更改

   @action loadMoreSideStore = () => {
        this.page = this.page + 1;
      };


 @observable page = 1;
  @computed get filtered() {
    let filteredList = [];
     ....
    if (filteredList.length > 0) {
      let firstChar = this.turkceKarakter(this.filterTermValue)[0];
      filteredList = filteredList.sort(function (a, b) {
        if (a.ad < b.ad) { return -1; }
        if (a.ad > b.ad) { return 1; }
        return 0;
      })

      return filteredList;
    }
    return this.misafirList.slice(0, 25 * this.page);
  }

0 个答案:

没有答案