背景
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# yarnyarn create vite vite-react --template react# pnpmpnpm 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...