React同构漫谈

作者：Jiang, Jilin

同构指的是相同代码可以同时在客户端与服务端同时渲染的技术，利用服务器资源对用户请求进行预渲染，而客户端仍然保持SPA特性。本文将从实际项目出发，谈谈开发过程中遇到的问题以及解决方案。

在开始阅读本文之前，你需要有一定的react同构基本概念。如果尚未接触过同构，建议先参考一些相关的同构项目：

·        https://github.com/RickWong/react-isomorphic-starterkit

·        https://github.com/kriasoft/react-starter-kit

React同构主要分成以下几个步骤：

·        服务端将请求交由React Router解析

·        React Router生成页面布局

·        服务端将生成结果文本化返回给客户端

·        客户端由React Router生成页面布局

·        React将其与服务端布局进行对比

·        对比成功，复用当前页面；反之则重新渲染

利用local apicall响应更快的特点，可以减少总体的页面可用性等待时间。

或许你会疑惑，为什么React在客户端还需要再次进行渲染并验证。这是需要分成两个问题来分别讨论。

1. 为何需要再次渲染?

React中，组件通过Props和State来决定组件表现。例如，我们现在有一个Checkbox组件：

const CheckBox = ({ title, checked }) => ({title}
);

通过服务端渲染转换成dom element后将会丢失virtual dom结构信息：

Hello World

因此，为了React能够在客户端正常运行。客户端也需要进行一次渲染，构建出virtualdom结构。

2. 为何需要验证?

既然在

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！