版權聲明：本文由左明原創文章，轉載請注明出處:
文章原文鏈接：https://www.qcloud.com/community/article/155
來源：騰雲閣 https://www.qcloud.com/community
首先，我們來看看 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）