开源 UI 库中，唯一同时实现了大表格虚拟化和树表格的 Table 组件

背景

有这样一个需求，一位 React Suite（以下简称 rsuite）的用户，他需要一个 Table 组件能够像 Jira Portfolio 一样，支持树形数据，同时需要支持大数据渲染。 截止到目前（2019年1月18日）为止，开源 UI 库中没有找到可以支持的组件，所以 rsuite 在最新的版本中支持这一特性。

接下来，我们看一下 rsuite 中是怎么支持这两个功能？

大表格虚拟化

首先，我们看一下支持大数据渲染，在页面中渲染过多的 DOM 元素会带来性能问题，必须得有一种解决方案去优化它，我们暂且叫做大表格虚拟化。

所谓的大表格虚拟化，其实就是为表格设置一个较大的数据（比如 10000 条数据），然后虚拟一个表格隐藏掉不需要显示的数据。

为了解决让浏览器渲染的大量 DOM 时候出现的性能问题，我们不能把 10000 条数据都渲染到页面，采用一种方式，只渲染可视范围内数据。 同时为表格设置一个滚动条，只有在滚动到需要显示的区域时候才渲染该区域的数据，减少的 DOM 数量。