在React项目中,如何优雅的优化长列表
2023-09-27 14:28:54 时间
对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表通过生成如此多的dom元素来实现,很可能使网页失去响应。
贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表
- 原生dom渲染长列表的缺陷
- 虚拟列表优化长列表的原理
- 通过react-virtualized来优化长列表
- 通过react-tiny-virtual-list来优化长列表
本文的原文地址发布在我的博客中:
欢迎star和fork~
本文的用例的代码地址为:
作者:yuxiaoliang
链接:https://juejin.im/post/5c048f25e51d450d16620d8d
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章
- Flutter移动电商实战 --(25)列表页_使用Provide控制子类-1
- react 项目实战(五)渲染用户列表
- uni-app - 文字上下循环滚动翻滚,类似中奖名单与公告栏信息公示等等,自定义组件封装,支持 DIY(适用于新闻动态、公告上下滚动列表、上下循环滚动,无限上下自动滚动列表)兼容小程序/H5/App
- python基础(一)列表与元组
- 《Python参考手册(第4版•修订版)》——1.6 列表
- 《圣殿祭司的ASP.NET4.0专家技术手册》---- 1-17 各章项目程序名称列表
- LINUX常见服务列表
- 使用 SwiftUI 构建可搜索列表,为您的 iOS 应用程序创建具有自动完成功能的可搜索列表(教程含源码)
- 【微信小程序】列表渲染
- vue项目实现列表页-详情页返回不刷新,再点其他菜单项返回刷新的需求
- 堆,队列,单一列表,双向链表
- 【人生苦短,我用Python】Python免费精品课连载(2)——序列、列表、元组与字符串
- bisect——对列表插入新数据仍然保持有序