我的问题是,我正在使用Flatlist组件来呈现非纯组件的项。它们有许多状态、钩子和许多处理逻辑的函数。此外,我的列表中还有很多项,至少有28项,因为我想在一个月内提供一些信息。当我为其他月份获取更多的数据时,项目的数量可能会更多。因此,我的应用程序的性能真的很慢。有什么解决办法吗?
发布于 2022-08-02 10:12:52
我认为你必须使用分页来提高性能。如果您想要使用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])
}
发布于 2022-08-02 10:27:36
https://stackoverflow.com/questions/73204907
复制相似问题