读了一个在线excel的源码

发现设计还是很有意思的：

• 整个表格都是用canvas画出来了，据作者说是为了性能。
• 在canvas之上有一层不可见的table，内部col, row, cell和canvas上画的1:1复制，这是为了无障碍用户。

• 最顶层是overlay，用于响应所有鼠标和键盘事件，用户操作后更新到下层canvas。

  • 这层很复杂，要处理点击、拖拽，以及编辑cell的各种浮动组件

然后大概看了一下腾讯的在线表格，也是类似的结构 （除了没有无障碍层）

记录一下组件架构

总结一些经验：

• 对于复杂鼠标点击、拖拽处理，一般要监听全局事件，然后根据坐标判断响应，而不是监听一些小组件
• <component {...rest} /> 这种写法影响性能，如果是一个变化比较频繁的组件，可以手动把里面的props展开
• react.d.ts里定义了一些官方没有的定义例如React.ForwardRefRenderFunction，这些需要再@types里查找

腾讯的在线协作系统比这个开源代码多了：

• 协作合并能力（基于cell的同步，推测cell编辑还是独占的）
• excel的公式能力

在线协作系统还是非常复杂的