React进阶篇(七)React 同构
时间:2022-07-25
本文章向大家介绍React进阶篇(七)React 同构,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
同构,就是一套React代码在服务器上运行一遍,到达浏览器又运行一遍。服务端渲染完成页面结构,浏览器端渲染完成事件绑定。
那如何进行浏览器端的事件绑定呢?
唯一的方式就是让浏览器去拉取JS文件执行,让JS代码来控制。
更详细的步骤如下:
下面,我们基于KOA框架讲解如何做同构?
第一步:在服务端构建初始 store
扩充 Koa 的路由文件:
// server-side ./routes/index.jsx
import Router from 'koa-router';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux'
const router = Router();
router.get('*', async (ctx) => {
// 在服务端初始化 store 的数据
const store = createStore(state => state, {
name: 'Pspgbhu',
site: 'http://pspgbhu.me',
});
const context = {};
const content = (
<StaticRouter location={ctx.url} context={context}>
{/* 增加 Provider */}
<Provider store={store}>
<App/>
</Provider>
</StaticRouter>
);
// 获取 store 数据对象
const preloadedState = store.getState();
await ctx.render('index', {
html: content,
state: preloadedState, // 将 store 数据传递给 ejs 模板引擎
});
});
export default router;
第二步:模板引擎将初始的 store 渲染到页面中
模板引擎将 koa router 传来的 store 数据赋值给 window._INITIAL_STATE 对象下。
<!-- index.ejs -->
<!DOCTYPE html><html>
<head>
<title>React Isomorphic</title>
<link rel='stylesheet' href='/css/style.css' />
</head>
<body>
<div id="app"><%- html %></div>
<script>
// 将服务端的 store 对象赋值给该变量
window.__INITIAL_STATE_ = <%- state %>;
</script>
<script src="/js/app.js"></script>
</body></html>
第三步:客户端获取 Redux store 的初始值
// client-side index.jsx
import React from 'react';
import { hydrate } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from '../common/App';
// 通过服务端注入的全局变量得到初始的 state
const preloadedState = window.__INITIAL_STATE_;
const store = createStore(state => state, preloadedState);
hydrate(
<Provider store={store}>
<BrowserRouter>
<App></App>
</BrowserRouter>
</Provider>,
document.querySelector('#app'),
);
同构的优缺点如下。
- 优点:
- 减少首次渲染时间
- SEO
- 缺点:
- 使用 SSR 这种技术,将使原本简单的 React 项目变得非常复杂,项目的可维护性会降低,代码问题的追溯也会变得困难。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何自定义SAP Spartacus店铺的界面颜色风格
- 如何自定义SAP Spartacus店铺的购物车图表css风格
- 数据库PostrageSQL-从源代码安装
- Django的中间件
- WPF 使用 Skia 绘制 WriteableBitmap 图片
- dotnet 在 UOS 国产系统上使用 MonoDevelop 创建 GTK 全平台带界面应用
- dotnet 在 UOS 国产系统上安装 MonoDevelop 开发工具
- 使用SAP Spartacus快速创建一个电商店铺网站
- 使用StackBlitz和SAP Spartacus快速创建电商店铺页面
- SAP CRM Interactive Report(交互式报表)里和服务订单相关的一些字段
- SAP S/4HANA Customer Management(CRM)模块的扩展性设计
- SAP S/4HANA Customer Management(CRM)模块的Partner模型设计
- 使用soapUI消费SAP Cloud for Customer的web service
- 视频上云网关EasyNTS智能云组网如何通过23端口穿透实现远程控制功能?
- 视频上云网关平台EasyCVR登录页开发控制台报net::ERR_CONNECTION_TIMED_OUT错误