目錄

一、簡介

React是Facebook開源的一個用于構(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ā)組件化的趨勢。應(yīng)用React時,你總是應(yīng)該從UI出發(fā)抽象出不

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

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

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

子: JSX。

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

二、Hello React!

和AngularJS相比,上手React簡單到讓人震驚。

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

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

在示例代碼中使用了React對象的兩個方法:

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

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

參數(shù)props是可選的JSON對象,用來指定元素的附加屬性,比如樣式、CSS類等等。 我們在示例中簡單的設(shè)置為null。

從第三個參數(shù)children開始的所有參數(shù),都被認(rèn)為是這個元素的子元素?？紤]到 虛擬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)建了一個具有三個li子元素的ul元素,看起來有點累。不過 想想,造一個輪子,總會付出一些代價的。

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

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

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

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

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

三、虛擬DOM

虛擬DOM是React的基石。

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

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

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

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

四、React組件

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

1. React.createClass(meta)

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

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

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

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)于大小寫的差異你會在后面發(fā)現(xiàn)。

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

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

是class聲明的,這是因為class 是JavaScript的保留字,渲染后,真實的DOM還會

是:

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

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

是這時,第一個參數(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_}

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

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

</div></div>

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

填一個坑,需要挖另一個坑。于是,JSX來了。

JSX是對JavaScript語法的擴(kuò)展,它讓我們可以在JavaScript代碼中以類似HTML 的方式創(chuàng)建React元素。簡單的說,每當(dāng)你需要使用createElement()時, 就把這個函數(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>;

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

六、使用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。 這個庫加載后,將在DOM樹構(gòu)造完成后，通過監(jiān)聽DOMContentLoaded事件，處理 JSX腳本:

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

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

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

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