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

  对于较长的列表，比如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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。