"Flatlist 在 React Native 中使用大數據非常慢"

Question

我有一個分頁的產品大數據列表，每頁加載 10 個項目，但是當我向項目列表添加新項目時，平面列表變得非常慢，隨着頁數的增加，新產品的加載時間也會增加，選擇按鈕的功能也變慢了。 如何加快加載速度我嘗試了所有最好的方法，但仍然沒有奏效。 React Native 沒有真正解決這個問題嗎？

 export default function Products(props) {
 const toast = useToast();
 const [isLoading, setSetIsLoading] = useState(true);
 const [items, setItems] = useState([]);
  const [fetchStatus, setFetchStatus] = useState(false);
  const [page, setPage] = useState(1);
  const [sending, setSending] = useState(false);

  async function getProducts() {
  let token = await AsyncStorage.getItem('@token');
  let data = {
  token: token,
  page: page,
  };
  await get_products(data)
  .then(res => {
    setItems([...items, ...res.data.data.docs]);
    setPage(res.data.data.nextPage);
  })
  .catch(err => {
    console.log(err);
  });
 }

 async function getNextPage() {
let token = await AsyncStorage.getItem('@token');
let data = {
  token: token,
  page: page,
};
await get_products(data)
  .then(res => {
    setItems([...items, ...res.data.data.docs]);
    setPage(res.data.data.nextPage);
  })
  .catch(err => {
    console.log(err);
  });
 }

 async function selectProduct(id) {
 setSending(true);
 console.log({id});
 let token = await AsyncStorage.getItem('@token');
 let data = {
  product_id: id
 };
 await select_products(data,token).then(res => {
 toast.show({
   description:res.data.message
 })
 setSending(false);
}).catch(rej => {
  console.log({rej})
  toast.show({
    description:rej?.response?.data.message,
  })
  setSending(false);
  })
  }
  useFocusEffect(
  React.useCallback(() => {
  getProducts();
  return () => {
    setItems([]);
    setPage();
    };
   }, []),
 );
 renderItem =({item}) => (
 <Card
  selectProduct={id => selectProduct(id)}
  sending={sending}
  obj={item}
  />
  )
  return (
    <View mb={20}>
    <FlatList
    data={items}
    extraData={items}
    removeClippedSubviews={true}
    renderItem={renderItem}
    keyExtractor={(item) => `${item._id}-item`}
    onEndReached={getNextPage}
    maxToRenderPerBatch="13"
    ListFooterComponent={() => {
      return <ActivityIndicator color="orange" size="large" />;
    }}></FlatList>
    </View>
    );
    }

Answer 1

你有沒有使用**map方法**？ 它可以幫助您更輕松地加載數據

"