|
最近最火的前端UI框架非React莫屬了,。趕緊找時間了解一下。 項目地址：http://facebook./react/ 官方的介紹：A JavaScript library for building user interfaces （前端UI的js框架） 具有三個特點(diǎn)： 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用于實現(xiàn)前端MVC中的view中,，因為React并不假定你使用的其它前端技術(shù)堆棧,，所以很容易在已經(jīng)存在的項目中試用。) 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節(jié)點(diǎn)，然后React負(fù)責(zé)將虛擬DOM節(jié)點(diǎn)到實際DOM節(jié)點(diǎn)的轉(zhuǎn)換,，這樣的話,，使前端UI編程更加的簡單而且性能更好。) Data flowReact implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.(React實現(xiàn)單向的數(shù)據(jù)流,，從而減少了傳統(tǒng)數(shù)據(jù)綁定的模板文件,，而且更加容易理解) 其實我自己的理解是：React是一個將前端UI組件化的框架，它可以將頁面上的各種UI實現(xiàn)為一個一個的組件,，我們向組件傳入數(shù)據(jù),，React負(fù)責(zé)生成對應(yīng)的UI，然后進(jìn)行渲染,。實現(xiàn)方式是虛擬DOM和單向數(shù)據(jù)流,，虛擬DOM提供了更好的性能，因為比如一個UI組件包含多個html標(biāo)簽元素,，如果我們需要修改其中的幾個標(biāo)簽中的數(shù)據(jù)的話,，就會對DOM操作幾次(比如使用jquey)，然而使用虛擬DOM，我們是先在內(nèi)存中生成整個UI組件,，然后一次性將虛擬DOM轉(zhuǎn)換渲染到實際DOM,，所以對實際DOM的操作只有一次。單向數(shù)據(jù)流是指沒有數(shù)據(jù)的雙向綁定,，數(shù)據(jù)只從Model向View傳送,，每次更新都是使用一個全新的UI組件替換頁面上舊的UI組件，更加的簡單,。 其實React最大特點(diǎn)是：UI組件化和UI整體替換的更新方式,，然后才是性能更好，更加簡單,。組件化就容易維護(hù),，方便重用。 實例： <!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> 上面代碼導(dǎo)入React的js庫react.js,，而JSXTransformer.js是將頁面上 type='text/jsx' 的代碼轉(zhuǎn)換成 text/javascript 代碼的轉(zhuǎn)換庫,。轉(zhuǎn)換可以再瀏覽器端進(jìn)行，也可以使用Nodejs再服務(wù)端進(jìn)行,。實際項目運(yùn)行都是在服務(wù)端進(jìn)行轉(zhuǎn)換,。我們先看下在瀏覽器端進(jìn)行轉(zhuǎn)換的效果： 可以看到React成功渲染出了一個UI組件，但是下面提示我們應(yīng)該先在服務(wù)端預(yù)編譯 jsx 腳步,。 然后我們再看服務(wù)端轉(zhuǎn)換預(yù)編譯 jsx 方法： 安裝Node.js：到 https:/// 下載對應(yīng)平臺的安裝文件：node-v0.12.2-x86.msi 我是win7 64位,，雙擊一路下一步安裝完成。配置系統(tǒng)路徑,，將 D:\nodejs 加入 path, 新建系統(tǒng)變量：NODE_PATH,，值為：D:\nodejs\node_modules\ 安裝 react-tools: npm install react-tools 安裝成功如下圖： 再預(yù)編譯 jsx 腳本之前，我們將它提取出來,，單獨(dú)放入一個文件：helloworld.js React.render( <h1>Hello, world!</h1>, document.getElementById('example'));然后調(diào)用react-tool中的 jsx 腳本來編譯： 上面將 當(dāng)前目錄下的 jsxfile 文件夾中的所有的 jsx 腳本編譯到 當(dāng)前目前下的 result 文件夾下,，編譯之后的代碼為： React.render( React.createElement('h1', null, 'Hello, world!'), document.getElementById('example'));React.createElement('h1', null, 'Hello, world!') 表示生產(chǎn)一個 h1 標(biāo)簽，內(nèi)容為 'Hello, world!',，然后React.render(),，將生產(chǎn)的h1標(biāo)簽渲染插入到document.getElementById('example')節(jié)點(diǎn)下去。最后的helloworld.html的內(nèi)容為： <!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. 當(dāng)然我們也可以將編譯生產(chǎn)的js單獨(dú)放入一個文件,，然后使用 <script type='text/javascript' src='xxx'> 引入到頁面。 效果為： 下面我們分析下Github上使用React實現(xiàn)的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基礎(chǔ)知識： TabSelector({label: 'Color', data: data, selected: null}) 相當(dāng)于一個組件的構(gòu)造函數(shù),，傳入我們從后臺獲得的數(shù)據(jù)(一個json對象)，在組件TabSelector的實現(xiàn)中有各種函數(shù),，這些函數(shù)中訪問我們傳入的數(shù)據(jù)的方式是：this.props.label, this.props.data, this.props.selected,。render方法的實現(xiàn)，就是使用傳入的數(shù)據(jù)，然后返回我們需要在頁面上渲染的UI組件,，this.props.data.map() 這里使用了javascript中數(shù)組的map函數(shù)來處理每一個數(shù)組項,，每次得到 <li></li> ，所以返回的var tabs的結(jié)果是一個 <li></li> 的數(shù)組,。最后通過 return <div className='tab-selector'> <label>{this.props.label}</label> <ul>{tabs}</ul> </div>; 返回最終生成的UI組件,。這里使用 var 定義的變量 tabs 的訪問方式是：{tabs}，訪問傳入的數(shù)據(jù)的方式也是 {this.props.label},。每一個<li></li>標(biāo)簽上定義了 onClick={this.handleOnClick} 點(diǎn)擊的處理方法,，而 handleOnClick的實現(xiàn)為，每次點(diǎn)擊時,，就使用被點(diǎn)擊的<li></li>元素的data-value 屬性的值來更新自己的 className={selected} 中的 {selected},，從而實現(xiàn)被點(diǎn)擊時就改變它的樣式。而這個實現(xiàn)中調(diào)用了setState()方法,，這個方法是React庫中的方法,，它被調(diào)用時，如果state的狀態(tài)發(fā)生了變化,，那么就會對UI組件使用新的state進(jìn)行重新渲染,。 在getInitialState函數(shù)中定義了該組件的state的初始狀態(tài)(selected屬性的值)，該函數(shù)在組件初始化時調(diào)用： getInitialState: function() { return {selected: this.props.selected}; },而 this.setState({'selected': evt.target.getAttribute('data-value')}) 會修改該組件的狀態(tài)state的值,，組件的state變化的話,，會導(dǎo)致組件UI的刷新，重新生成,，然后插入DOM,。實際頁面如下圖： 點(diǎn)擊某個 tab 的效果如下圖： 所以總結(jié)一下： 1）getInitialState 函數(shù)用于定義組件的state； 2）render 函數(shù)定義了根據(jù)傳入的數(shù)據(jù)生成UI組件的方法,； 3）而 setState 函數(shù)會修改組件的state,，從而觸發(fā)組件UI的刷新，重新調(diào)用render方法,； 4）handleOnClick 函數(shù)定義了點(diǎn)擊事件的處理,； 5）訪問傳入的數(shù)據(jù)的方法：{this.props.xx} 6）訪問js變量的方法： {variable} 7）css 中的 class 要使用 className 替換，不能直接使用 class 8）React.createClass 創(chuàng)建組件(類),，使用了面向?qū)ο蟮母拍顏磉M(jìn)行處理,，創(chuàng)建一個組件，就相當(dāng)于實例化一個對象,，類就是“組件類”,，組件就是“對象” 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> 明顯感覺到j(luò)query也就是javascript在拼接 html 代碼時的繁瑣，總是需要使用引號來處理，而React的jsx寫法和html幾乎一樣,。
有價值的參考鏈接： React實現(xiàn)的理論知識：http://www./cn/articles/subversion-front-end-ui-development-framework-react React的介紹：http://www.cnblogs.com/chyingp/p/react-getting-started.html 官網(wǎng)：http://facebook./react/ |
|
|
