探索React生态圈

2004年，对于前端社区来说，是里程碑式的一年。Gmail横空出世，它带来基于前端渲染的原生应用级别的体验，相对于之前的服务端渲染网页可谓提升了一个时代，触动了用户的G点。自此，前端渲染的网站成为无数开发者追逐的方向。

为了更好地开发前端渲染的“原生级别的”网站，包括Backbone和Angular在内的一系列前端框架应运而生，并迅速获得了大规模的采用。但是很快地，新的性能和SEO问题也接踵而来。几经尝试后，Twitter甚至从前端渲染重回服务器渲染，而Strikingly也面对过同样棘手的问题。

2014年，React进入我们的视线。让人耳目一新的是，对于其他开源框架遇到的种种问题，React都自信地给出了解答。几乎没有犹豫，我们开始使用React来重构Strikingly。若干年后，当我们回望，也许会发现，2014年也是前端社区里程碑式的一年。

React简介

React究竟是什么？Facebook把它简单低调地定义成一个“用来构建UI的JavaScript库”。这个定义也许会让我们联想到许多JavaScript模板语言（比如Handlebars和Swig），或者早期的控件库（比如YUI和Dojo），但是React所基于的几个核心概念使它与那些模板和控件库迥然不同。事实上这几个核心概念非常超前，已经给整个前端世界带来了冲击性的影响。它们包括：

1. 组件和基于组件的设计流程；
2. 单向数据流动；
3. 虚拟DOM取代物理DOM作为操作对象；
4. 用JSX语法取代HTML模板，在JavaScript里声明式地描述UI。

这几条简单的原则放在一起带来了大量的好处：

前端和后端都能够从React组件渲染页面，完全解决了SEO长期困扰JavaScript单页应用的问题；

我们可以简单直接地写前端测试而完全忘掉DOM依赖；

组件的封装方式和单向数据流动能够极大地简化前端架构的理解难度。

我们来看一个例子：

[js] view plain copy

1. varHelloMessage=React.createClass({
2. render:function(){
3. return<div>Hello{this.props.name}</div>;&nbsp;&nbsp;
4. }
5. });
7. React.render(<HelloMessagename="John"/>,document.body);

这个React版的Hello World已经展现了React的一些核心特性。首先，HelloMessage是一个React组件；创建React应用的时候，我们总是以组件为出发点。每个组件的核心是一个render方法，在其中我们把这个组件的props和state拼装到一个最终要渲染的模板中，然后返回这个模板（确切地说这里是一个UI描述而不是传统意义上的模板）。这段代码里看起来像HTML一样的部分就是著名的JSX语法，它是在React中描述“模板”的最佳方式。

现在，以var开头的第一段里我们定义了一个叫HelloMessage的组件；下面的React.render这一行所做的，则是把这个组件渲染到document.body里——也就是我们实际的页面上。但在使用〈HelloMessage/〉的时候，我们做了另一件事：name="John"。看起来很像HTML中的元素属性，但是既然JSX不是HTML，这个语法的作用是什么呢？实际上，这就是我们向React组件传入props的方式。回头看第一段，我们可以看到在组件的内部有对this.props.name的引用。这个name就是我们刚刚指定的John！

看到这里，如果你熟悉jQuery的话也许在想，这与$(document.body).html('Hello John') 有什么根本区别呢？

这就是虚拟DOM出场的地方了。我们像写HTML一样写JSX，但是JSX并不会直接变成HTML和DOM。在幕后，React维护着一个虚拟DOM，而实际上被浏览器直接操作的“物理”DOM只是这个虚拟DOM的投影。虚拟DOM不依赖于浏览器环境，它可以运行在任何JavaScript执行环境。这就让下面的代码成为可能：

copy