react长列表优化方案: react-virtualized

github

react-virtualized是一个以高效渲染大型列表和表格数据的响应式组件

典型开发问题

 

 

如果所示, 有教室1/2/3, 每间教室下有1000+个学生

 

学生组件为:

function Student({student}) {
    return <div>{student.name}</div>
}
复制代码

如果我们直接把整个列表渲染出来, 仅仅学生列表就会生成1000+个div标签.

往往, 我们的学生组件都会是:

function Student({student, ...rest}) {
    return (
        <div>
            ...
                <div>{student.name} ....</div>
            ...
        </div>
    )
}
复制代码

这个时候的DOM数量就会变得难以想象.

我们都知道, DOM结构如果过大, 网页就会出现用户操作体验上的问题, 比如滚动, 点击等常用操作. 同时, 对react的虚拟DOM计算以及虚拟DOM反映到真实DOM的压力也会很大. 当用户点击切换教室时, 就会出现秒级的卡顿.

使用react-virtualized优化

在react生态中, react-virtualized作为长列表优化的存在已久, 社区一直在更新维护, 讨论不断, 同时也意味着这是一个长期存在的棘手问题!