最近遇到一个需求需要渲染大量的数据，如果常规渲染 1 万条数据，由于 DOM 数量渲染过多，浏览器会导致卡顿，那么如何解决呢？聪明的你可能会想到只渲染可视区域的数据。但是具体逻辑可能自己实现不出来，不妨试试以下 4 个 react 虚拟列表组件。😈
@egjs/react-infinitegrid
@egjs/react-infinitegrid 这款组件能够支持网格图片的无限滚动加载，本身也实现了虚拟滚动功能，无限图片加载。支持以下几种布局，分别是 MasonryInfiniteGrid、JustifiedInfiniteGrid、FrameInfiniteGrid、PackingInfiniteGrid。都是网格布局图片的无限滚动加载。不止 react 版本，也提供了 angularjs，vuejs，具体可以点击体验下效果
ReactList
ReactList 是一款纯列表类展示组件，支持无限滚动加载，也支持一次性加载所有数据，也支持横向和纵向滚动加载，性能也是相当不错。不过目前组件还有一些小问题。
当指定 uniform 类型而不实际提供统一大小的元素时，会发生这种情况。该组件尝试一次仅绘制最少的必要元素，并且该最小元素计算基于列表中的第一个元素。当第一个元素与其他元素不匹配时，计算就会出错，组件将永远无法完全解决理想的必要元素。
该组件也不支持配置边距，计算元素位置和大小的计算会因边距变得更加复杂。不过可以使用透明边框或填充或具有嵌套元素的元素来实现。
react-window
react-window 适用于高性能的大数据列表和大数据表格渲染。不过相对于 ReactList 只能渲染一次性数据，如果需要实现滚动无限加载，可以配合 react-window-infinite-loader 组件，具体可以查看例子。
react-window 支持设置滚动到具体行，这对于 h5 大数据量列表的前进后退岂不是福音，因为在 h5 列表跳转到详情页面后，需要返回到列表页，就可以在跳转前存储当前的行数后跳到详情页，返回列表后就可以滚动到该行。按道理借助这个组件是可以实现的。😄
react-window 的官方 demo 地址
react vtree
react-vtree 为渲染大型树结构提供了一个轻量级和灵活的解决方案。如果你刚好想要实现大量树形结构树的渲染，那这个组件应该很适合你。它基于 react-window 库来实现的。具体效果可以点击demo 地址查看。由于用的是浏览器默认样式，样式完全可以自定义，基于 vtree 做二次封装，会有很好的效果。
