初識React

標籤：react

React是什麼

React是現在(2015年)最熱門的前端技術。

在React中，一切皆組件。

A JavaScript library for building user interfaces

React僅僅是用於構建使用者介面的js庫(MVC中的V)，不是完整的MV*架構，所以和Angular、Backbone和Ember沒有可比性。

使用jQuery操作DOM的日子也許會成為過去。

React的特點

(1) 僅僅是UI

React僅僅是MVC中的V。

(2) 虛擬DOM

React為了更高超的效能而使用虛擬DOM作為其不同的實現。 它同時也可以由服務端Node.js渲染 － 而不需要過重的瀏覽器DOM支援。

虛擬DOM(virtual-dom)不僅帶來了簡單的UI開發邏輯，同時也帶來了組件化開發的思想，所謂組件，即封裝起來的具有獨立功能的UI組件。React推薦以組件的方式去重新思考UI構成，將UI上每一個功能相對獨立的模組定義成組件，然後將小的組件通過組合或者嵌套的方式構成大的組件，最終完成整體UI的構建。

(3) 單向資料流

React實現了單向響應的資料流，從而減少了重複代碼，這也是它為什麼比傳統資料繫結更簡單。

React在解決什麼問題

在Web開發中，我們總需要將變化的資料即時反應到UI上，這時就需要對DOM進行操作。而 複雜或頻繁的DOM操作通常是效能瓶頸產生的原因 （如何進行高效能的複雜DOM操作通常是衡量一個前端開發人員技能的重要指標）。React為此引入了 虛擬DOM（Virtual DOM） 的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是通過虛擬DOM進行，每當資料變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的重新整理，在一個事件迴圈（Event Loop）內的兩次資料變化會被合并，例如你連續的先將節點內容從A變成B，然後又從B變成A，React會認為UI不發生任何變化，而如果通過手動控制，這種邏輯通常是極其複雜的。儘管每一次都需要構造完整的虛擬DOM樹，但是因為虛擬DOM是記憶體資料，效能是極高的，而對實際DOM進行操作的僅僅是Diff部分，因而能達到提高效能的目的。這樣，在保證效能的同時，開發人員將不再需要關注某個資料的變化如何更新到一個或多個具體的DOM元素，而只需要關心在任意一個資料狀態下，整個介面是如何Render的。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

初識React