首先，我們來看看 React 在世界范圍的熱度趨勢，下圖是關(guān)鍵詞“房價”和 “React” 在 Google Trends 上的搜索量對比，藍(lán)色的是 React，紅色的是房價，很明顯，人類對 React 的關(guān)注程度已經(jīng)遠(yuǎn)遠(yuǎn)超過了對房價的關(guān)注。

從這些數(shù)據(jù)中，大家能看出什么？ 可以很明顯的看出，我在一本正經(jīng)的扯淡。

從2014年到現(xiàn)在，React、jQuery和 Angular 的熱度趨勢對比，可以很明顯的看到（上圖），React 在全球的熱度趨勢增長非?？臁?/p>

上圖是 React 在國內(nèi)的百度搜索指數(shù)，是拿 React 和 Nodejs 做了個對比，可以看出 React 的關(guān)注度也已經(jīng)逼近 nodejs。

雖然在關(guān)注總量上 React 還遠(yuǎn)不及 jQuery 和 Angular 等等，但它的增長幅度超乎你想象，你知道這意味著什么嗎？這意味著關(guān)注 React，你就比大多數(shù)人走在了業(yè)界的前沿！

[[157031]]

那么React到底是什么鬼？

引用官網(wǎng)的簡介，"一個用來構(gòu)建用戶界面的javascript庫"。

React 起源于 Facebook 的內(nèi)部項目，因為 FB 對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

由于 React 的設(shè)計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具。

和 Backbone、Angular 等 MV* 框架不一樣，它只處理 View 邏輯 ，它只處理 View 邏輯，它只處理 View 邏輯。所以如果你喜歡它，你可以很容易的將它接入到現(xiàn)有工程中，然后用 React 重寫 HTML 部分即可，不用修改邏輯。

近幾年 web 領(lǐng)域的技術(shù)革新非常迅速，React也是一項新技術(shù)…話說React出來也已經(jīng)2年了，其實并不算什么新技術(shù)了，只是在國內(nèi)還沒有普及開，這篇文章的目的也是幫助大家更快的理解 react 和認(rèn)識 react 能給我們帶來的價值。

[[157032]]

React 這么火，那么它到底有什么牛逼的地方？

上圖是2015年年初的數(shù)據(jù)

[[157033]]

這是 Facebook 的好友動態(tài)頁面，也是 Facebook 訪問量***的頁面沒有之一，通過 Chrome React 插件可以看到這個頁面確實是用 React 實現(xiàn)的。 （有同事問我為什么關(guān)注柳巖，我說因為我是柳巖的球迷啊）

前面給大家來了一波前戲，相信大家已經(jīng)有點迫不及待了，那么，進(jìn)入正題： 首先，先跟大家描述下 React 最特別的部分，聽完這部分大家基本就能夠在腦海里建立起一個 React 的大致印象。

然后是 React 的核心內(nèi)容，聽完這部分大家待會回去就可以開始寫代碼然后今天晚上發(fā)布上線了。 ***是 React 能夠給我們實際帶來的價值，我們不作無意義的代碼重構(gòu)。

首先，我們來看JSX——

[[157034]]

JSX 使用的是預(yù)編譯模板，React 提供了一個預(yù)編譯工具，叫 react-tools，可以通過 npm 命令安裝，一般是在開發(fā)時期運行，運行后它會啟動一個監(jiān)聽程序，實時監(jiān)聽 JSX 源碼的修改，然后自動編譯為 JS 代碼。

大家留意下，render() 方法里的被編譯成了 React.createElement()，它這么做，目的就是為了實現(xiàn)虛擬 DOM。

[[157035]]

接下來我們來了解 React ***的亮點 ———— 虛擬 DOM。

傳統(tǒng) web app 和 DOM 直接交互，由App來控制DOM的構(gòu)建和渲染、元素屬性的讀寫、事件的注冊和銷毀等等。 當(dāng)新產(chǎn)品剛上線的時候，這種做法看起來也挺好。但隨著產(chǎn)品功能越來越豐富、代碼量越來越多、開發(fā)團(tuán)隊人員越來越多 —————

一年后

你的代碼可能會變成這樣。

當(dāng)然，合理的代碼規(guī)劃能夠避免這類問題，但團(tuán)隊里難免會有擅長屠宰式編程的同學(xué)，分分鐘把你代碼改的面目全非。

#p#

這時，React的虛擬DOM和單項數(shù)據(jù)流就能很好的解決這個問題。

虛擬DOM則是在DOM的基礎(chǔ)上建立了一個抽象層，我們對數(shù)據(jù)和狀態(tài)所做的任何改動，都會被自動且高效的同步到虛擬DOM，***再批量同步到DOM中。

虛擬DOM會使得App只關(guān)心數(shù)據(jù)和組件的執(zhí)行結(jié)果，中間產(chǎn)生的DOM操作不需要App干預(yù)，而且通過虛擬DOM來生成DOM，會有一項非常可觀收益-----性能。

所有人都知道DOM慢，渲染一個空的DIV，瀏覽器需要為這個DIV生成幾百個屬性，而虛擬DOM只有6個，所以減少不必要的重排重繪以及DOM讀寫能夠?qū)撁驿秩拘阅苡写蠓嵘?/p>

那么我們來看看虛擬DOM是怎么做的：React會在內(nèi)存中維護(hù)一個虛擬DOM樹，當(dāng)我們對這個樹進(jìn)行讀或?qū)懙臅r候，實際上是對虛擬DOM進(jìn)行的。當(dāng)數(shù)據(jù)變化時，然后React會自動更新虛擬DOM，然后拿新的虛擬DOM和舊的虛擬DOM進(jìn)行對比，找到有變更的部分，得出一個Patch，然后將這個Patch放到一個隊列里，最終批量更新這些Patch到DOM中。

這樣的機(jī)制可以保證即便是根節(jié)點數(shù)據(jù)的變化，最終表現(xiàn)在DOM上的修改也只是受這個數(shù)據(jù)影響的部分，可以保證非常高效的渲染。

但這樣也是有一定的缺陷的----***渲染大量DOM時因為多了一層虛擬DOM的計算，會比innerHTML插入方式慢，所以使用時需要確保不要一次性渲染大量DOM。

幾個UI組件的渲染性能對比

http://mathieuancelin.github.io/js-repaint-perfs/

[[157040]]

一個最基本的 React 組件由數(shù)據(jù)和JSX兩個主要部分構(gòu)成，我們先來看看數(shù)據(jù)。

這是一個簡單單完整的React組件【類】，細(xì)節(jié)大家先不用太在意細(xì)節(jié)，了解機(jī)制就可以。

props 主要作用是提供數(shù)據(jù)來源，可以簡單的理解為 props 就是構(gòu)造函數(shù)的參數(shù)。 state 唯一的作用是控制組件的表現(xiàn)，用來存放會隨著交互變化狀態(tài)，比如開關(guān)狀態(tài)等。

JSX 做的事情就是根據(jù) state 和 props 中的值，結(jié)合一些視圖層面的邏輯，輸出對應(yīng)的 DOM 結(jié)構(gòu)。

[[157041]]

前面我們知道了一個簡單的組件的構(gòu)成，但單個的組件肯定不能滿足實際需求，我們需要做的是將這些獨立的組件進(jìn)行組裝，同時找出共性的部分進(jìn)行復(fù)用。

比如這樣一個場景

我們以這樣一個界面為例，可以看出，里面的 <Pub/> <Article/> 都是最細(xì)粒度的組件，是可以復(fù)用的。 首先，我們來看下Article的代碼——

這個就是我們分解出來的 Article 組件，它需要2個屬性，article對象和showImage。article對象包含圖片、地址、標(biāo)題、描述信息，showImage是一個布爾類型，用來判斷是否需要顯示成一個圖片。

這個組件本身的實現(xiàn)可以很簡單也可以很復(fù)雜，但使用者可不關(guān)心你的內(nèi)部實現(xiàn)，使用者關(guān)心的是組件需要什么參數(shù)就可以了。

外國人的組件化思想比我們國內(nèi)的普及程度高很多，不只局限于軟件開發(fā)，包括實體行業(yè)的咖啡機(jī)、加油站、 兒童搖搖車都有這種設(shè)計思想在里面。

[[157042]]

希望大家在設(shè)計模塊的時候，也盡可能將組件邏輯對外透明，來減少維護(hù)成本。

大家留意一下標(biāo)虛線的部分，這里復(fù)用了 Article 組件。這時的 Article 組件看起來就是一個普通的標(biāo)簽而已，簡單吧。

這個是熱問組件，也復(fù)用了 Article 組件。這就是 React 如絲般順滑的組件復(fù)合。

[[157043]]

這個，叫做竹筧，是中日傳統(tǒng)禪文化中常見的庭院裝飾品，它的構(gòu)造可簡單可復(fù)雜，但原理很簡單，比如這個竹筧，水從竹筧頂部入口流入內(nèi)部，并按照固定的順序從上向下依次流入各個小竹筒，然后驅(qū)動水輪轉(zhuǎn)動。對于強(qiáng)迫癥患者來說，觀賞竹筧的絕對是一種很享受的過程的***，你會發(fā)現(xiàn)這些小玩意竟然能這么流暢的協(xié)調(diào)起來，好神奇。

[[157044]]

如果竹筧是一個組件的話，那么水就是組件的數(shù)據(jù)流。

在React中，數(shù)據(jù)流是自上而下單向的從父節(jié)點傳遞到子節(jié)點，所以組件是簡單且容易把握的，他們只需要從父節(jié)點提供的props中獲取數(shù)據(jù)并渲染即可。如果頂層組件的某個prop改變了，React會遞歸地向下遍歷整棵組件數(shù)，重新渲染所有使用這個屬性的組件。

這個是前面看到的 Article 題組件，擁有一個叫做 articles 的屬性。

在組件內(nèi)部，可以通過this.props來訪問props，props是組件唯一的數(shù)據(jù)來源，對于組件來說：

props永遠(yuǎn)是只讀的。

#p#

組件的屬性類型如果不進(jìn)行聲明和驗證，那么很可能使用者傳給你的屬性值或者類型是無效的，那會導(dǎo)致一些意料之外的故障。好在React已經(jīng)為我們提供了一套非常簡單好用的屬性校驗機(jī)制——

React有一個PropTypes屬性校驗工具，經(jīng)過簡單的配置即可。當(dāng)使用者傳入的參數(shù)不滿足校驗規(guī)則時，React會給出非常詳細(xì)的警告，定位問題不要太容易。

PropTypes包含的校驗類型包括基本類型、數(shù)組、對象、實例、枚舉——

以及對象類型的深入驗證等等。如果內(nèi)置的驗證類型不滿足需求，還可以通過自定義規(guī)則來驗證。 如果某個屬性是必須的，在類型后面加上 .isRequired 即可。

React的一大創(chuàng)新，就是把每一個組件都看成是一個狀態(tài)機(jī)，組件內(nèi)部通過state來維護(hù)組件狀態(tài)的變化，這也是state唯一的作用。

state一般和事件一起使用，我們先看state，然后看看state和事件怎樣結(jié)合。

這是一個簡單的開關(guān)組件，開關(guān)狀態(tài)會以文字的形式表現(xiàn)在按鈕的文本上。

首先看render方法，返回了一個button元素，給button注冊了一個事件用來處理點擊事件，在點擊事件中對state的on字段取反，并執(zhí)行 this.setState() 方法設(shè)置on字段的新值。一個開關(guān)組件就完成了。

[[157045]]

組件渲染完成后，必須有UI事件的支持才能正常工作。

React通過將事件處理器綁定到組件上來處理事件。

React事件本質(zhì)上和原生JS一樣，鼠標(biāo)事件用來處理點擊操作，表單事件用于表單元素變化等，Rreact事件的命名、行為和原生JS差不多，不一樣的地方是React事件名區(qū)分大小寫。

比如這段代碼中，Article組件的section節(jié)點注冊了一個onClick事件，點擊后彈出alert。

有時候，事件的處理器需要由組件的使用者來提供，這時可以通過props將事件處理器傳進(jìn)來。

這個是剛才那個Article組件的使用者，它提供給Article組件的props中包含了一個onClick屬性，這個onClick指向這個組件自身的一個事件處理器，這樣就實現(xiàn)了在組件外部處理事件回調(diào)。

這是一個React組件實現(xiàn)組件可交互所需的流程，render()輸出虛擬DOM，虛擬DOM轉(zhuǎn)為DOM，再在DOM上注冊事件，事件觸發(fā)setState()修改數(shù)據(jù)，在每次調(diào)用setState方法時，React會自動執(zhí)行render方法來更新虛擬DOM，如果組件已經(jīng)被渲染，那么還會更新到DOM中去。

這些是React目前支持的事件列表。

[[157047]]

React的組件擁有一套清晰完整而且非常容易理解的生命周期機(jī)制，大體可以分為三個過程：初始化、更新和銷毀，在組件生命周期中，隨著組件的props或者state發(fā)生改變，它的虛擬DOM和DOM表現(xiàn)也將有相應(yīng)的變化。

首先是初始化過程，這里會著重講，需要充分理解。

組件類在聲明時，會先調(diào)用 getDefaultProps() 方法來獲取默認(rèn)props值，這個方法會且只會在聲明組件類時調(diào)用一次，這一點需要注意，它返回的默認(rèn)props由所有實例共享。

在組件被實例化之前，會先調(diào)用一次實例方法 getInitialState() 方法，用于獲取這個組件的初始state。

實例化之后就是渲染，componentWillMount方法會在生成虛擬DOM之前被調(diào)用，你可以在這里對組件的渲染做一些準(zhǔn)備工作，比如計算目標(biāo)容器尺寸然后修改組件自身的尺寸以適應(yīng)目標(biāo)容器等等。

接下來就是渲染工作，在這里你會創(chuàng)建一個虛擬DOM用來表示組件的結(jié)構(gòu)。對于一個組件來說，render 是唯一一個必須的方法。render方法需要滿足這幾點：

1. 只能通過 this.props 或 this.state 訪問數(shù)據(jù)
2. 只能出現(xiàn)一個***組件
3. 可以返回 null、false 或任何 React 組件
4. 不能對 props、state 或 DOM 進(jìn)行修改

需要注意的是，render 方法返回的是虛擬DOM。

渲染完成以后，我們可能需要對DOM做一些操作，比如截屏、上報日志、或者初始化iScroll等第三方非React插件，可以在 componentDidMount() 方法中做這些事情。當(dāng)然，你也可以在這個方法里通過 this.getDOMNode() 方法取得最終生成DOM節(jié)點，然后對DOM節(jié)點做愛做的事情，但需要注意做好安全措施，不要緩存已經(jīng)生成的DOM節(jié)點，因為這些DOM節(jié)點隨時可能被替換掉，所以應(yīng)該在每次用的時候去讀取。

組件被初始化完成后，它的狀態(tài)會隨著用戶的操作、時間的推移、數(shù)據(jù)更新而產(chǎn)生變化，變化的過程是組件聲明周期的另一部分 ——

更新過程。

#p#

當(dāng)組件已經(jīng)被實例化后，使用者調(diào)用 setProps() 方法修改組件的數(shù)據(jù)時，組件的 componentWillReceiveProps() 方法會被調(diào)用，在這里，你可以對外部傳入的數(shù)據(jù)進(jìn)行一些預(yù)處理，比如從props中讀取數(shù)據(jù)寫入state。

默認(rèn)情況下，組件在 setState() 之后，React會遍歷這個組件的所有子組件，進(jìn)行“灌水”，將props從上到下一層一層傳下去，并逐個執(zhí)行更新操作，雖然React內(nèi)部已經(jīng)進(jìn)行過很多的優(yōu)化，這個過程并不會花費多少時間，但是程序員里永遠(yuǎn)不缺乏長期性能饑渴的同學(xué)，不用擔(dān)心，React有一個能夠解決你性能饑渴的辦法——shouldComponentUpdate()——有時候，props發(fā)生了變化，但組件和子組件并不會因為這個props的變化而發(fā)生變化，打個比方，你有一個表單組件，你想要修改表單的name，同時你能夠確信這個name不會對組件的渲染產(chǎn)生任何影響，那么你可以直接在這個方法里return false來終止后續(xù)行為。這樣就能夠避免無效的虛擬DOM對比了，對性能會有明顯提升。

如果這個時候有同學(xué)仍然饑渴難耐，那么你可以嘗試不可變數(shù)據(jù)結(jié)構(gòu)(用過mongodb的同學(xué)應(yīng)該懂)。

組件在更新前，React會執(zhí)行componentWillUpdate() 方法，這個方法類似于前面看到的 componentWillMount()方法，唯一不同的地方只是這個方法在執(zhí)行的時候組件是已經(jīng)渲染過的。需要注意的是，不可以在這個方法中修改props或state，如果要修改，應(yīng)當(dāng)在 componentWillReceiveProps() 中修改。

然后是渲染，React會拿這次返回的虛擬DOM和緩存中的虛擬DOM進(jìn)行對比，找出【最小修改點】，然后替換。

更新完成后，React會調(diào)用組件的componentDidUpdate 方法，這個方法類似于前面 componentDidMount 方法，你仍然可以在這里可以通過 this.getDOMNode() 方法取得最終的DOM節(jié)點。

香港電影結(jié)尾經(jīng)?？吹揭粋€劇情，就是英雄打敗了壞人，然后警察出來擦屁股——

[[157048]]

componentWillUnmount 除了擦屁股什么也做不了。

你可以在這個方法中銷毀非React組件注冊的事件、插入的節(jié)點，或者一些定時器之類。這個過程可能容易出錯，比如綁定了事件卻沒銷毀，這個React可幫不了你，你自己約的炮，含著淚也要打完。

下面我們來看看React怎樣結(jié)合nodejs實現(xiàn)服務(wù)端渲染。

[[157049]]

服務(wù)端渲染有多快我就不多說了。

因為有虛擬DOM的存在，React可以很容易的將虛擬DOM轉(zhuǎn)換為字符串，這便使我們可以只寫一份UI代碼，同時運行在node里和和瀏覽器里。

var html = React.renderToString(elem);

在node里將react組件HTML渲染為HTML，一句代碼即可。

不過圍繞這個renderToString我們還要做一些準(zhǔn)備工作： 1. 從后臺server或數(shù)據(jù)庫等來源拉取數(shù)據(jù) 2. 調(diào)用React.renderToString()方法來生成HTML 3. ***發(fā)送HTML和數(shù)據(jù)給瀏覽器

代碼就不貼了，大家自行腦補(bǔ)。

需要注意的是這里的JSON字符串中可能出現(xiàn)</script>結(jié)尾標(biāo)簽或HTML注釋，可能會導(dǎo)致語法錯誤，這里需要進(jìn)行轉(zhuǎn)義。

頁面的示例代碼本來打算用大家更熟悉的HTML，但發(fā)現(xiàn)代碼量太多了，所以換成了jade代碼，沒用過jade的同學(xué)也順便了解一下，我也順便給jade打個廣告。 這個頁面做了這幾件事： 1. 將前面在action里生成的HTML寫到#container元素里 2. 引入必須的JS文件 3. 獲取action提供的數(shù)據(jù) 4. 渲染組件

這就是React的服務(wù)端渲染，組件的代碼前后端都可以復(fù)用。

是不是感覺React挺牛逼的？還沒完！

[[157050]]

React能夠用一套代碼同時運行在瀏覽器和node里，而且能夠以原生App的姿勢運行在iOS和Android系統(tǒng)中，即擁有了web迭代迅速的特性，又擁有原生App的體驗。

這個姿勢叫做 React-Native。

這是React和React-Native在github上的數(shù)據(jù)，可以看出React-Native也是相當(dāng)熱門——因為React-Native能夠使React的價值***化，這個價值是什么呢——對業(yè)務(wù)來說，意味著不需要為了做終端版本就招聘和前端等量人力的終端開發(fā)，同時意味著我們成為全棧工程師有了一個捷徑。

[[157051]]

了解iOS開發(fā)的同學(xué)都知道，水果公司對應(yīng)用上架的審核效率實在讓人無力吐槽，很多團(tuán)隊上一個版本還沒審核結(jié)束，下一個版本就已經(jīng)做好了。而React-Native支持從網(wǎng)絡(luò)拉取JS，這樣iOS應(yīng)用也能夠像web一樣實現(xiàn)快速迭代了。

上圖就是react-native的調(diào)試過程，以 iOS 為例

1. 啟動 xcode build
2. 在模擬器中按下 Command + D 打開菜單，選擇 Debug in Chrome
3. 在 Chrome dev tools 中調(diào)試

[[157052]]

當(dāng)然，react 并不是***的，在實際使用時你也會發(fā)現(xiàn)她的一些缺點，比如：

（如果只是做安卓 app 開發(fā)，那么“蘋果兩件套+開發(fā)者證書”不是必須的，在windows下面開發(fā)即可。）

***，大家在使用 react 開發(fā)時，可能會需要安裝React developer tools

***是一點參考資料

書山有路勤為徑，react 便是那通往『全棧工程師』的捷徑。

騰訊Bugly簡介

Bugly是騰訊內(nèi)部產(chǎn)品質(zhì)量監(jiān)控平臺的外發(fā)版本，其主要功能是App發(fā)布以后，對用戶側(cè)發(fā)生的Crash以及卡頓現(xiàn)象進(jìn)行監(jiān)控并上報，讓開發(fā)同學(xué)可以***時間了解到App的質(zhì)量情況，及時機(jī)型修改。目前騰訊內(nèi)部所有的產(chǎn)品，均在使用其進(jìn)行線上產(chǎn)品的崩潰監(jiān)控。