深入理解 React (一) ——JSX和虛擬DOM

首先，咱們來看看 React 在世界範圍的熱度趨勢，下圖是關鍵詞「房價」和 「React」 在 Google Trends 上的搜索量對比，藍色的是 React，紅色的是房價，很明顯，人類對 React 的關注程度已經遠遠超過了對房價的關注。

從這些數據中，你們能看出什麼？

能夠很明顯的看出，我在一本正經的扯淡。

從2014年到如今，React、jQuery和 Angular 的熱度趨勢對比，能夠很明顯的看到（上圖），React 在全球的熱度趨勢增加很是快。

上圖是 React 在國內的百度搜索指數，是拿 React 和 Nodejs 作了個對比，能夠看出 React 的關注度也已經逼近 nodejs。

雖然在關注總量上 React 還遠不及 jQuery 和 Angular 等等，但它的增加幅度超乎你想象，你知道這意味着什麼嗎？這意味着關注 React，你就比大多數人走在了業界的前沿！

那麼React究竟是什麼鬼？

引用官網的簡介，「一個用來構建用戶界面的javascript庫」。

React 起源於 Facebook 的內部項目，由於 FB 對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。

因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

和 Backbone、Angular 等 MV* 框架不同，它只處理 View 邏輯 ，它只處理 View 邏輯，它只處理 View 邏輯。因此若是你喜歡它，你能夠很容易的將它接入到現有工程中，而後用 React 重寫 HTML 部分便可，不用修改邏輯。

咱們看看大牛們怎麼說——

大牛們對新技術的跟進速度老是很是快的，不過話說React出來也已經2年了，其實並不算什麼新技術了。

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

上圖是2015年年初的數據

這是 Facebook 的好友動態頁面，也是 Facebook 訪問量最大的頁面沒有之一，經過 Chrome React 插件能夠看到這個頁面確實是用 React 實現的。

這些是使用了 React 的一小部分站點，太多了放不下。

前面給你們來了一波前戲，相信你們已經有點火燒眉毛了，那麼，進入正題：

首先，先跟你們描述下 React 最特別的部分，聽完這部分你們基本就可以在腦海裏創建起一個 React 的大體印象。 而後是 React 的核心內容，聽完這部分你們待會回去就能夠開始寫代碼而後今天晚上發佈上線了。 最後是 React 可以給咱們實際帶來的價值，咱們不做無心義的重構。 首先，咱們來看JSX——

咱們先說說模板。 HTML 模板有不少種編寫方式，這是一種。

還有這種。

還有多年前流行的 script 標籤模板。

這種運行時編譯的模板調試起來比較困難，尤爲是出現錯誤時，很難定位，若是要定位，須要作不少額外的工做，麻煩。

近兩年構建工具的流行，不少團隊已經在使用grunt等構建工具來預編譯模板，從而簡化模板開發，提升運行效率，減小維護成本。

JSX 使用的也是預編譯模板，和前面看到的沒什麼差異，細心的同窗會發現好像只是沒有字符串引號了而已。 React 提供了一個預編譯工具，叫 react-tools，能夠經過 npm 命令安裝，通常是在開發時期運行，運行後它會啓動一個監聽程序，實時監聽 JSX 源碼的修改，而後自動編譯爲 JS 代碼。 你們留意下，裏面的 UL LI 被編譯成了 React.createElement()，它這麼作，目的就是爲了實現 虛擬 DOM。 JSX 還支持運行時編譯，可是爲了推薦你們用預編譯，因此我不打算告訴大家運行時編譯怎麼作。 OK，祝賀你們已經精通了 JSX。

(BTW：導出圖片之後沒有價值1塊5的特效了，湊合着看吧)

接下來咱們來了解 React 最大的亮點 —— 虛擬 DOM。

傳統 web app 和 DOM 直接交互，由App來控制DOM的構建和渲染、元素屬性的讀寫、事件的註冊和銷燬等等。 當新產品剛上線的時候，這種作法看起來也挺好。但隨着產品功能愈來愈豐富、代碼量愈來愈多、開發團隊人員愈來愈多——

一年後

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

固然，合理的代碼規劃可以避免這類問題，但團隊裏不免會有擅長屠宰式編程的同窗，分分鐘把你代碼改爲這樣。

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

虛擬DOM則是在DOM的基礎上創建了一個抽象層，咱們對數據和狀態所作的任何改動，都會被自動且高效的同步到虛擬DOM，最後再批量同步到DOM中。

虛擬DOM會使得App只關心數據和組件的執行結果，中間產生的DOM操做不須要App干預，並且經過虛擬DOM來生成DOM，會有一項很是可觀收益——性能。

全部人都知道DOM慢，渲染一個空的DIV，瀏覽器須要爲這個DIV生成幾百個屬性，而虛擬DOM只有6個。demo

因此說減小沒必要要的重排重繪以及DOM讀寫可以對頁面渲染性能有大幅提高。 那麼咱們來看看虛擬DOM是怎麼作的。React會在內存中維護一個虛擬DOM樹，當咱們對這個樹進行讀或寫的時候，其實是對虛擬DOM進行的。當數據變化時，而後React會自動更新虛擬DOM，而後拿新的虛擬DOM和舊的虛擬DOM進行對比，找到有變動的部分，得出一個Patch，而後將這個Patch放到一個隊列裏，最終批量更新這些Patch到DOM中。 這樣的機制能夠保證即使是根節點數據的變化，最終表如今DOM上的修改也只是受這個數據影響的部分，這樣能夠保證很是高效的渲染。 但也是有必定的缺陷的——首次渲染大量DOM時由於多了一層虛擬DOM的計算，會比innerHTML插入方式慢。

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

一個最基本的 React 組件由數據和JSX兩個主要部分構成，咱們先來看看數據。

這是一個簡單單完整的React組件【類】，細節你們先不用太在乎細節，瞭解機制就能夠。

props 主要做用是提供數據來源，能夠簡單的理解爲 props 就是構造函數的參數。 state 惟一的做用是控制組件的表現，用來存放會隨着交互變化狀態，好比開關狀態等。

JSX 作的事情就是根據 state 和 props 中的值，結合一些視圖層面的邏輯，輸出對應的 DOM 結構。

前面咱們知道了一個簡單的組件的構成，但單個的組件確定不能知足實際需求，咱們須要作的是將這些獨立的組件進行組裝，同時找出共性的部分進行復用。

咱們拿你們熟悉 KM 首頁來進行示例，大的模塊有中心主體區域，左側有 K 吧列表、應用列表等，能夠看出，裏面的 <Pub/> <Article/> <App/> 都是最細粒度的組件，是能夠複用的。

首先，咱們來看下Article的代碼——

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

這個組件自己的實現能夠很簡單也能夠很複雜，但使用者可不關心你的內部實現，使用者關心的是組件須要什麼參數就能夠了。

外國人的組件化思想比咱們國內的普及程度高不少，不僅侷限於軟件開發，包括實體行業的咖啡機、加油站、 兒童搖搖車都有這種設計思想在裏面。

但願你們在設計模塊的時候，也儘量將組件邏輯對外透明，來減小維護成本。

咱們繼續看 KM 的熱點區域，你們留意一下標虛線的部分，這裏複用了 Article 組件。這時的 Article 組件看起來就是一個普通的標籤而已，簡單吧。

這個是熱問組件，也複用了 Article 組件。 這就是 React 如絲般順滑的組件複合。

文章來源公衆號 小時光茶社（Tech Teahouse）

---

相關推薦

下一篇：深刻理解React(二) —— 數據流和事件原理

React展現組件與容器組件

---

閱讀原文，本文由騰雲閣受權發佈,經社區容許後方可轉載。更多技術文章，請訪問騰雲閣。