当有一个大列表时，平面列表是滞后的，有时会在 react native 中崩溃应用程序答案

【问题标题】：When there is a large list , flat list is laggy and sometimes crashing app in react native当有一个大列表时，平面列表是滞后的，有时会在 react native 中崩溃应用程序
【发布时间】：2018-10-11 09:49:08
【问题描述】：

请帮助我。当列表很大时，平面列表会滞后，有时会在 react native 中崩溃。

我尝试过优化列表：它不显示图像，我尝试过 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}

                      />
                    )}

这是组件类

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：您有一个更新缓慢的大型列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，例如 PureComponent、shouldComponentUpdate 等。 {"dt":1098,"prevDt":684,"内容长度":6832}

【问题讨论】：

尝试删除 initialNumToRender 并为您的用例调整 windowSize。此外，您可以尝试 legacyImplementation={true} 并玩弄
感谢您的回复，我现在自己试试
多大是多大？您要渲染多少个项目？ Flatlist 是已经为 React Native 优化的列表。请同时添加 ExampleComponent 的代码。
100 多行后的项目数量很大，它的滞后和崩溃
而且当我将平面列表包装在滚动视图中时，onendreached 被称为无限次并且应用程序崩溃并且当我删除滚动视图时 onendreached 被正确调用

标签： react-native react-native-flatlist

【解决方案1】：

由于 Flatlist 的性能取决于每个实现，因此您可以按照这些建议来帮助您解决问题。

尝试这些方法的组合：

启用或禁用 legacyImplementation
启用或禁用禁用虚拟化
增加或减少onEndReachedThreshold的值
增加或减少windowSize的值
增加或减少maxToRenderPerBatch的值
实施 shouldComponentUpdate
从 ExampleComponent 中移除构造函数
仅为 Android 启用 removeClippedSubviews
使用更简单的 keyExtractor，如果可能的话，使用数字。

其实from the docs:

默认提取器检查 item.key，然后回退到使用索引，就像 React 一样。

还有

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

或者

尝试使用RecyclerListview 组件。

进一步阅读

【讨论】：

Flatlist 原生在 android 中使用 RecyclerListView。
@MatinZD 我试图在官方存储库中找到它，但没有找到任何相关的东西，或者可能在我回答时Flatlist 没有使用它。如果您可以与我们分享您在哪里看到的，我们可以将其添加到答案中以使其更完整，对于 Android 开发人员，请记住它可能是 IOS 开发人员的替代方案。

【解决方案2】：

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

【讨论】：