現在最熱門的前端技術，毫無疑問就是React。
React起源于Facebook公司的內部項目，他們認為現在的MVC不能滿足他們的擴展需求，由于他們的代碼庫非常龐大，組織也非常復雜，所以每當添加一個新的功能時就變得異常的復雜，所以他們為了解決這個問題，提出了React。
那么React是什么呢？
其官網上說的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。一個Javascript庫，用于構建用戶界面。
React主要解決什么問題呢？
他們的官網上有這么一句話：We built React to solve one problem: building large applications with data that changes over time.
構建那些會隨時間變化的大型應用。
在整個web的MVC架構中，你可以認為React是整個視圖層，并且是一個高效的視圖層。React提供了和以往不一樣的看待視圖層的方式，它以組件開發為基礎。對于React而言，你的頁面都是由一個個組件構成的，你可以通過分割組件的方式去實現復雜的頁面或者某個功能模塊。并且這些組件是可以被復用的。
React的另一大特點是：虛擬DOM節點。它讓頁面的渲染更加的高效，并且比直接操作真實DOM更加的可控。這兩大特點使得React有了強大的渲染頁面的能力。
Virtual DOM 虛擬DOM
傳統的web應用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對DOM的操作，提供了一種不同的而又強大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM,一個輕量級的虛擬的DOM，就是React抽象出來的一個對象，描述dom應該什么樣子的，應該如何呈現。通過這個
Virtual DOM去更新真實的DOM，由這個Virtual DOM管理真實DOM的更新。
為什么通過這多一層的Virtual DOM操作就能更快呢？ 這是因為React有個diff算法，更新Virtual DOM并不保證馬上影響真實的DOM，React會等到事件循環結束，然后利用這個diff算法，通過當前新的dom表述與之前的作比較，計算出最小的步驟更新真實的DOM。
Components 組件
在DOM樹上的節點被稱為元素，在這里則不同，Virtual DOM上稱為commponent。Virtual DOM的節點就是一個完整抽象的組件，它是由commponents組成。
State 和 Render
React是如何呈現真實的DOM，如何渲染組件，什么時候渲染，怎么同步更新的，這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數據，當數據發生變化時，將會調用Render重現渲染，這里只能通過提供的setState方法更新數據。
組件的生命周期
一個React組件的生命周期分為三個部分：實例化、存在期和銷毀時。
實例化
當組件在客戶端被實例化，第一次被創建時，以下方法依次被調用：
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
getDefaultProps
對于每個組件實例來講，這個方法只會調用一次，該組件類的所有后續應用，getDefaultPops 將不會再被調用，其返回的對象可以用于設置默認的 props(properties的縮寫) 值。
getInitialState
對于組件的每個實例來說，這個方法的調用有且只有一次，用來初始化每個實例的 state，在這個方法里，可以訪問組件的 props。
getInitialState 和 getDefaultPops 的調用是有區別的，getDefaultPops 是對于組件類來說只調用一次，后續該類的應用都不會被調用，而 getInitialState 是對于每個組件實例來講都會調用，并且只調一次。
componentWillMount
該方法在首次渲染之前調用，也是再 render 方法調用之前修改 state 的最后一次機會。
render
該方法會創建一個虛擬DOM，用來表示組件的輸出。對于一個組件來講，render方法是唯一一個必需的方法。
注意：render方法返回的結果并不是真正的DOM元素，而是一個虛擬的DOM.
componentDidMount
該方法不會在服務端被渲染的過程中調用。該方法被調用時，已經渲染出真實的 DOM，可以再該方法中通過this.getDOMNode()訪問到真實的 DOM。
存在期
此時組件已經渲染好并且用戶可以與它進行交互，比如鼠標點擊，手指點按，或者其它的一些事件，導致應用狀態的改變，你將會看到下面的方法依次被調用
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
componentWillReceiveProps
組件的 props 屬性可以通過父組件來更改，這時，componentWillReceiveProps 將來被調用。可以在這個方法里更新 state,以觸發 render 方法重新渲染組件。
shouldComponentUpdate
如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過在這個方法里通過返回 false 來阻止組件的重新渲染，返回 `false 則不會執行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。
componentWillUpdate
這個方法和 componentWillMount 類似，在組件接收到了新的 props 或者 state 即將進行重新渲染前，componentWillUpdate(object nextProps, object nextState) 會被調用，注意不要在此方法中再去更新 props 或者 state。
componentDidUpdate
這個方法和 componentDidMount 類似，在組件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 會被調用。可以在這里訪問并修改 DOM。
銷毀時
componentWillUnmount
每當React使用完一個組件，這個組件必須從 DOM 中卸載后被銷毀，此時 componentWillUnmout 會被執行，完成所有的清理和銷毀工作，在 conponentDidMount 中添加的任務都需要再該方法中撤銷，如創建的定時器或事件監聽器。
當再次裝載組件時，以下方法會被依次調用：
- getInitialState
- componentWillMount
- render
- componentDidMount
