Question

在我的应用程序中，我有一个 FlatList，其中包含 100 个项目的数据集。每个项目都有一个复杂的用户界面，我注意到它对性能造成了很大的影响。包含列表的页面最多需要 5 秒才能加载。我注意到在第一次渲染组件的那一刻，renderItem 的 FlatList 函数也被调用为我的数据集中的每个项目，我还注意到如果有该页面上其他内容的任何其他 setState 更改。有没有办法防止重新渲染平面列表，或者至少只重新渲染可见项目 - 就像在原生 Android 中使用 Recycle 一样？如何仅在组件首次出现时呈现可见项？我尝试使用 initialNumToRender 和 maxToRenderPerBatch，但都没有奏效。

以下是代码示例：

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {

  const [text, setText] = React.useState('')

  const renderItem = ({ item }) => {
    console.log("Render Item")
    return (<Item title={item.title} />)
};

  return (
    <SafeAreaView style={styles.container}>

      <TextInput
        value={text}
        onChangeText={(val) => setText(val)}
      />

      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
        initialNumToRender={6}
        maxToRenderPerBatch={6}
      />

    </SafeAreaView>
  );
}

如果我尝试在 TextInput 中输入一些内容，整个列表会重新呈现，但列表中的任何内容都没有改变..我该如何防止这种情况发生？

FlatList 渲染对于大数据集来说很重

0 个答案: