IT技术互动交流平台

facebook开源前段UI框架React初探

作者:digdeep  发布日期:2015-04-10 21:49:51

最近最火的前端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(
    <h3>Hello, world!</h3>,
    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(
  <h3>Hello, world!</h3>,
  document.getElementById('example')
);

然后调用react-tool中的 jsx 脚本来编译:

qqO6PC9wPgoKPHByZSBjbGFzcz0="brush:java;">React.render( React.createElement("h3", null, "Hello, world!"), document.getElementById('example') );

React.createElement("h3", null, "Hello, world!") 表示生产一个 h3 标签,内容为 "Hello, world!",然后React.render(),将生产的h3标签渲染插入到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('h3', 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/

Tag标签: 框架  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规