共计 5139 个字符,预计需要花费 13 分钟才能阅读完成。
如果要从头开始应用 React 构建一个残缺的 Web 应用程序,须要哪些步骤?
这当然不像把大象装进冰箱那么简略,只须要分成三步:关上冰箱,拿起大象,塞进冰箱就好。
咱们须要思考细节有很多,比方:
- 必须应用打包程序(例如 webpack)打包代码,并应用 Babel 等编译器进行代码转换。
- 须要针对生产环境进行优化,例如代码拆分。
- 须要对一些页面进行事后渲染以进步页面性能和 SEO,可能还心愿应用服务器端渲染或客户端渲染。
- 必须编写一些服务器端代码能力将 React 应用程序连贯到数据存储。
这些问题都是咱们须要留神的,然而 Next.js 的呈现,完满地解决了这些问题,用一个框架即可通通拿下。
Next.js 框架具备正确的形象级别和杰出的“开发人员体验”,包含动态及服务器端交融渲染、反对 TypeScript、智能化打包、路由预取等性能,无需任何配置,开箱即用,这些内容让开发团队在编写代码时有“下雨天配巧克力”个别丝滑的体验。
意识 Next.js
Next.js 是一款 React 开发框架,它能够帮忙咱们构建 React 应用程序。作为一个轻量级 React 服务端渲染利用框架,它有许多内置性能,包含不仅限于:
- 直观的、基于页面的路由零碎(并反对动静路由)
- 预渲染——反对在页面级的 动态生成 (SSG) 和 服务器端渲染 (SSR)
- 主动代码拆分,晋升页面加载速度
- 具备通过优化的预取性能的客户端路由
- 内置 CSS 和 Sass 的反对,并反对任何 CSS-in-JS 库
- 开发环境反对疾速刷新
- 利用 Serverless Functions 及 API 路由 构建 API 性能
- 齐全可扩大
以后,Next.js 正在被用于数以万计的的网站和 Web 应用程序,包含许多享誉世界的出名公司和头部品牌。能够说,它肉眼可见的易用性牢牢把握了用户的心,不论是对于企业用户还是小微开发者,从根底框架到公布运维,它都提供了绝对应的解决方案。
接下来,咱们将带大家基于 Next.js 实现类 Excel 控件的在线表格编辑的性能。
实战之旅
首先须要装置 Node.js,并且 Node.js 版本须要高于 10.13,
装置流程能够参考:https://nodejs.org/en/
装置实现后,就能够创立 Next.js 利用。
关上终端窗口,进入到创立利用的程序目录,而后执行以下命令:
# 其背地的工作是通过调用 create-next-app 工具实现的,该工具会创立一个 Next.js 应用程序。npx create-next-app nextjs-spreadjs
装置实现后执行npm run dev
,如果我的项目能失常启动,就示意工程曾经失常创立,默认创立好的工程会启动在 3000 端口,展现如下:
而后能够将我的项目 pages 下的 index.js 中一些不必要的内容元素删除,在我的项目更门路上面加载咱们接下来写好的类 Excel 表格控件.
最终展现成果如图:
其中红色区域为表格主体,上方的工具栏是在线表格编辑器。在理论我的项目中,咱们能够独自引入组件运行时,也能够将在线表格编辑区全副引入(在线表格编辑器会蕴含一个与之关联的运行时)。
首先,咱们须要在 package.json 中退出如下依赖:
"@grapecity/spread-sheets": "15.1.0",
"@grapecity/spread-sheets-react": "15.1.0",
"@grapecity/spread-excelio": "15.1.0",
"@grapecity/spread-sheets-charts": "15.1.0",
"@grapecity/spread-sheets-print": "15.1.0",
"@grapecity/spread-sheets-pdf": "15.1.0",
"@grapecity/spread-sheets-barcode": "15.1.0",
"@grapecity/spread-sheets-shapes": "15.1.0",
"@grapecity/spread-sheets-resources-zh": "15.1.0",
"@grapecity/spread-sheets-languagepackages": "15.1.0",
"@grapecity/spread-sheets-pivot-addon": "15.1.0",
"@grapecity/spread-sheets-tablesheet": "15.1.0",
"@grapecity/spread-sheets-designer": "15.1.0",
"@grapecity/spread-sheets-designer-resources-cn": "15.1.0",
"@grapecity/spread-sheets-designer-react": "15.1.0"
接下来,咱们在我的项目根目录下新建 components 文件夹,并创立 OnlineDesigner.js 文件,在该文件中,咱们引入 spreadjs 相干资源,并引入组件运行时。具体代码如下所示:
import React,{useState,useEffect} from "react"
import '@grapecity/spread-sheets-resources-zh';
import GC from '@grapecity/spread-sheets'
import {SpreadSheets,Worksheet} from '@grapecity/spread-sheets-react'
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css'
GC.Spread.Common.CultureManager.culture("zh-cn");
export default function OnlineSpread(){const [spread,setSpread] = useState(null)
const initSpread = (entity) => {setSpread(entity)
// 获取流动工作表
let sheet = entity.getActiveSheet()
// 设置数据
sheet.setValue(0,0,'Grapecity')
}
return(
<>
<SpreadSheets
hostStyle={{height:'98vh'}}
workbookInitialized={initSpread}
></SpreadSheets>
</>
)
}
创立实现之后,咱们须要在 pages 目录下的 index.js 中引入定义好的组件。这里要留神的时,在引入组件时不要去应用服务端渲染(SSR),否会呈现 document undefined 的谬误,这种谬误,个别和 nodejs 无奈操作 dom 对象无关,具体的引入办法为:
const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{ssr: false})
引入实现之后,咱们就能够在以后页面中应用了,精简 index.js 中的代码,最终代码如下:import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'
const OnlineSpread = dynamic(() => import('../components/OnlineSpread.js'),{ssr: false})
const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{ssr: false})
export default function Home() {
return (
<div>
<Head>
<title>Nextjs-SPreadJS</title>
<meta name="description" content="Generated by create next app" />
</Head>
<OnlineSpread/>
</div>
)
}
执行 npm run dev,显示成果如下:
接下来。咱们须要持续在 components 文件夹下新建一个 OnlineDesigner.js,引入在线表格编辑器:
import React,{useState,useEffect} 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 {Designer} from '@grapecity/spread-sheets-designer-react';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
GC.Spread.Common.CultureManager.culture('zh-cn')
export default function OnlineDesigner(){const [designer,setDesigner] = useState(null)
const initDesigner = (entity) => {setDesigner(entity)
let spread = entity.getWorkbook()
let sheet = spread.getActiveSheet()
sheet.setValue(0,0,'Grapecity')
}
return(
<>
<Designer
styleInfo={{height:'98vh'}}
designerInitialized={initDesigner}
></Designer>
</>
)
}
编写实现之后,在 index.js 中引入集成即可:
import Head from 'next/head'
import Image from 'next/image'
import dynamic from 'next/dynamic'
const OnlineDesigner = dynamic(() => import('../components/OnlineDesigner.js'),{ssr: false})
export default function Home() {
return (
<div>
<Head>
<title>Nextjs-SPreadJS</title>
<meta name="description" content="Generated by create next app" />
</Head>
{/* <OnlineSpread/> */}
<OnlineDesigner/>
</div>
)
}
执行 npm run dev,显示成果如下:
到这里咱们就顺利完成了基于 Next.js 实现在线表格编辑性能。
本文内实例获取地址:https://gitee.com/GrapeCity/n…
大家如果对更多利用实例感兴趣,能够查看:
https://demo.grapecity.com.cn…