表格是最重要的存储和计算数据的格式之一，也是在线协同办公中一个关键组成部分。
本文介绍如何在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 <Workbook data={[{ name: "Sheet1" }]} />
}
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的基础上做了很多优化，其中解决的核心痛点：
- 使用 Typescript 编写
- 项目库可以使用 import / require 导入了
- 同页面支持多个实例
- 去掉了 jQuery 的依赖, 用原生 React / Vue + immer 来管理Dom和状态。
其余优化包括：
- 重新设计了协同模块。
- 剥离出公式模块，用一个修改过的 handsontable/formula-parser 来处理公式计算。
- 优化dom结构。
- 用SVG代替iconfont的图标，因为iconfont的图标对其他开发者而言很不方便改动。
- 容器外面不创建可见的页面元素。
- 避免在window对象上存储数据。
特色功能介绍
协同编辑
“协同”是在线表格最为核心的功能。传统表格软件和网页组件相比，最大的区别就是对协同编辑的支持和协同编辑的体验。因此，我们在开发FortuneSheet时，非常重视这一功能，在项目开始之初的架构阶段就思考好了具体的方案，并在版本更新迭代中优先加入。同时，提供了一个简单的后端demo来实现数据交互、存储。
支持多实例
API的Demo展示
一个优秀的开源项目，详细的文档是必不可少的。我们在每一次版本更新时，都会相应地去更新Readme和API文档。为了方便其他Developer更舒适地使用组件和贡献代码，我们在给出详细的API文档之外，还在Online Demo 中暴露出了API，并做了简单的演示，极大程度地方便开发者定制和接入功能。
通过测试保证质量
由于新上线的功能复杂度越来越高，参与开发的成员越来越多，在这样庞大体量的项目中，Quality Assurance（质量控制）就成了必不可少的一环。本项目的质量控制流程包括严格的Pull Request代码评审、CICD和针对功能的Jest覆盖。
截至撰写时，已经有了22个test suites和99个test，并且还在持续增加、补充当中。越复杂的功能，越需要严格的测试覆盖。例如我们的核心功能—协同编辑，开发者就写了多达十六个测试（jest）来保障其正确性。
