構建基於React18的電子表格程序

背景

2022年3月29日，React正式發佈18.0.0。本次升級內容包括開箱即用的改進，如自動批處理、新的API（如startTransition）和支持Suspense 的流式服務器端渲染。關於此次發佈新增的功能可以參考官方文檔。

作爲一個構建用戶界面的JavaScript 庫，React一直被認爲是一個嚴謹而優秀的前端框架，隨着新版本的發行，使用熱度也是越來越高。一個熱知識，在大部分使用React開發的業務系統中，基本對錶格都有需求。大部分情況下，我們使用react集成antd就可以完成一些常規的表格需求。但是在普通的表格中，如果要做一些公式函數的計算，或者在表格內部使用一些圖表等功能時，這種常規的行列表就很難滿足需求了。

除此之外，雖然React中使用了虛擬DOM及DOM DIFF算法，但如果表格中數據量大且需要經常性修改更新時，瀏覽器性能並不會太好。

因此，爲了更好地滿足業務系統中複雜的表格需求，本文將爲大家介紹如何基於React18，構建一個功能更加強大的前端電子表格系統。

實戰

首先，我們需要創建一個react項目，可以使用create-react-app或者Vite來創建。但由於Vite 使用 esbuild 預構建依賴，esbuild 使用Go 編寫，相比較於JavaScript 編寫的打包器預構建依賴快10-100 倍，整體上來說，使用效率要高於cra。因此本文使用Vite來創建React項目。需要注意的是，使用Vite需要Node的版本高於12，如果Node的版本過低，注意升級Node哦。

進入想要創建項目的目標文件夾之後，根據自己用的工具，執行以下命令的一種，即可創建一個最簡單的React項目：

# npm 6.x 
npm create vite@latest vite-react --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-react --template react

# yarn
yarn create vite vite-react --template react

# pnpm
pnpm create vite vite-react -- --template react

上述命令中vite-react表示創建的工程名稱，--template表示創建項目時使用的模板，react模板默認使用js，如果要使用ts，需要將--template react 替換爲--template react-ts。

創建完成之後，進入到項目目錄，執行npm install，依賴資源安裝完成之後，執行npm run dev，項目即可啓動。

當然，這些命令在創建項目完成之後，終端都會有提示，如上圖所示。

打開package.json，可以看到React的版本爲18.0.0的最新版，在創建項目時，默認都會使用最新版本的React，如上圖。

項目啓動之後，app.jsx中會有很多不需要的內容，大家可以自行刪掉，構建一個最簡潔的項目。接下來我們引入前端表格組件，在package.json中添加以下代碼（紫色內容），之後執行npm install，安裝新增的依賴資源：

"dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@grapecity/spread-sheets": "15.0.7",
    "@grapecity/spread-sheets-react": "15.0.7",
    "@grapecity/spread-excelio": "15.0.7",
    "@grapecity/spread-sheets-charts": "15.0.7",
    "@grapecity/spread-sheets-print": "15.0.7",
    "@grapecity/spread-sheets-pdf": "15.0.7",
    "@grapecity/spread-sheets-barcode": "15.0.7",
    "@grapecity/spread-sheets-shapes": "15.0.7",
    "@grapecity/spread-sheets-resources-ko": "15.0.7",
    "@grapecity/spread-sheets-resources-ja": "15.0.7",
    "@grapecity/spread-sheets-resources-zh": "15.0.7",
    "@grapecity/spread-sheets-languagepackages": "15.0.7",
    "@grapecity/spread-sheets-pivot-addon": "15.0.7",
    "@grapecity/spread-sheets-designer": "15.0.7",
    "@grapecity/spread-sheets-designer-resources-cn": "15.0.7",
    "@grapecity/spread-sheets-designer-react": "15.0.7",
    "@grapecity/spread-sheets-tablesheet": "15.0.7"
  },

依賴安裝之後，我們需要創建兩個jsx文件，用來引入SpreadJS的不同部分，OnlineSpread表示當前組件爲SpreadJS運行時組件，實現該組件的核心代碼如下所示：

import {Component} from 'react'
import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("h-zcn");
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';


export default class OnlineSpread extends Component {
    constructor(props) {
        super(props);
        this.spread = null;
    }
    initSpread(spread) {
        this.spread = spread;
         //設置當前spread中工作表的數量
        this.spread.setSheetCount(2)
        //獲取第一個工作表
        let sheet = spread.getSheet(0)   //or let sheet = spread.getSheetFromName('Sheet1')
        //設置列寬
        sheet.setColumnWidth(0,150)    //第一個參數爲列索引，第二個參數爲列寬


        //單個單元格設置值
        sheet.setValue(0,0,'Hello Grapecity')   //參數依次表示行索引、列索引、內容


        //設置單元格公式
        sheet.setFormula(0,1,'=SUM(A2:A5)')      //參數依次爲行索引、列索引、公式


        //設置區域內容
        //表示從行索引爲2，列索引爲0的單元格開始,設置2行3列的數據
        sheet.setArray(2,0,[[1,'hello','grapecity'],[2,'hello','javascript']])  


        //設置文字顏色
        sheet.getCell(2,1).foreColor('#f00')
    }


    render(){
        return(
            <SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
                <Worksheet>
                </Worksheet>
            </SpreadSheets>
        )
    }
   
}

在app.jsx中引入OnlineSpread，頁面展示效果如下：

接下來，我們需要引入包含工具欄的部分，新建一個OnlineDesigner.jsx，核心代碼如下：

import { Component, PropsWithChildren, ReactNode } from 'react'
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GCDesigner from '@grapecity/spread-sheets-designer';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
import { Designer } from '@grapecity/spread-sheets-designer-react';
GC.Spread.Common.CultureManager.culture('zh-cn')




export default class OnlineDesigner extends Component{
  constructor(props){
    super(props)
    this.designer = null
  }


  designerInitialized = (designer) => {
    this.designer = designer
    console.log(designer)
    // 獲取與designer相關聯的工作簿(Spread)
    let spread = this.designer.getWorkbook()
    let sheet = spread.getActiveSheet()
    //設置數值
    sheet.setValue(0,0,'Hello Grapecity')
    //設置行高
    sheet.setColumnWidth(0,120)
    //設置區域內容
    sheet.setArray(1,0,[[2,3,5]])
    //設置公式
    sheet.setFormula(3,0,'=sum(A2:C2)')


  }


  render(){
      return(
          <Designer
            spreadOptions={{sheetCount: 3}}
            styleInfo={{height: '98vh'}}
            designerInitialized = {this.designerInitialized}
          />
      )
  }
}

在app.jsx中引入OnlineDesigner,頁面中顯示如下：

到這裏我們就正式完成基於React18構件純前端表格，在該表格上，我們可以繼續設置大量數據、公式，也可以實現報表設計，報表設計操作形式與Excel類似。

Demo下載地址：https://github.com/GrapeCityXA/SpreadJS_vite_react18

更多demo體驗：

https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html?id=34