如果我们直接把整个列表渲染出来, 仅仅学生列表就会生成1000+个div标签. 这个时候的DOM数量就会变得难以想象. 我们都知道, DOM结构如果过大, 网页就会出现用户操作体验上的问题, 比如滚动, 点击等常用操作. 同时, 对react的虚拟DOM计算以及虚拟DOM反映到…

在前端工作中免不了接触到虚拟列表，本文通过简单易懂的图和代码手把手教大家实现三种虚拟列表。看完本文，相信各位随手就能撸出一个虚拟列表！

本文要探讨的是，当这两个容器元素的内容都超出了容器高度，即都出现了滚动框的时候，如何在其中一个容器元素滚动时，让另外一个元素也随之滚动。 既然是与滚动条有关，那么首先想到 js中控制滚动条高度的一个属性： scrollTop，只要能控制这个属性的值，自然也就能控制滚动条的滚动了…

基于上一节固定高度列表的实现，本小节实现针对高度可控元素的虚拟列表实现，稍微复杂一些，感兴趣的小伙伴可以跟着小编一起书写

使用react-window处理大批量数据列表，可避免因为数据的更新导致大量的重新渲染，优化页面渲染性能。