facebook开源前端UI框架React初探

最近最火的前端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:\nodejs 加入 path, 新建系统变量：NODE_PATH，值为：D:\nodejs\node_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/