React同构应用

最新推荐文章于 2022-01-27 17:32:11 发布

leviscar

最新推荐文章于 2022-01-27 17:32:11 发布

阅读量824

点赞数 1

分类专栏： React ES6

本文链接：https://blog.csdn.net/leviscar/article/details/80061733

版权

React 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

ES6

5 篇文章 0 订阅

订阅专栏

React同构应用

引言

简单讲，单页应用基本上就是一个空白的HTML体，使用JavaScript来生成应用的页面。这种方式虽然有很多优势，但是也有缺点： 在浏览器下载应用的JavaScript并运行（以及从服务器上获取最初的数据）之前，用户会看到一个白屏闪过，然后才是页面的内容。

同构应用也被称为通用`JavaScript`应用，指的是在客户端和服务器端之间完整(或部分)地共享代码的应用。通过在服务器端运行应用的JavaScript代码，页面可在发送到浏览器之前预先填充内容，所以用户甚至可以在浏览器JavaScript运行之前就看到内容。当本地的JavaScript运行时，它会接手后续的交互及导航操作，通过快速初始化加载和服务端页面渲染，让用户在单页应用程序中得到流畅的交互体验。

用户因为应用加载和渲染速度更快有了更好的体验，同时还有：

- 获得渐进增强(progressive enhancement)能力(在JS加载失败时应用也不会完全停止工作)
- 更好的可访问性
- 并使搜素引擎更容易通过索引搜索应用内容

同构简要过程

为了让React应用能在服务器上运行和预填充，需要使用Node.js和Express
1. 配置Babel
2. 创建Express服务器
3. 运行服务器，使用npm
4. 使用模板
- 在实际应用中不可能用下面这种方式来发送字符串内容响应
response.send('<html><body><p>Hello World!</p></body></html>')
- Express支持使用模板。模板是一组HTML标记，其中带有一些标签用于插入变量或者运行程序逻辑
- 以使用EJS模板为例，可以先安装后调用set方法来完成
app.set('view engine','ejs');
- 默认情况下，模板文件必须保存在views文件夹中
5. 静态资源访问
- Express内置中间件来提供静态资源的访问。epxress.static()中间件接收一个参数，指向静态资源所字文件的根目录。从public文件夹提供静态资源访问，在服务器端代码中添加如下行：
app.use(express.static(__dirname+'/public'));

同构基础

React和React-DOM包通过ReactDOMServer.renderToString方法内置支持在服务端渲染组件的能力，该方法会对所需组件进行渲染，并生成带有注释的HTML发送到浏览器。在浏览器中，React会识别这些注释，并只进行事件处理程序的加载，从而使得应用在初次加载时能获得极佳性能。