如何在 React Native 中優化 FlatList

Question

你能告訴我如何在 React Native 中優化這個平面列表嗎？ 我的意思是我該怎么做該應用程序將不呈現整個數據列表，而只呈現其中的一小部分，例如 10 個項目，然后當用戶向下滾動它時，它將從列表中加載更多數據？

這就是代碼

import React, {useState, useEffect} from 'react';
import {
  SafeAreaView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  FlatList,
  TextInput,
} from 'react-native';
import {newdata} from '../Data/newdata';

const Sample = () => {
  const DATA = newdata;
  const [searchText, onChangeSearch] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    const filtered = DATA.filter(item =>
      item.title.toLowerCase().includes(searchText.toLowerCase()),
    );
    if (searchText === '') {
      return setFilteredData(DATA);
    }

    setFilteredData(filtered);
  }, [searchText]);

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

  const renderItem = ({item}) => <Item title={item.title} />;

  return (
    <SafeAreaView style={styles.container}>
      <TextInput
        style={{
          height: 50,
          borderColor: '#919191',
          borderWidth: 1,
          margin: 10,
          paddingLeft: 15,
          borderRadius: 10,
        }}
        onChangeText={newText => onChangeSearch(newText)}
        placeholder="Axtaris..."
      />
      <FlatList
        data={filteredData}
        renderItem={renderItem}
        keyExtractor={(item, index) => item.key}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
    marginBottom: 75,
  },
  item: {
    backgroundColor: '#ededed',
    padding: 20,
    marginVertical: 2,
    marginHorizontal: 10,
    borderRadius: 20,
  },
  title: {
    fontSize: 20,
  },
});

export default Sample;

PS newdata 有大約42000 項，應用程序運行很慢。 這是app的截圖

Answer 1

您可以通過在 FlatList 組件中使用initialNumToRender道具輕松實現這一點

初始批次中要渲染的項目數。 這應該足以填滿屏幕，但不會更多。 請注意，這些項目永遠不會作為窗口渲染的一部分被卸載，以提高滾動到頂部操作的感知性能。

  <FlatList
    data={filteredData}
    renderItem={renderItem}
    keyExtractor={item => item.key}
    initialNumToRender={10}
  />

Answer 2

阿里，

Flatlist 中有一些功能可以優化它，例如：

maxtorenderperbatch ：這控制每批渲染的項目數量，這是在每個滾動上渲染的下一個項目塊。 在這里閱讀更多

initialNumToRender ：定義將覆蓋每個設備屏幕的項目的精確數量。 [在這里閱讀更多][1]

此外，您可以使用 Infinite Scroll，它非常有用，而不是渲染整個列表，您可以只渲染一定數量的項目，當用戶滾動到最后時，應用程序會加載更多項目。

onEndReached ：當滾動 position 進入渲染內容的 onEndReachedThreshold 時調用一次。

onEndReachedThreshold ：列表的底邊距離末尾的距離（以列表的可見長度為單位）必須距離內容的末尾多遠才能觸發 onEndReached 回調。

這是一個如何使用它的例子。

<FlatList
    data={filteredData}
    renderItem={renderItem}
    keyExtractor={(item, index) => item.key}

    onEndReached={ loadMoreItems }
    onEndReachedThreshold={ 0.5 }
    maxToRenderPerBatch={3}
    initialNumToRender={5}

  />

加載更多項目：

const loadMoreItems = ( ) => {
        
       // Here you logic to render more items, when user scroll to the end
}