注意：這篇文章假定你熟悉模板技術(shù)，至少使用過像art-template或ejs這樣的簡單模板

當(dāng)然，這意味著你應(yīng)該具備一些JS基礎(chǔ)，對DOM操作足夠熟練

同時(shí)，這篇文章要求你具備基本的面向?qū)ο笏枷?，不清楚的可參考視頻教程（不懂裝懂系列）

由于React特殊語法要求，這篇文章要求你需要熟悉ES6的面向?qū)ο笳Z法

模板的作用？

例如下面這個(gè)模板：

我們準(zhǔn)備好一份數(shù)據(jù)：

將數(shù)據(jù)填充至模板，生成HTML頁面：

當(dāng)數(shù)據(jù)頻繁改變時(shí)，會帶來什么問題？

每一次數(shù)據(jù)改變，我們都需要將最新的數(shù)據(jù)重新填充模板

然后將生成的HTML文本重新append到頁面上進(jìn)行渲染

我們不禁要問：難道沒有更簡單的方式？

于是我們有了下面的解決方案：

如果我們能將模板與數(shù)據(jù)綁定在一起，當(dāng)數(shù)據(jù)變化時(shí)

自動填充模板并更新頁面。

這樣一來，我們只要操作數(shù)據(jù)，頁面內(nèi)容就可以實(shí)時(shí)產(chǎn)生變化了。

這就是react這個(gè)基于模板技術(shù)的框架給我們帶來的好處。

React組件化到底是什么東西？

首先我們必須要先問一個(gè)問題。

什么是組件？

我們再回過頭看剛才的那個(gè)模板，它可以稱得上一個(gè)組件嗎？

雖然這個(gè)模板是可復(fù)用的，但把它叫做一個(gè)組件，恐怕還遠(yuǎn)遠(yuǎn)談不上。

為什么呢？ 這還要看我們?nèi)绾蝸矶x，什么是組件？

所謂組件，指的是高度可復(fù)用的動態(tài)模板

而我們之前的模板，缺乏了3個(gè)重要的條件

• 第一，它沒有做到數(shù)據(jù)綁定，當(dāng)數(shù)據(jù)改變時(shí)，頁面不能夠自動更新。

• 第二，它無法保存頁面中的交互動作。例如鼠標(biāo)的劃入、單擊事件等等。

• 第三，模板和模板之間不能夠相互嵌套或引用，無法達(dá)到復(fù)用的最大化。

而React編寫的組件，搞定了上述所有問題。

為什么React標(biāo)準(zhǔn)語法推薦使用ES6？

這還得從我們的面向?qū)ο笏枷胝f起

我們都知道類和對象之間的關(guān)系

如果把類看作是一個(gè)模板，那么通過這個(gè)模板，我們可以無限次的 實(shí)例化（new）對象。

在面向?qū)ο螽?dāng)中，我們的類，就相當(dāng)于一個(gè)高度可復(fù)用的組件

于是就有了下面的語法

我們使用Class來定義一個(gè)組件，每個(gè)組件必須有一個(gè)render方法用來渲染頁面

而在render方法里，我們可以像往常一樣編寫我們的模板內(nèi)容 ↓↓↓

不僅如此，我們連單擊函數(shù)也保存在了組件當(dāng)中?↓↓↓

組件當(dāng)中的數(shù)據(jù)，可以通過構(gòu)造函數(shù)來進(jìn)行傳遞。?↓↓↓

最后，我們通過ES6的模塊化語法，將該組件以模塊的形式暴露出去，讓別的組件可以引用。?↓↓↓

引入組件之后，我們可以像寫HTML標(biāo)簽?zāi)菢?，使用這個(gè)組件?↓↓↓

好了，以上就是一個(gè)React組件的標(biāo)準(zhǔn)寫法，是不是很簡單呢？

React中的虛擬DOM是怎么一回事？

回到我們之前說的數(shù)據(jù)綁定的問題上來

假設(shè)，我們現(xiàn)在有一個(gè)組件，DOM結(jié)構(gòu)如下

目前，雖然React已經(jīng)可以做到，在數(shù)據(jù)改變時(shí)，頁面可以自動的實(shí)時(shí)更新

但是?這仍然沒能解決一個(gè)問題

當(dāng)組件中任何一點(diǎn)小小的數(shù)據(jù)發(fā)生改變的時(shí)候，我們都需要將整個(gè)組件重新渲染一次，才能讓頁面更新。

這會給瀏覽器帶來巨大的工作負(fù)擔(dān)，很顯然這也是不必要的。

于是，React引入了虛擬DOM技術(shù)

首先，在內(nèi)存中構(gòu)建一棵對象樹，這棵樹的結(jié)構(gòu)跟DOM結(jié)構(gòu)一致。

每個(gè)對象對應(yīng)一個(gè)DOM節(jié)點(diǎn)，并保存這個(gè)節(jié)點(diǎn)的所有信息（理論上包括事件）

我們管這棵對象樹，也叫做虛擬DOM樹

接下來，當(dāng)數(shù)據(jù)發(fā)生改變的時(shí)候，

React會再次生成一棵新的虛擬DOM樹

接下來，React會掃描這兩棵虛擬DOM樹的節(jié)點(diǎn)

最終將所有發(fā)生改變的節(jié)點(diǎn)記錄下來

最終React會將發(fā)生改變的DOM節(jié)點(diǎn)做更新，而不會更新整個(gè)組件

這就是虛擬DOM提升性能的原理。

總結(jié)一下React的特點(diǎn)：