|
最近最火的前端UI框架非React莫属了。赶紧找时间了解一下。 项目地址：http://facebook./react/ 官方的介绍：A JavaScript library for building user interfaces （前端UI的js框架） 具有三个特点： Just the UILots 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 DOMReact 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 flowReact 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:/// 下载对应平台的安装文件：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./cn/articles/subversion-front-end-ui-development-framework-react React的介绍：http://www.cnblogs.com/chyingp/p/react-getting-started.html 官网：http://facebook./react/ |
|
|
