最近最火的前端UI框架非React莫属了。赶紧找时间了解一下。
项目地址：http://facebook.github.io/react/
官方的介绍：A JavaScript library for building user interfaces （前端UI的js框架）
具有三个特点：
Just the UI
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project. (一般人们将React用于实现前端MVC中的view中，因为React并不假定你使用的其它前端技术堆栈，所以很容易在已经存在的项目中试用。)
Virtual DOM
React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. (使用React我们并不直接操作浏览器中的DOM，React引入了虚拟DOM的概念，我们使用js代码直接生成虚拟DOM节点，然后React负责将虚拟DOM节点到实际DOM节点的转换，这样的话，使前端UI编程更加的简单而且性能更好。)
Data flow
React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.(React实现单向的数据流，从而减少了传统数据绑定的模板文件，而且更加容易理解)
其实我自己的理解是：React是一个将前端UI组件化的框架，它可以将页面上的各种UI实现为一个一个的组件，我们向组件传入数据，React负责生成对应的UI，然后进行渲染。实现方式是虚拟DOM和单向数据流，虚拟DOM提供了更好的性能，因为比如一个UI组件包含多个html标签元素，如果我们需要修改其中的几个标签中的数据的话，就会对DOM操作几次(比如使用jquey)，然而使用虚拟DOM，我们是先在内存中生成整个UI组件，然后一次性将虚拟DOM转换渲染到实际DOM，所以对实际DOM的操作只有一次。单向数据流是指没有数据的双向绑定，数据只从Model向View传送，每次更新都是使用一个全新的UI组件替换页面上旧的UI组件，更加的简单。
其实React最大特点是：UI组件化和UI整体替换的更新方式，然后才是性能更好，更加简单。组件化就容易维护，方便重用。
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="build/react.js"></script> <script src="build/JSXTransformer.js"></script> </head> <body> <div id="example"></div> <script type="text/jsx"> React.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
上面代码导入React的js库react.js，而JSXTransformer.js是将页面上 type="text/jsx" 的代码转换成 text/javascript 代码的转换库。转换可以再浏览器端进行，也可以使用Nodejs再服务端进行。实际项目运行都是在服务端进行转换。我们先看下在浏览器端进行转换的效果：
可以看到React成功渲染出了一个UI组件，但是下面提示我们应该先在服务端预编译 jsx 脚步。
然后我们再看服务端转换预编译 jsx 方法：
安装Node.js：到 https://nodejs.org/ 下载对应平台的安装文件：node-v0.12.2-x86.msi
我是win7 64位，双击一路下一步安装完成。配置系统路径，将 D: odejs 加入 path, 新建系统变量：NODE_PATH，值为：D: odejs ode_modules
安装 react-tools: npm install react-tools
安装成功如下图：
再预编译 jsx 脚本之前，我们将它提取出来，单独放入一个文件：helloworld.js
React.render( <h1>Hello, world!</h1>, document.getElementById('example') );
然后调用react-tool中的 jsx 脚本来编译：
上面将 当前目录下的 jsxfile 文件夹中的所有的 jsx 脚本编译到 当前目前下的 result 文件夹下，编译之后的代码为：
React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById('example') );
React.createElement("h1", null, "Hello, world!") 表示生产一个 h1 标签，内容为 "Hello, world!"，然后React.render()，将生产的h1标签渲染插入到document.getElementById('example')节点下去。最后的helloworld.html的内容为：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="build/react.js"></script> </head> <body> <div id="example"></div> <script type="text/javascript"> React.render( React.createElement('h1', null, 'Hello, world!'), document.getElementById('example') // $("#example")[0] ); </script> </body> </html>
注意这里我们将 JSXTransformer.js 文件去掉了，并且将 text/jsx 改成了 text/javascript. 当然我们也可以将编译生产的js单独放入一个文件，然后使用 <script type="text/javascript" src="xxx"> 引入到页面。
效果为：
下面我们分析下Github上使用React实现的Tab选择器
地址：https://github.com/supnate/react-tab-selector 该例子很好的说明了React的基本用法
源码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/react.js"></script> <script src="js/JSXTransformer.js"></script> <link rel="stylesheet" tpe="text/css" href="style.css"/> </head> <body> <div id="container"></div> <script type="text/jsx"> var data = [ {name: 'Red', value: 'red'}, {name: 'Blue', value: 'blue'}, {name: 'Yellow', value: 'yellow'}, {name: 'Green', value: 'green'}, {name: 'White', value: 'White'} ]; var TabSelector = React.createClass({ getInitialState: function() { return {selected: this.props.selected}; }, handleOnClick: function (evt) { this.setState({'selected': evt.target.getAttribute('data-value')}) }, render: function() { var tabs = this.props.data.map(function (item) { var selected = item.value == this.state.selected ? 'selected' : ''; return <li data-value={item.value} className={selected} onClick={this.handleOnClick}> {item.name} </li>; }, this); return <div className="tab-selector"> <label>{this.props.label}</label> <ul>{tabs}</ul> </div>; } }); React.render( TabSelector({label: 'Color', data: data, selected: null}), document.getElementById('container') ); </script> </body> </html>
这个例子涉及到很多的React基础知识：
TabSelector({label: 'Color', data: data, selected: null}) 相当于一个组件的构造函数，传入我们从后台获得的数据(一个json对象)，在组件TabSelector的实现中有各种函数，这些函数中访问我们传入的数据的方式是：this.props.label, this.props.data, this.props.selected。render方法的实现，就是使用传入的数据，然后返回我们需要在页面上渲染的UI组件，this.props.data.map() 这里使用了javascript中数组的map函数来处理每一个数组项，每次得到 <li></li> ，所以返回的var tabs的结果是一个 <li></li> 的数组。最后通过
return <div className="tab-selector"> <label>{this.props.label}</label> <ul>{tabs}</ul> </div>;
返回最终生成的UI组件。这里使用 var 定义的变量 tabs 的访问方式是：{tabs}，访问传入的数据的方式也是 {this.props.label}。每一个<li></li>标签上定义了 onClick={this.handleOnClick} 点击的处理方法，而 handleOnClick的实现为，每次点击时，就使用被点击的<li></li>元素的data-value 属性的值来更新自己的 className={selected} 中的 {selected}，从而实现被点击时就改变它的样式。而这个实现中调用了setState()方法，这个方法是React库中的方法，它被调用时，如果state的状态发生了变化，那么就会对UI组件使用新的state进行重新渲染。
在getInitialState函数中定义了该组件的state的初始状态(selected属性的值)，该函数在组件初始化时调用：
getInitialState: function() {
return {selected: this.props.selected};
},
而 this.setState({'selected': evt.target.getAttribute('data-value')}) 会修改该组件的状态state的值，组件的state变化的话，会导致组件UI的刷新，重新生成，然后插入DOM。实际页面如下图：
点击某个 tab 的效果如下图：
所以总结一下：
1）getInitialState 函数用于定义组件的state；
2）render 函数定义了根据传入的数据生成UI组件的方法；
3）而 setState 函数会修改组件的state，从而触发组件UI的刷新，重新调用render方法；
4）handleOnClick 函数定义了点击事件的处理；
5）访问传入的数据的方法：{this.props.xx}
6）访问js变量的方法： {variable}
7）css 中的 class 要使用 className 替换，不能直接使用 class
8）React.createClass 创建组件(类)，使用了面向对象的概念来进行处理，创建一个组件，就相当于实例化一个对象，类就是“组件类”，组件就是“对象”
9）访问state的属性方法：{this.state.xxx}
10）React的jsx脚本的写法，和 html 页面的写法是相似的，并不像在js中那样需要引号来包含，这样方便我们直接将前端的 html 页面使用React来组件化
我们可以比较一下采用jquery的写法：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/jquery.min.js"></script> <link rel="stylesheet" tpe="text/css" href="style.css"/> </head> <body> <div id="container"></div> <script type="text/javascript"> var data = [ {name: 'Red', value: 'red'}, {name: 'Blue', value: 'blue'}, {name: 'Yellow', value: 'yellow'}, {name: 'Green', value: 'green'}, {name: 'White', value: 'White'} ]; $.fn.TabSelector = function (options) { var arr = ['<div class="tab-selector">']; arr.push('<label>', options.label, '</label>'); arr.push('<ul>'); options.data.forEach(function (item) { arr.push('<li data-value="', item.value, '">'); arr.push(item.name); arr.push('</li>'); }); arr.push('</ul></div>'); this.html(arr.join('')); var lastSelected = null; this.on('click', 'li', function () { var $this = $(this); if (lastSelected) { lastSelected.removeClass('selected'); } $this.addClass('selected'); lastSelected = $this; }); return this; } $('#container').TabSelector({data: data, selected: null, label: 'Color'}); </script> </body> </html>
明显感觉到jquery也就是javascript在拼接 html 代码时的繁琐，总是需要使用引号来处理，而React的jsx写法和html几乎一样。
有价值的参考链接：
React实现的理论知识：http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react
React的介绍：http://www.cnblogs.com/chyingp/p/react-getting-started.html
官网：http://facebook.github.io/react/