是否有一些组件可以替换 React Native 中的 Flatlist 以获得更好的性能

Question

我的问题是我正在使用 Flatlist 组件来呈现不是纯组件的项目。 它们有一堆状态、钩子和许多处理逻辑的函数。 而且，我的列表也有很多项，至少28项，因为我想在一个月内渲染一些信息。 当我获取其他月份的更多数据时，项目的数量可能会更大。 结果，我的应用程序的性能真的很慢。 有什么解决方案吗？

Answer 1

我认为你必须使用分页来提高性能。 如果您希望使用 Flatlist 获得最佳性能，您应该进行分页前和后分页。 就像您必须同时从传递给 Flatlist 的数据数组中添加和删除等量的项目一样。

即假设您想保持数组中的 50 项计数。

const [data,setData]=useState([])
const useEffect(()=>{
//fetch initial 50 items from api
  setData([...50item...])
},[])

//when scrolling down the Flatlist
onFlatlistScrollDownEndReached = ()=>{
//fetch let suppose 10 more post items from api page# wise
let prevData= data.splice(10,data.length) //remove first 10 items
let new10Items = [...10 fetched from api...]
 setData([...prevData,... new10Items])
}

//when scrolling up the Flatlist
onFlatlistScrollUpEndReached = ()=>{
//fetch let suppose 10 pre items from api page# wise
let prevData= data.splice(data.length-10,data.length) //remove last 10 items
let new10Items = [...10 fetched from api...]
 setData([... new10Items,... prevData])
}

Answer 2

尝试这些替代方案

1. FlashList：Shopify 的快速和高性能 React Native 列表

   FlashList 文档

2. RecyclerListView：Flipkart 的 React Native 和 Web 的高性能 ListView

   媒体文档