現(xiàn)在最熱門的前端技術(shù)，毫無疑問就是React。
React起源于Facebook公司的內(nèi)部項(xiàng)目，他們認(rèn)為現(xiàn)在的MVC不能滿足他們的擴(kuò)展需求，由于他們的代碼庫非常龐大，組織也非常復(fù)雜，所以每當(dāng)添加一個(gè)新的功能時(shí)就變得異常的復(fù)雜，所以他們?yōu)榱私鉀Q這個(gè)問題，提出了React。

那么React是什么呢？

其官網(wǎng)上說的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES。一個(gè)Javascript庫，用于構(gòu)建用戶界面。

React主要解決什么問題呢？

他們的官網(wǎng)上有這么一句話：We built React to solve one problem: building large applications with data that changes over time.
構(gòu)建那些會(huì)隨時(shí)間變化的大型應(yīng)用。

在整個(gè)web的MVC架構(gòu)中，你可以認(rèn)為React是整個(gè)視圖層，并且是一個(gè)高效的視圖層。React提供了和以往不一樣的看待視圖層的方式，它以組件開發(fā)為基礎(chǔ)。對(duì)于React而言，你的頁面都是由一個(gè)個(gè)組件構(gòu)成的，你可以通過分割組件的方式去實(shí)現(xiàn)復(fù)雜的頁面或者某個(gè)功能模塊。并且這些組件是可以被復(fù)用的。
React的另一大特點(diǎn)是：虛擬DOM節(jié)點(diǎn)。它讓頁面的渲染更加的高效，并且比直接操作真實(shí)DOM更加的可控。這兩大特點(diǎn)使得React有了強(qiáng)大的渲染頁面的能力。

Virtual DOM 虛擬DOM

傳統(tǒng)的web應(yīng)用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了盡可能減少對(duì)DOM的操作，提供了一種不同的而又強(qiáng)大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM,一個(gè)輕量級(jí)的虛擬的DOM，就是React抽象出來的一個(gè)對(duì)象，描述dom應(yīng)該什么樣子的，應(yīng)該如何呈現(xiàn)。通過這個(gè)
Virtual DOM去更新真實(shí)的DOM，由這個(gè)Virtual DOM管理真實(shí)DOM的更新。

為什么通過這多一層的Virtual DOM操作就能更快呢？ 這是因?yàn)镽eact有個(gè)diff算法，更新Virtual DOM并不保證馬上影響真實(shí)的DOM，React會(huì)等到事件循環(huán)結(jié)束，然后利用這個(gè)diff算法，通過當(dāng)前新的dom表述與之前的作比較，計(jì)算出最小的步驟更新真實(shí)的DOM。

Components 組件

在DOM樹上的節(jié)點(diǎn)被稱為元素，在這里則不同，Virtual DOM上稱為commponent。Virtual DOM的節(jié)點(diǎn)就是一個(gè)完整抽象的組件，它是由commponents組成。

State 和 Render

React是如何呈現(xiàn)真實(shí)的DOM，如何渲染組件，什么時(shí)候渲染，怎么同步更新的，這就需要簡單了解下State和Render了。state屬性包含定義組件所需要的一些數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，將會(huì)調(diào)用Render重現(xiàn)渲染，這里只能通過提供的setState方法更新數(shù)據(jù)。

組件的生命周期

一個(gè)React組件的生命周期分為三個(gè)部分：實(shí)例化、存在期和銷毀時(shí)。
實(shí)例化
當(dāng)組件在客戶端被實(shí)例化，第一次被創(chuàng)建時(shí)，以下方法依次被調(diào)用：

• getDefaultProps
• getInitialState
• componentWillMount
• render
• componentDidMount
  getDefaultProps

對(duì)于每個(gè)組件實(shí)例來講，這個(gè)方法只會(huì)調(diào)用一次，該組件類的所有后續(xù)應(yīng)用，getDefaultPops 將不會(huì)再被調(diào)用，其返回的對(duì)象可以用于設(shè)置默認(rèn)的 props(properties的縮寫) 值。

getInitialState

對(duì)于組件的每個(gè)實(shí)例來說，這個(gè)方法的調(diào)用有且只有一次，用來初始化每個(gè)實(shí)例的 state，在這個(gè)方法里，可以訪問組件的 props。
getInitialState 和 getDefaultPops 的調(diào)用是有區(qū)別的，getDefaultPops 是對(duì)于組件類來說只調(diào)用一次，后續(xù)該類的應(yīng)用都不會(huì)被調(diào)用，而 getInitialState 是對(duì)于每個(gè)組件實(shí)例來講都會(huì)調(diào)用，并且只調(diào)一次。

componentWillMount

該方法在首次渲染之前調(diào)用，也是再 render 方法調(diào)用之前修改 state 的最后一次機(jī)會(huì)。

render

該方法會(huì)創(chuàng)建一個(gè)虛擬DOM，用來表示組件的輸出。對(duì)于一個(gè)組件來講，render方法是唯一一個(gè)必需的方法。
注意：render方法返回的結(jié)果并不是真正的DOM元素，而是一個(gè)虛擬的DOM.

componentDidMount

該方法不會(huì)在服務(wù)端被渲染的過程中調(diào)用。該方法被調(diào)用時(shí)，已經(jīng)渲染出真實(shí)的 DOM，可以再該方法中通過this.getDOMNode()訪問到真實(shí)的 DOM。

存在期

此時(shí)組件已經(jīng)渲染好并且用戶可以與它進(jìn)行交互，比如鼠標(biāo)點(diǎn)擊，手指點(diǎn)按，或者其它的一些事件，導(dǎo)致應(yīng)用狀態(tài)的改變，你將會(huì)看到下面的方法依次被調(diào)用

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

componentWillReceiveProps

組件的 props 屬性可以通過父組件來更改，這時(shí)，componentWillReceiveProps 將來被調(diào)用?？梢栽谶@個(gè)方法里更新 state,以觸發(fā) render 方法重新渲染組件。

shouldComponentUpdate

如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過在這個(gè)方法里通過返回 false 來阻止組件的重新渲染，返回 `false 則不會(huì)執(zhí)行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

componentWillUpdate

這個(gè)方法和 componentWillMount 類似，在組件接收到了新的 props 或者 state 即將進(jìn)行重新渲染前，componentWillUpdate(object nextProps, object nextState) 會(huì)被調(diào)用，注意不要在此方法中再去更新 props 或者 state。

componentDidUpdate

這個(gè)方法和 componentDidMount 類似，在組件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 會(huì)被調(diào)用?？梢栽谶@里訪問并修改 DOM。

銷毀時(shí)

componentWillUnmount

每當(dāng)React使用完一個(gè)組件，這個(gè)組件必須從 DOM 中卸載后被銷毀，此時(shí) componentWillUnmout 會(huì)被執(zhí)行，完成所有的清理和銷毀工作，在 conponentDidMount 中添加的任務(wù)都需要再該方法中撤銷，如創(chuàng)建的定時(shí)器或事件監(jiān)聽器。
當(dāng)再次裝載組件時(shí)，以下方法會(huì)被依次調(diào)用：

• getInitialState
• componentWillMount
• render
• componentDidMount