React与前端：React家族介绍

我曾在微博上说过“React就是哪吒”，那么一个前端框架和哪吒有什么关系呢？其实我觉得二者有某些相似的地方。

哪吒家室显赫，拥有的神器多到需要三头六臂才能拿得过来，后来经历磨难，脱胎换骨，能够独当多面。

React源自Facebook，集多项特色于一身——组件化、声明式、虚拟DOM、局部更新、状态机等，React 16引入的Fiber架构更可谓脱胎换骨，得Flux、Redux、immutable.js、React Router助阵，如虎添翼。

随着React Native的出世和React Canvas的诞生，更是让React如同有了三头六臂一般，将传统前端突破到安卓端、iOS端，大有一统全端的趋势。

目前三大框架Angular、React、Vue.js逐鹿中原，无论谁主沉浮，我都相信能“革了React命”的一定不是React的仿制品。

如果你对上面提到的这些名词不是特别了解，建议你阅读本文后续的内容，本文将介绍前端的历史和React相关知识。

1 前端简史

在没有Web时，信息的传递不太容易，得发明一种工具，让信息的创造者和阅读者都能看到一样的东西，于是Web诞生了。

1.1 Web 1.0

Web的内容由网站制作者生成，家族介绍用户只能浏览内容，信息的流动方向只能从服务端到客户端，这一阶段被称为Web 1.0时代。有人说这个时代的Web是静态的，这一阶段主要涉及的技术是HTML、CSS、JavaScript。

如果一段文字没有标点，那就不太容易阅读，标点其实是一种数据结构，数据必须有结构承载才能更容易传递。在Web中，HTML就是数据的结构，比如标题、段落、强调、表格等，现在我们称其为语义化。

因为视觉是Web的主要传播途径，除了结构，视觉也是一种信息，CSS成为视觉信息的载体，有HTML和CSS已经可以制作出页面了。由于HTML中大量使用div标签，HTML+CSS也被称作DIV+CSS。

光有视觉页面还是不够的，页面还要能和用户交互，比如点击按钮要有弹窗，JavaScript正是用来做这部分工作的，被称为行为。至此，Web三要素，结构、表现和行为就全了，分别对应HTML、CSS和JavaScript。

HTML、CSS和JavaScript要分离，一直被视为前端的金科玉律，CSS选择器成为连接HTML和CSS的纽带，而DOM成为HTML和JavaScript的桥梁，CSSOM承担了JavaScript和CSS的媒介。

1.2 Web 2.0

Web的内容主要由用户生成，用户浏览其他用户创造的内容，这一阶段统称为Web 2.0时代。这一阶段涉及的技术繁多。

服务器语言和表单的发明，第一次让信息可以从客户端流向服务端，账号体系把用户从屏幕前搬到了Web上，这一阶段的技术栈没啥变化，JavaScript也只是作为玩具语言，用来验证表单，前端开发者都被称作美工。

2006年谷歌推出了Gmail，可以不用刷新完成各种操作，其媲美客户端的体验，也将Web 2.0推上了浪潮之巅。

一种被称为AJAX的名词被发明——页面需要更新，JavaScript向服务器发起请求，服务端不再返回页面，而是返回XML格式的数据，然后JavaScript将数据渲染到页面中——最开始采用的是拼接字符串的形式，后来发明了前端模版，比如template.js。

这一阶段涌现了大批技术，如prototype.js、Dojo、ExtJS、jQuery，其巅峰是YUI 3。这些工具各有各的优点，其中jQuery可以作为代表，其主要功能是抹平浏览器差异，简化DOM操作。

JavaScript代码规模越来越大，一个JavaScript文件已经不能适应现状了，需要拆分成多个JavaScript文件（分治思想），代码之间存在依赖关系，且依赖关系越来越复杂，为此社区进行了各种尝试来解决这个问题，比如采用AMD、CMD、CommonJS。2015年ECMAScript 6定稿，带来了原生的模块系统，这一问题才最终被解决。

随着项目工程越来越大，代码的组织结构是不是也需要复用？有人将后端的MVC模式带到前端，但MVC并不适合前端，因此前端做了适当改变，诞生了MVP、MVVM等框架，典型的有Backbone.js、Knockout、AngularJS等。

2013年发布的React，将一种全新的思路带到了我们面前，一个新的时代已经来了。

2 React是什么

传说Facebook的大神们，对现有的框架都不满意，于是有了React。React是前端一个用于构建用户界面的 JavaScript 库，和其他MVC库不一样的地方是，React仅仅涉及界面层，类似于MVC中的View。

React是一次完整的抽象，改变了我们思考、设计和写代码的方式；React是一次完整的统一，统一了以前很多种编写界面的方式。原生前端实现界面太过灵活，基本上团队里每个人都有自己的一套方法，而React是一套非常优雅的方法论，我们苦苦追寻了多年的最佳思想，竟然都在React里了。

React有三个特色，分别是声明式、基于组件和一次学习，多端受用。

2.1 声明式

React改变了也统一了界面的实现方式，在React中，将界面抽象为状态和视图，只需定义好每个状态对应的视图就行了，剩下的React会帮你搞定，比如状态改变时会自动刷新视图等。

下面代码中的flag如果发生变化，界面会自动刷新。

2.2 基于组件

React改变了写前端的习惯，在React的世界里一切都是组件，以前的入口在HTML，现在的入口在JavaScript；以前是HTML + CSS + JavaScript的组合，现在是JavaScript+ CSS的组合；以前要想复用功能得拷贝三处代码，现在仅需引用一个组件即可。来看一个组件的例子。

上面的代码中包含两种组件，一种是HTML标签组件，另一种是React组件，其区别是HTML标签以小写字母开头，React组件以大写字母开头。

2.3 一次学习，多端受用

React中抽象了一层虚拟DOM，所以我们可以频繁地修改状态，但是更改的都是虚拟DOM。当虚拟DOM发生变化后，会集中更新到真实DOM，因为虚拟DOM的存在，只要替换掉底层的渲染引擎，就可以突破浏览器了。React Native就是将React实现到了原生App，React的一切都在，但是底层却不是DOM了，而是原生的View。类似的还有服务端渲染，这也是本书主要讲的内容。理解了React的思想，就可以搞定Web和App，简直不能再棒了。

3 React家族

React只是视图层，React家族还有一些其他成员，本节来简单介绍一下。

3.1 React Router

传统Web都是多页面的，每个页面一个URL，页面之间通过超链接跳转，由浏览器负责管理页面的跳转、前进、后退等功能，通过指定URL可以直接跳转到指定页面。

比如有一个首页和一个文章页，此时首页是一个URL，文章页是一个URL，可以从首页跳转到文章页，然后再从文章页跳转到首页，这一切都由浏览器完成。

传统页面刷新跳转的方式，体验不是很友好，于是更友好的单页面应用来了，也被称为WebApp。在这种模式下整个应用只有一个传统的页面，传统模式下的多个页面被抽象成一个个视图，原来的页面跳转，此时由JavaScript负责切换视图；原来向后端请求整个页面，现在变成向后端请求数据接口，因为不需要刷新页面，体验非常好。

但这种方式有一个问题，就是除了首页，其他页面是无法直接到达的，也就是每次都要先进到首页；为了能够实现传统Web那种URL的优点，需要在前端模拟一套路由，有了路由就可以通过URL直接进入某个视图了。

React非常适合做单页应用，React Router就是专门为React定制的路由，对React非常友好。下面看一下使用React Router实现上面首页和文章页跳转的情况。

3.2 Redux

面向界面的编程可以分为三部分：界面、数据和数据操作。React对界面的抽象做到了极致，但对数据和数据操作几乎没有约束，我们可以把这部分写到React组件中，也可以抽出来，将界面和数据与对数据操作进行分离，这就是Redux的工作。

Redux是JavaScript的状态容器，提供可预测化的状态管理，Redux因React而生，但也可以与其他类库配合使用。

3.3 React Native

React Native是一套披着React外衣的原生控件，React Native将原生控件封装为跨平台的React组件，并赋予我们通过JavaScript调用原生控件的能力。

在React Native里没有CSS，但React Native让我们可以通过CSS的语法来设置原生控件的属性。下面是一个例子。

可以看到，React Native就是用React语法封装过的原生控件，用CSS语法设置控件属性。

---

本文选自《React状态管理与同构实战》一书，作者侯策、颜海镜，由电子工业出版社2018年8月出版。

React自开源以来，便以革命性的设计理念迅速颠覆了前端开发的传统意义，其倡导的组件化、状态管理、虚拟DOM等思想极大提高了前端开发效率。为了更加高效地维护React应用的数据状态，以Redux为代表的数据管理模式横空出世。

本书以React技术栈为核心，在介绍React用法的基础上，从源码层面分析了Redux思想，同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例，不仅为用户打开了React技术栈的大门，更能提升读者对前沿领域的整体认知。主要适合具有一定JavaScript基础的前端工程师，以及对前端开发感兴趣的相关从业人员阅读。

图书详情：京东、当当、亚马逊