React 同构

所谓同构,简单的说就是客户端的代码可以在服务端运行,好处就是能极大的提升首屏时间,避免白屏,另外同构也给SEO提供了很多便利。

React 同构得益于 React 的虚拟 DOM。虚拟 DOM 以对象树的形式保存在内存中,并存在前后端两种展现形式。

  • 在客户端上,虚拟 DOM 通过 ReactDOM 的 render 方法渲染到页面中,形成真实的 dom。
  • 在服务端上,React 提供了另外两个方法: ReactDOMServer.renderToString 和 ReactDOMServer.renderToStaticMarkup 将虚拟 DOM 渲染为 HTML 字符串。

在服务端通过 ReactDOMServer.renderToString 方法将虚拟 DOM 渲染为 HTML 字符串,到客户端时,React 只需要做一些事件绑定等操作就可以了。

在这一整套流程中,保证 DOM 结构的一致性是至关重要的一点。 React 通过 data-react-checksum来检测一致性,即在服务端产生 HTML 字符串的时候会额外的计算一个 data-react-checksum 值,客户端会对这个值进行校验,如果与客户端计算的值一致,则 React 只会进行事件绑定,如果不一致,React 会丢弃服务端返回的 dom 结构重新渲染。

服务端对 ES6/7 的支持

React 新版本中已经在推荐采用 ES6/7 开发组件了,因此服务端对 ES6/7 的支持也不得不跟上我们开发组件的步伐。但是现在 node 原生对 ES6/7 的支持还比较弱,这个时候我们就需要借助于 babel 来完成 ES6/7 到 ES5 的转换。这一转换,我们通过 babel-register 来完成。

babel-register 通过绑定 require 函数的方式(require hook),在 require jsx 以及使用 ES6/7 编写的 js 文件时,使用 babel 转换语法,因此,应该在任何 jsx 代码执行前,执行 require('babel-register')(config),同时通过配置项config,配置babel语法等级、插件等。

这里我们给一个配置 demo, 具体配置方法可参看官方文档

{
"presets": ["react", "es2015", "stage-0"], "plugins": [
"transform-runtime",
"add-module-exports",
"transform-decorators-legacy",
"transform-react-display-name"
], "env": {
"development": {
"plugins": [
"typecheck",
["react-transform", {
"transforms": [{
"transform": "react-transform-catch-errors",
"imports": ["react", "redbox-react"],
"locals": ["module"]
}
]
}]
]
}
}
}

css、image 等文件服务端如何支持

一般情况来说,不需要服务端处理非js文件,但是如果直接在服务端 require 一个非 js 文件的话会报错,因为 require 函数不认识非 js 文件,这时候我们需要做如下处理, 已样式文件为例:

var Module = require('module');
Module._extensions['.less'] = function(module, fn) {
return '';
};
Module._extensions['.css'] = function(module, fn) {
return '';
};

具体原理可以参考require 解读

或者直接在 babel-register 中配置忽略规则:

require("babel-register")({
ignore: /(\.css|\.less)$/,
});

但是,如果项目中使用了 css_modules 的话,那服务端就必须要处理 less 等文件了。为了解决这个问题,需要一个额外的工具 webpack-isomorphic-tools,帮助识别 less 等文件。

简单地说,webpack-isomorphic-tools,完成了两件事:

  • 以webpack插件的形式,预编译less(不局限于less,还支持图片文件、字体文件等),将其转换为一个 assets.json 文件保存到项目目录下。
  • require hook,所有less文件的引入,代理到生成的 JSON 文件中,匹配文件路径,返回一个预先编译好的 JSON 对象。

构建

客户端的代码通过配置 webpack 打包发布到 CDN 即可。

通过配置 webpack 和 webpack-isomorphic-tools 将非 js 文件打包成 assets 文件即可。

React 同构开发(二)的更多相关文章

  1. React 同构开发(一)

    为什么要做同构 要回答这个问题,首先要问什么是同构.所谓同构,顾名思义就是同一套代码,既可以运行在客户端(浏览器),又可以运行在服务器端(node). 我们知道,在前端的开发过程中,我们一般都会有一个 ...

  2. React-Native(二):React Native开发工具vs code配置

    从网上翻阅了一些开发react-native的开发工具时,发现其实可选的工具还是比较多的Sublime Text,WebStrom,Atom+Nuclide,vs code 等.因为我用.net生态环 ...

  3. React Native开发入门

    目录: 一.前言 二.什么是React Native 三.开发环境搭建 四.预备知识 五.最简单的React Native小程序 六.总结 七.参考资料   一.前言 虽然只是简单的了解了一下Reac ...

  4. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  5. Webpack+React配合开发

    前面两篇关于webpack的基础和进阶,请先务必阅读之前的文章. Webpack教程一 Webpack教程二 什么是React React是一个由Facebook开发的library,它的口号是“A ...

  6. React Native开发的通讯录应用

    React Native开发的通讯录应用(使用JavaScript开发原生iOS应用,vczero) 0.前言: 项目地址:https://github.com/vczero/React-Native ...

  7. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  8. 深入浅出的webpack4构建工具--webpack4+react构建环境(二十)

    下面我们来配置下webpack4+react的开发环境,之前都是针对webpack4+vue的.下面我们也是在之前项目结构的基础之上进行配置下. 首先看下如下是我为 webpack4+react 基本 ...

  9. react项目开发中遇到的问题

    前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...

随机推荐

  1. redis整理の安全认证

    设置客户端连接后进行任何其他指定前需要使用的密码. tips:因为 redis 速度相当快,所以在一台比较好的服务器下,一个外部的用户可以在一秒钟进 行 150K 次的密码尝试,这意味着你需要指定非常 ...

  2. 基于JSP+Servlet开发手机销售购物商城系统(前台+后台)源码

    基于JSP+Servlet开发手机销售购物商城系统(前台+后台) 开发环境: Windows操作系统 开发工具:Eclipse/MyEclipse+Jdk+Tomcat+MySQL数据库 运行效果图: ...

  3. 通用性站点管理后台(Bee OPOA Platform) (5)- 【扩展】基于WebSocket的监视Sql执行功能

    开始 底层的东西总是很类似, 看了园里的Fish-Li的一系列文章, 写得真好, 无论是风格还是内容. 本来也想想方便点就用remoting实现监视功能算了, 但这样就需要一个Winform的项目了. ...

  4. 生成文件的MD5、SHA、SHA256

    生成文件的MD5.SHA.SHA256 Linux系统生成MD5.SHA.SHA256md5sum file1.zip  >> MD5.txt sha1sum file1.zip > ...

  5. 【QTP专题-优化】VBS脚本启动QTP并运行测试

    使用vbs脚本启动QTP并运行测试,startQTP.vbs '******************************************************************** ...

  6. leetcode 19. 删除链表的倒数第N个节点 JAVA

    题目: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链 ...

  7. 三,PHP中错误日志display_errors与error_reporting配置

    1,display_errors display_errors 错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利 ...

  8. centos下搭建高可用redis

    Linux下搭建高可用Redis缓存 Redis是一个高性能的key-value数据库,现时越来越多企业与应用使用Redis作为缓存服务器.楼主是一枚JAVA后端程序员,也算是半个运维工程师了.在Li ...

  9. Flask 发布 1.0 稳定版

    简评:现在都开始版本大跃进了吗?对,别看别人,说的就是你 pipenv(名单太长,待补齐...) Flask 其实早就已经十分稳定了,而在第一个 commit 大概 8 年之后,版本号才最终反映出了这 ...

  10. js中奇怪的问题 同步ajax,modal遮罩层

    奇怪问题一 今天有一段js执行的时候出现了问题 $.ajax({ ..., async:false, ... }); $('#myModal').modal('hide'); loadcurrentp ...