背景
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…