首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为了获得更好的性能,是否有一些组件可以在React本机中替换Flatlist

为了获得更好的性能,是否有一些组件可以在React本机中替换Flatlist
EN

Stack Overflow用户
提问于 2022-08-02 09:14:16
回答 2查看 149关注 0票数 0

我的问题是,我正在使用Flatlist组件来呈现非纯组件的项。它们有许多状态、钩子和许多处理逻辑的函数。此外,我的列表中还有很多项,至少有28项,因为我想在一个月内提供一些信息。当我为其他月份获取更多的数据时,项目的数量可能会更多。因此,我的应用程序的性能真的很慢。有什么解决办法吗?

EN

回答 2

Stack Overflow用户

发布于 2022-08-02 10:12:52

我认为你必须使用分页来提高性能。如果您想要使用Flatlist的最佳性能,您应该做前和后分页。就像您必须同时从传递给Flatlist的数据数组中添加和删除相同数量的项一样。

也就是说,假设您想要维护数组中的50个项。

代码语言:javascript
运行
复制
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])
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73204907

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档