what is react?

如今最熱門的前端技術，毫無疑問就是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

 

 

 

文／RK_CODER（簡書做者） 原文連接：http://www.jianshu.com/p/ae482813b791