目錄

一、簡(jiǎn)介

React是Facebook開源的一個(gè)用于構(gòu)建用戶界面的Javascript庫,已經(jīng) 應(yīng)用于

Facebook及旗下Instagram。

和龐大的AngularJS不同,React專注于MVC架構(gòu)中的V,即視圖。 這使得React很

容易和開發(fā)者已有的開發(fā)棧進(jìn)行融吅。

React順應(yīng)了Web開發(fā)組件化的趨勢(shì)。應(yīng)用React時(shí),你總是應(yīng)該從UI出發(fā)抽象出不

同 的組件,然后像搭積木一樣把它們拼裝起來。

不過,React定義組件的方式和AngularJS截然不同。如果說HTML是一個(gè)輪子,

AngularJS 的指令/Directive則是給這個(gè)輪子鑲了個(gè)金邊,而React,重新造了個(gè)輪

子: JSX。

React拋棄HTML另起爐灶的原因之一是性能的考慮:DOM操作非常之慢。React引入了 虛擬DOM的概念:開發(fā)者操作虛擬DOM,React在必要的時(shí)候?qū)⑺鼈冧秩镜秸嬲?DOM上 —— 有點(diǎn)像游戲開發(fā)中的雙緩沖區(qū)/Double Buffer幀重繪。 引入虛擬DOM的另一個(gè)好處是,容易引入不同的渲染引擎。

二、Hello React!

和AngularJS相比,上手React簡(jiǎn)單到讓人震驚。

在引入React庫之后,開發(fā)API就通過React對(duì)象暴露出來了。我們要做的、能做的,就是:

在虛擬DOM上創(chuàng)建元素,然后將它們渲染到真實(shí)DOM上。

在示例代碼中使用了React對(duì)象的兩個(gè)方法:

, createElement(type,[props],[children...]) - 在虛擬DOM上創(chuàng)建指定的React元素

參數(shù)type用來指定要?jiǎng)?chuàng)建的元素類型,可以是一個(gè)字符串戒一個(gè)React組件類型。當(dāng)使用 字符串時(shí),這個(gè)參數(shù)應(yīng)當(dāng)是標(biāo)準(zhǔn)的HTML標(biāo)簽名稱,比如:p、div、canvas等等。

參數(shù)props是可選的JSON對(duì)象,用來指定元素的附加屬性,比如樣式、CSS類等等。 我們?cè)谑纠泻?jiǎn)單的設(shè)置為null。

從第三個(gè)參數(shù)children開始的所有參數(shù),都被認(rèn)為是這個(gè)元素的子元素。考慮到 虛擬DOM好歹也是DOM,容易理解React需要通過這些子元素參數(shù),讓我們可以構(gòu)造虛擬DOM樹:

var el = React.createElement(_x000D_ "ul",_x000D_ null,_x000D_ React.createElement("li",null,"China"),_x000D_ React.createElement("li",null,"Japan"),_x000D_ React.createElement("li",null,"Korea")_x000D_);

上面的例子在虛擬DOM中創(chuàng)建了一個(gè)具有三個(gè)li子元素的ul元素,看起來有點(diǎn)累。不過 想想,造一個(gè)輪子,總會(huì)付出一些代價(jià)的。

在示例中,我們簡(jiǎn)單地傳入了一個(gè)文本子元素作為p元素的內(nèi)容。

, render(element,container,[callback]) - 將虛擬DOM上的對(duì)象渲染到真實(shí)DOM上

參數(shù)element是我們使用createElement()方法創(chuàng)建的React元素,注意,不是HTML元素!

參數(shù)container是真實(shí)DOM中的HTML元素,作為渲染的目標(biāo)容器,它的內(nèi)容將被render()方法 的執(zhí)行改變。

callback參數(shù)是可選的函數(shù),當(dāng)渲染完成戒更新后被執(zhí)行,通常我們不用它。

三、虛擬DOM

虛擬DOM是React的基石。

之所以引入虛擬DOM,一方面是性能的考慮。Web應(yīng)用和網(wǎng)站不同,一個(gè)Web應(yīng)用 中通常會(huì)在單頁內(nèi)有大量的DOM操作,而這些DOM操作很慢。

在React中,應(yīng)用程序在虛擬DOM上操作,這讓React有了優(yōu)化的機(jī)會(huì)。簡(jiǎn)單說, React在每次需要渲染時(shí),會(huì)先比較當(dāng)前DOM內(nèi)容和待渲染內(nèi)容的差異, 然后再?zèng)Q定如何最優(yōu)地更新DOM。這個(gè)過程被稱為reconciliation。

除了性能的考慮,React引入虛擬DOM更重要的意義是提供了一種一致的開發(fā)方 式來開發(fā)服務(wù)端應(yīng)用、Web應(yīng)用和手機(jī)端應(yīng)用:

因?yàn)橛辛颂摂MDOM這一層,所以通過配備不同的渲染器,就可以將虛擬DOM的內(nèi)容 渲染到不同的平臺(tái)。而應(yīng)用開發(fā)者,使用JavaScript就可以通吃各個(gè)平臺(tái)了。 相當(dāng)棒的思路!

四、React組件

在React中定義一個(gè)組件也是相當(dāng)?shù)娜菀?組件就是一個(gè) 實(shí)現(xiàn)預(yù)定義接口的JavaScript類:

1. React.createClass(meta)

參數(shù)meta是一個(gè)實(shí)現(xiàn)預(yù)定義接口的JavaScript對(duì)象,用來 對(duì)React組件原型進(jìn)行擴(kuò)展。

在meta中,至少需要實(shí)現(xiàn)一個(gè)render()方法,而這個(gè)方法, 必須而且只能返回一個(gè)有效的React元素。

這意味著,如果你的組件是由多個(gè)元素構(gòu)成的,那么你必須在外邊包一個(gè)頂層 元素,然后返回這個(gè)頂層元素。比如我們創(chuàng)建一個(gè)布局組件:

render:function(){_x000D_ return React.createElement(_x000D_ "div",null,_x000D_ React.createElement("div",null,"header"),_x000D_

React.createElement("div",null,"content"),_x000D_ React.create

Element("div",null,"footer")_x000D_ );_x000D_}

注意 :你的React組件名稱的首字母應(yīng)當(dāng)大寫, 關(guān)于大小寫的差異你會(huì)在后面發(fā)現(xiàn)。

在示例代碼中,我們實(shí)現(xiàn)了一個(gè)液晶顯示組件EzLedComp，為了更逼真一些, 定義了簡(jiǎn)

單的樣式,別忘了翻看一下，,你應(yīng)該會(huì)注意到div元素的樣式類是用 className而不

是class聲明的,這是因?yàn)閏lass 是JavaScript的保留字,渲染后,真實(shí)的DOM還會(huì)

是:

<div class="ez-led">Hello, React!</div>

組件定義以后,和標(biāo)準(zhǔn)HTML標(biāo)簽一樣,可以使用createElement()方法 創(chuàng)建元素,只

是這時(shí),第一個(gè)參數(shù)是我們定義的組件類,而不是標(biāo)簽名字符串:

React.createElement(EzLedComp);

五、輪子來了:JSX

React引入虛擬DOM以后,創(chuàng)建DOM樹得在JavaScript里寫代碼,這使得界面定義

變得相當(dāng)繁瑣。比如我們創(chuàng)建兩排的液晶組件得這么寫:

render: function(){_x000D_ return React.createElement(_x000D_ "d

iv",null,_x000D_ React.createElement("div",{className:"ez-led"},"He

llo, React!"),_x000D_ React.createElement("div",{className:"ez-led"},"2015-04-15")_x000D_ );_x000D_}

而它們被渲染后對(duì)應(yīng)的聲明式HTML則簡(jiǎn)單明了:

<div><div class="ez-led">Hello, React!</div><div class="ez-led">2015-04-15

</div></div>

這還只是兩層的樹,要是需要一棵大樹呢？

填一個(gè)坑,需要挖另一個(gè)坑。于是,JSX來了。

JSX是對(duì)JavaScript語法的擴(kuò)展,它讓我們可以在JavaScript代碼中以類似HTML 的方式創(chuàng)建React元素。簡(jiǎn)單的說,每當(dāng)你需要使用createElement()時(shí), 就把這個(gè)函數(shù)調(diào)用部分用渲染目標(biāo)HTML替換，提醒下,不完全一致,比如class屬性 要用className代替，:

//JavaScript

var e = React.createElement(_x000D_ "ul",null,_x000D_ React.createElement("li",null,"China"),_x000D_ React.createElement("li",null,"Japan"),_x000D_ ); 

//JSX = JavaScript + XML like extension var e = <ul>_x000D_ <li>China</li>_x000D_ <li>Japan<

/li>_x000D_ </ul>;

說實(shí)話,這種寫法讓代碼看起來相當(dāng)鬧心。但相比寫大段的腳本來創(chuàng)建DOM樹, 這至少效率高吧。好在,React不強(qiáng)制使用JSX,如果你是強(qiáng)迫癥患者, 確實(shí)感覺到不舒服,那么,可以不用它。

六、使用JSX

很顯然,增加了這些XML語法的腳本不能再稱為JavaScript了,使用上 略有區(qū)別。 , 指定腳本類型

在html文件中引入的JSX腳本,需要指定類型為text/jsx:

//內(nèi)聯(lián)腳本_x000D_<script type="text/jsx">...</script> //外部腳本_x000D_<script src="a.js" type="text/jsx"></script>

引入JSX語法轉(zhuǎn)換庫

在html中使用JSX,還需要引入JSX語法轉(zhuǎn)換庫JSXTransform.js。 這個(gè)庫加載后,將在DOM樹構(gòu)造完成后，通過監(jiān)聽DOMContentLoaded事件，處理 JSX腳本:

1. 搜索DOM樹中的script節(jié)點(diǎn),如果其類型為text/jsx則進(jìn)行后續(xù)處理

2.? 讀取script節(jié)點(diǎn)的內(nèi)容,將其轉(zhuǎn)化為JavaScript代碼

3. 構(gòu)造一個(gè)新的script元素,設(shè)置其內(nèi)容為轉(zhuǎn)化結(jié)果代碼,并追加到DOM樹head元素中

JSXTransform.js引入后通過全局對(duì)象JSXTransformer提供了API接口, 我們可以使用transform()方法來模擬這個(gè)語法自勱轉(zhuǎn)換的過程。