大型列表的React-Native FlatList性能问题 [英] React-Native FlatList performance problems with large list

问题描述

我的代码将Json数据发送到数组，使用 FlatList 列出数据。它看起来像电话簿照片和文本连续。

My code gets Json data to an array lists the data using a FlatList. It looks like a phonebook photo and text in a row.

这是我的代码：

  renderItem = ({ item }) => 
    (
    <ListItem
      title={item.username}
      avatar={{ uri: item.photo }}
    />
    )


  render() {
    console.log(this.state.myData);
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.myData}
          renderItem={this.renderItem}
        />
      </View>
    );
  }

它有效，我得到输出，但性能很慢。渲染大约需要10秒钟，这对用户来说很烦人。我该怎么办才能让它更快？

Its works and I get the output, but the performance is slow. Rendering takes approximately 10 seconds which is annoying to the user. What should I do to make it faster?

推荐答案

以下是一些可以优化平板列表的改进：

Here are some improvements you can do to optimize your flatlist:

1. 分页
   
   
   
   
   • 您可以在后端对数据进行分页并在您的后端重新获取滚动越来越接近尾声。 onEndReached 和 onEndReachedThreshold 可以帮助你。
   
   

1. Pagination
   • You can paginate your data in your backend and refetch it when your scroll gets closer to the end. onEndReached and onEndReachedThreshold can help you.

• Fiber 16具有惊人的性能提升，使一切运行得更快更顺畅

• PureComponent 提高了组件的渲染和内存使用率，创建纯粹的渲染项可以提供更好的性能体验

• PureComponent improves the rendering and memory usage of your component, creating render items as pure gives you a better performance experience

• 它改进了项目渲染，因为React以前会知道它的布局定义

希望有所帮助

这篇关于大型列表的React-Native FlatList性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！