当列表很大时，平面列表会滞后，有时会在本机反应中崩溃应用程序

Question

请帮助我。当有一个大列表时，平面列表是滞后的，有时会在反应本机中崩溃应用程序。

我试过优化列表：它不显示图像，我试过 react-native 大列表。没有任何效果。

这是代码：

 {loading == false && (
                      <FlatList
                        data={this.state.data}
                        numColumns="2"
                        renderItem={({ item }) => <ExampleComponent url= 
                        {item.media} />}
                        keyExtractor={(item, index) => item.itemurl}
                        windowSize={15}
                        onEndReachedThreshold={1}
                        onEndReached={this.handleLoadMore}
                        removeClippedSubviews={true}
                        maxToRenderPerBatch={10}

                      />
                    )}

这是组件 class

import React, { PureComponent } from "react";
import { View, Text, StyleSheet, Image ,TouchableOpacity } from "react-native";
import FastImage from "react-native-fast-image";
export default class ExampleComponent extends PureComponent {
  constructor(props) {
    super(props);
    //console.log(this.props);
  }

  render() {
    return (
        <TouchableOpacity style={styles.imageContainer}>
      <View >
        <FastImage
          source={{
            uri:this.props.url
          }}
          style={styles.imageStyle}
        />
      </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#dedede",
    borderRadius: 5,
    margin: 5
  },
  imageStyle: {
    flex: 1,
    width: null,
    height: 100,
    borderTopLeftRadius:5,
    borderTopRightRadius:5
  },

});

And im getting this message in console when rows are more

这是句柄加载更多功能

handleLoadMore = () => {
console.log("Called");

if (this.state.next != 0) {
  const u =
    "https://url&q=" +
    this.props.navigation.state.params.data +
    "&pos=" +
    this.state.next;
  fetch(u, {
    method: "GET"
  })
    .then(res => res.json())
    .then(response => {
      this.setState({
        data: [...this.state.data, ...response.results],
        next: response.next
      });
    });
}

}

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc. {"dt":1098,"prevDt":684,"contentLength":6832}

Answer 1

由于 Flatlist 的性能取决于每个实现，您可以按照这些建议来帮助您处理您的情况。

尝试组合使用这些方法：

启用或禁用 legacyImplementation
启用或禁用 disableVirtualization
增加或减少 onEndReachedThreshold 的值
增大或减小 windowSize 的值
增大或减小 maxToRenderPerBatch 的值
实施 shouldComponentUpdate
从 ExampleComponent 中删除构造函数
仅为 Android
使用更简单的 keyExtractor，可能的话使用数字。

实际上from the docs:

The default extractor checks item.key, then falls back to using the index, like React does.

还有

检查您的渲染方法，在 ExampleComponent 和您使用 FlatList 的组件中加载和渲染了多少项目。

或者

尝试使用 RecyclerListview 组件。

进一步阅读

Answer 2

在 ScrollView 中包装整个 Flatlist 对我有用。

当列表很大时，平面列表会滞后，有时会在本机反应中崩溃应用程序

When there is a large list , flat list is laggy and sometimes crashing app in react native

react-native

react-native-flatlist