zl程序教程

您现在的位置是:首页 >  后端

当前栏目

在React项目中,如何优雅的优化长列表

列表项目React 如何 优化 优雅
2023-09-27 14:28:54 时间

  对于较长的列表,比如1000个数组的数据结构,如果想要同时渲染这1000个数据,生成相应的1000个原生dom,我们知道原生的dom元素是很复杂的,如果长列表通过生成如此多的dom元素来实现,很可能使网页失去响应。

  贯穿React核心的就是"virtual dom",我们同样的可以通过用虚拟列表的方式来优雅的优化长列表

  • 原生dom渲染长列表的缺陷
  • 虚拟列表优化长列表的原理
  • 通过react-virtualized来优化长列表
  • 通过react-tiny-virtual-list来优化长列表

本文的原文地址发布在我的博客中:

github.com/fortheallli…

欢迎star和fork~

本文的用例的代码地址为:

github.com/fortheallli…


 


作者:yuxiaoliang
链接:https://juejin.im/post/5c048f25e51d450d16620d8d
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。