反应本机 FlatList 中的响应延迟

Question

我正在使用 <FlatList> 呈现列表：

  <FlatList

        ListFooterComponent={this.renderFooter}
        ItemSeparatorComponent={this.renderSeparator}
        refreshing={this.state.refreshing}
        onRefresh={this.doPullRefresh}
        onEndReached={this.endFooter}
        initialNumToRender={10}
        onEndReachedThreshold={0.5}
        removeClippedSubviews={false}
        data={this.state.listdata}
        renderItem={({item}) => <ListItem onPress={this.goToStuInfo} alldata={item} id={item.key} number={item.number} avatar={item.avatar} name={item.name} />}
      />

数据的总大小约为 300。所以我可以看到显示了一些数据，同时将其他数据呈现为列表项。

此时（部分数据仍在渲染中），如果我触摸一个项目，会有延迟。我必须等待很长时间才能得到回应。而且即使我按下后退按钮，我也必须等待。

有什么办法可以让列表先响应我的触摸动作吗？

我的解决方案

好吧，我通过一次渲染 10 个项目解决了这个问题。

我会在onEndReached

中推送更多数据到this.state.listdata

适合我。

Answer 1

当你触摸物品时道具会改变吗？？ 300 个列表元素没什么大不了的

"Limiting the render window also reduces the amount of work that needs to be done by React and the native platform, e.g from view traversals. Even if you are rendering the last of a million elements, with these new lists there is no need to iterate through all those elements in order to render. You can even jump to the middle with scrollToIndex without excessive rendering."

反应本机 FlatList 中的响应延迟

Response Delay in react native FlatList

react-native

react-native-flatlist