背景2022年3月29日，React正式发布18.0.0。此更新包括开箱即用的改进，例如自动批处理、新API（例如startTransition）以及支持Suspense的流式服务器端渲染。本次发布的新特性请参考官方文档。作为构建用户界面的JavaScript库，React一直被认为是一个严谨而优秀的前端框架。随着新版本的发布，React的受欢迎程度越来越高。一个热点知识，在大多数使用React开发的业务系统中，基本都会有表格的需求。大多数情况下，我们可以通过使用React集成antd来完成一些常规的表单需求。但是在普通表格中，如果要计算一些公式函数，或者在表格内部使用一些图表等功能，这种常规的行列表很难满足需求。另外，虽然React中使用了虚拟DOM和DOMDIFF算法，但是如果表的数据量很大，需要经常修改和更新，浏览器的性能也不会很好。因此，为了更好的满足业务系统中复杂的表格需求，本文将介绍如何基于React18搭建一个更强大的前端电子表格系统。实战首先，我们需要创建一个react项目，可以使用create-react-app或者vite来创建。但是，由于Vite使用esbuild预构建依赖，esbuild是用Go编写的，比用JavaScript编写的packager预构建依赖快10-100倍。总体来说，使用效率要高于cra。所以本文使用Vite创建一个React项目。需要注意的是Node版本要高于12才能使用Vite。如果Node版本过低，注意升级Node。进入要创建项目的目标文件夹后，根据创建最简单的React项目使用的工具，执行以下命令之一：#npm6.xnpmcreatevite@latestvite-react--templatereact#npm7+，需要额外的双破折号：npmcreatevite@latestvite-react--templatereact#yarnyarncreatevitevite-react--templatereact#pnpmpnpmcreatevitevite-react----templatereactabove在命令，vite-react表示创建的项目名称，--template表示创建项目时使用的模板，react模板默认使用js。如果要使用ts，则需要将--templatereact替换为--templatereact-ts。创建完成后，进入项目目录，执行npminstall，安装依赖资源后，执行npmrundev启动项目。当然，这些命令完成创建项目后，终端会有提示，如上图所示。打开package.json，可以看到React的版本是最新的18.0.0版本。创建项目时，默认会使用最新版本的React，如上图所示。项目启动后，app.jsx中会有很多不需要的内容，可以自行删除，构建最简洁的项目。接下来我们引入前端table组件，在package.json中添加如下代码（紫色内容），然后执行npminstall安装新添加的依赖资源："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'importGCfrom'@grapecity/spread-sheets';import'@grapecity/spread-sheets-resources-zh';GC.Spread.Common.CultureManager.culture("h-zcn");导入{SpreadSheets,Worksheet,Column}from'@grapecity/spread-sheets-react';exportdefaultclassOnlineSpreadextendsComponent{constructor(props){super(props);this.spread=null;}initSpread(spread){this.spread=传播；//设置当前跨页的工作表数量this.spread.setSheetCount(2)//获取第一个工作表letsheet=spread.getSheet(0)//或letsheet=spread.getSheetFromName('Sheet1')//设置列宽sheet.setColumnWidth(0,150)//第一个参数为列索引，第二个参数为列宽//设置单个单元格的值sheet.setValue(0,0,'HelloGrapecity')//参数依次表示行索引、列索引、内容//设置单元格公式sheet.setFormula(0,1,'=SUM(A2:A5)')//参数为行索引、列索引、公式//设置面积content//表示从行索引为2，列索引为0的单元格开始，设置2行3列的数据sheet.setArray(2,0,[[1,'hello','grapecity'],[2,'hello','javascript']])//设置文本颜色sheet.getCell(2,1).foreColor('#f00')}render(){return(
