原生跨框架的表格组件，三步实现万条不卡

确定在GridManager内实现万条不卡的想法，最早出现于2021年初同郑某人和杨某人的饭局上。如今功能已经实现，整理下这个值得记录的过程。

现状分析

在虚拟滚动落地前，针对于现有逻辑的改造是个前置条件。

上方gif内演示了在实现万条不卡前，表格组件所拥有的部分能力。由于这些能力搭建于原生跨框架的结构上，所以在需要对渲染逻辑进行较大范围改造时，原先的能力就成为了不小的包袱。

因此在不影响现有功能的情况下支持万条不卡，需要按序实现以下三个步骤:

• tbody区域的数据驱动改造: 降低功能复杂度
• 差异化更新: 减少DOM节点的更新频率
• 虚拟滚动: 减少DOM节点的更新数量

三个步骤

基于数据驱动，构建差异化更新，最终实现虚拟滚动。

1、数据驱动

随着js框架的出现，数据驱动改变了前端组件的渲染逻辑。

对于一个脱离框架的原生表格组件，虽然需要自行实现数据驱动，但难度其实不大，只需将tbody区域内的所有渲染逻辑进行整合，并向外透出唯一的数据变更接收函数。

<