用React实现支持在线协同的Excel表格

原文地址

表格是最重要的存储和计算数据的格式之一，也是在线协同办公中一个关键组成部分。
本文介绍如何在10行代码内，使用React创建一个功能丰富的Excel表格。

快速上手

首先，开始先建一个空的React项目create-react-app
(如果你已经有了一个React项目，可以跳过这一步）

npx create-react-app my-spreadsheet

如果你用yarn的话

yarn create react-app my-spreadsheet

之后，进入my-spreadsheet目录中，安装表格库

 # using npm
npm install @fortune-sheet/react
 # or using yarn
yarn add @fortune-sheet/react

将src/App.js替换为以下内容

import { Workbook } from "@fortune-sheet/react";
import "@fortune-sheet/react/dist/index.css"

function App() {
  return 
}

export default App

并且，在src/index.css中增加一下代码

html, body, #root {
  height: 100%;
} 

至此，所有准备工作做完了，可以直接启动项目了！使用以下命令

# using npm
npm start
 # or using yarn
yarn start

可以尽情玩转并尝试各种功能了～

本地运行效果演示

关于表格库

本文中的表格库FortuneSheet是一个用原生React实现的表格组件，将来还会支持Vue，它是完全开源的，没有任何使用限制。
Github地址: https://github.com/ruilisi/fortune-sheet
在线体验Demo：https://ruilisi.github.io/fortune-sheet-demo/
协同版Demo：https://xiemala.com/s/mkAyPu
官方文档：FortuneSheet Document (ruilisi.github.io)

优化点

本组件源于另一个开源项目Luckysheet，它使用jQuery实现，但在团队的使用过程中，发现其在设计层面的诸多问题，同时项目臃肿，难以维护，导致修改Bug和二次开发非常困难。团队思考再三，毅然决定扎入这数十万行代码的项目中，从中创建出一个全新的，设计合理，易于维护的表格组件，并同样完全开源。

FortuneSheet在Luckysheet的基础上做了很多优化，其中解决的核心痛点：

1. 使用 Typescript 编写
2. 项目库可以使用 import / require 导入了
3. 同页面支持多个实例
4. 去掉了 jQuery 的依赖, 用原生 React / Vue + immer 来管理Dom和状态。

其余优化包括：

1. 重新设计了协同模块。
2. 剥离出公式模块，用一个修改过的 handsontable/formula-parser 来处理公式计算。
3. 优化dom结构。
4. 用SVG代替iconfont的图标，因为iconfont的图标对其他开发者而言很不方便改动。
5. 容器外面不创建可见的页面元素。
6. 避免在window对象上存储数据。

特色功能介绍

协同编辑

“协同”是在线表格最为核心的功能。传统表格软件和网页组件相比，最大的区别就是对协同编辑的支持和协同编辑的体验。因此，我们在开发FortuneSheet时，非常重视这一功能，在项目开始之初的架构阶段就思考好了具体的方案，并在版本更新迭代中优先加入。同时，提供了一个简单的后端demo来实现数据交互、存储。

协同编辑效果演示

支持多实例

多实例支持

API的Demo展示

一个优秀的开源项目，详细的文档是必不可少的。我们在每一次版本更新时，都会相应地去更新Readme和API文档。为了方便其他Developer更舒适地使用组件和贡献代码，我们在给出详细的API文档之外，还在Online Demo 中暴露出了API，并做了简单的演示，极大程度地方便开发者定制和接入功能。

API Demo

通过测试保证质量

由于新上线的功能复杂度越来越高，参与开发的成员越来越多，在这样庞大体量的项目中，Quality Assurance（质量控制）就成了必不可少的一环。本项目的质量控制流程包括严格的Pull Request代码评审、CICD和针对功能的Jest覆盖。
截至撰写时，已经有了22个test suites和99个test，并且还在持续增加、补充当中。越复杂的功能，越需要严格的测试覆盖。例如我们的核心功能—协同编辑，开发者就写了多达十六个测试（jest）来保障其正确性。