共计 2689 个字符，预计需要花费 7 分钟才能阅读完成。
根本介绍
S2 是 AntV 团队推出的数据表可视化引擎，旨在提供高性能、易扩大、好看、易用的多维表格。不仅有丰盛的剖析表格状态，还内置丰盛的交互能力，帮忙用户更好的看数和做决策。
一般表格是用于展现大量结构化数据的组件，当须要对数据进行排序、搜寻、分页、自定义操作等简单行为时，Antd Table 有比拟好的内置交互和实现。
功能分析
两者都能用于行列数据的展现，都有十分良好的交互和性能体现。在做技术选型前，须要对两者的性能个性有全面的理解，以下是对两种表格的性能个性梳理。
Antd Table
应用介绍
须要 dataSource 和 columns。即渲染表格须要数据和列配置。
<Table dataSource={dataSource} columns={columns} />单元格内容
Antd Table 单元格可自定义渲染，只须要在 render 函数中输入 react dom 即可。用户可在单元格渲染任何状态，比方 链接、tag、图片、checkbox 等。
可抉择
Antd Table 内置了行选的操作，减少 rowSelection 即可实现
<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
行列合并
在配置 columns 外面，通过 onCell 回调，设置 colSpan 的数值，0 代表不渲染，2 代表渲染 2 格。
const columns = [
{
title: 'Name',
dataIndex: 'name',
render: (text, row, index) => <a>{text}</a>,
onCell: (_, index) => ({colSpan: index < 4 ? 1 : 5,}),
}
]
树状状态
在数据源 dataSource 中减少 children 即可。
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 11,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
}
]
}
]
解冻行列头
通过设置滚动坐标实现，比方：
<Table columns={columns} dataSource={data} scroll={{x: 100, y: 240}}即 y 滚动轴从 240 坐标地位开始滚动，x 轴从 100 坐标地位开始滚动。
另外，Antd Table 还可实现 排序、筛选、可开展、表头分组、编辑单元格、自定义表头和表尾等性能，更多参考官网文档。
AntV S2
应用介绍
一样的，筹备数据 (dataCfg) 和配置 (option) 即可渲染初始透视表。
const s2 = new PivotSheet(dom, dataConfig, options) // 形式一：类
<SheetComponent dataCfg={dataConfig} options={options} /> // 形式二：react 组件状态
S2 提供「明细」和「透视」两种状态，明细状态和 Antd Table 相似：
咱们能够从 @antv/s2 包中别离导出两个基类进行应用：PivotSheet（透视表）、TableSheet（明细表）。
如果利用基于 react，导出 @antv/s2-react 中的组件，并用 sheetType 参数辨别渲染不同的表格。
交互
S2 提供了 hover、点选、全选、布局调整、单元格合并、链接跳转、暗藏列头等能力，还提供了凋谢接口给开发者自定义。
剖析能力
S2 剖析能力上，提供了条件格局、下钻、排序、导出、行列切换等性能
主题
理论业务中往往须要定制业务主题，S2 内置了默认、多彩蓝、简洁灰三套主题。用户也能够自定义色板，实现疾速自定义主题包。
性能
S2 抉择 canvas 作为渲染主体，保障交互丰盛和跨平台兼容的前提下，提供了大数据场景下的高性能渲染，通过按需渲染、虚构滚动等形式，保障在百万级别数据量下也能秒级渲染、滚动不卡顿。
另外，AntV S2 还能够实现自定义布局、主题、渲染等，有着丰盛的扩大机制，简直能够改任何看到的内容。更多参考官网文档。
两者比照
从多个方面来比照 AntV S2 和 Antd Table，心愿提供一些技术选型的规范给到大家。
canvas 和 html dom
S2 是用过 @antv/g 渲染的 canvas 表格，Antd Table 是通过 html dom 实现的表格，两者差异能够对应到 canvas 和 html dom 的差异。
最显著的差异是，两者对 事件处理 不一样。html dom 形式能够精确监听任何 dom 的事件，而 canvas 只能监听到最外层 canvas 的事件，须要通过事件委托实现，判断以后点击的指标（target）。
另一个差异是，性能方面。当数据量大时（比方 10w+ 级别），随着复杂度减少时，html dom 渲染速速会升高。canvas 因为只有一个 DOM 反复渲染低，耗时在外部计算和 canvas 绘制。因而在大数据场景，canvas 性能会好一些。
Antd Table 10w 性能体现：
AntV S2 10w 性能体现：
两者还有其余的一些差异，比方 canvas 依赖分辨率、能保留成 png 等，适宜图像密集型场景等等。
交互能力
Antd Table 反对行选、筛选、排序等，能满足根本需要。
AntV S2 反对 hover 十字定位、单选、多选、圈选、刷选、拖拽调整行列高宽等，提供了下钻、排序、导出等性能。
相对来说，Antd Table 提供根底交互性能，AntV S2 提供进阶交互性能，可自定义注册用户交互。
怎么做技术选型
Antd Table 适宜一般明细表格，如果你是后盾管理系统，如果你的设计稿和 Antd Table 官网例子差异不大，间接用 Antd Table 即可。
哪些状况能够抉择 S2 呢？
- 当你须要透视模式时，能够抉择 S2。
- 当你须要大量交互时，比方 hover 十字定位、圈选、行列选等，能够抉择 S2。
- 当你须要剖析能力，比方条件格局、下钻筛选、高级排序等，能够抉择 S2。
- 当你须要业余的数据分析型表格，能够抉择 S2。
- 如果你不晓得是否须要 S2 时, 那么就是不须要。
结语
对于表技术选型的心得曾经分享完了。简而言之，在理解两者性能个性后，抉择能帮忙你更好实现业务需要，更快实现开发指标的技术。如果对于 AntV S2 的性能个性和判断性能是否实现有纳闷，能够钉钉进「用户交换群」，所有开发者在线答疑。
最初，如果看完这篇文章的你有所播种，欢送给咱们 仓库 star 🌟🌟🌟🌟 激励，谢谢 🙏。
参考链接：
- S2 官网
- S2 1.0：这个表格「不简略」
- 应用 AntV S2 打造大数据表格组件
- 如何疾速绘制一个高性能、可交互好看的多维分析穿插表格
