騰訊Bugly特約作者： 左明

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

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

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

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

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

那么React到底是什么鬼？

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

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

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

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

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

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

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

這是 Facebook 的好友動態(tài)頁面，也是 Facebook 訪問量最大的頁面沒有之一，通過 Chrome React 插件可以看到這個(gè)頁面確實(shí)是用 React 實(shí)現(xiàn)的。 （有同事問我為什么關(guān)注柳巖，我說因?yàn)槲沂橇鴰r的球迷?。?/p>

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

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

首先，我們來看JSX——

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

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

接下來我們來了解 React 最大的亮點(diǎn) ———— 虛擬 DOM。

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

一年后

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

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

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

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

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

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

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

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

但這樣也是有一定的缺陷的——首次渲染大量DOM時(shí)因?yàn)槎嗔艘粚犹摂MDOM的計(jì)算，會比innerHTML插入方式慢，所以使用時(shí)需要確保不要一次性渲染大量DOM。

幾個(gè)UI組件的渲染性能對比

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

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

這是一個(gè)簡單單完整的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)。

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

比如這樣一個(gè)場景

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 只能通過 this.props 或 this.state 訪問數(shù)據(jù)
2. 只能出現(xiàn)一個(gè)頂級組件
3. 可以返回 null、false 或任何 React 組件

4. 不能對 props、state 或 DOM 進(jìn)行修改

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

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

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

   

   更新過程。

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

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

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

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

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

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

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

   

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

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

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

   

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

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

   
   

   var html = React.renderToString(elem);

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

   不過圍繞這個(gè)renderToString我們還要做一些準(zhǔn)備工作：

5. 從后臺server或數(shù)據(jù)庫等來源拉取數(shù)據(jù)
6. 調(diào)用React.renderToString()方法來生成HTML

7. 最后發(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打個(gè)廣告。 這個(gè)頁面做了這幾件事：

8. 將前面在action里生成的HTML寫到#container元素里
9. 引入必須的JS文件
10. 獲取action提供的數(shù)據(jù)

11. 渲染組件

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

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

    

    

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

    這個(gè)姿勢叫做 React-Native。

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

    

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

    

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

12. 啟動 xcode build

13. 在模擬器中按下 Command + D 打開菜單，選擇 Debug in Chrome

14. 在 Chrome dev tools 中調(diào)試

    

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

    

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

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

    

    最后是一點(diǎn)參考資料

    

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

騰訊Bugly簡介

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