現(xiàn)在最熱門的前端技術(shù)米绕，毫無疑問就是React。
React起源于Facebook公司的內(nèi)部項目锌畸，他們認(rèn)為現(xiàn)在的MVC不能滿足他們的擴展需求讯嫂，由于他們的代碼庫非常龐大，組織也非常復(fù)雜，所以每當(dāng)添加一個新的功能時就變得異常的復(fù)雜，所以他們?yōu)榱私鉀Q這個問題，提出了React衔沼。
那么React是什么呢？
其官網(wǎng)上說的是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES昔瞧。一個Javascript庫指蚁，用于構(gòu)建用戶界面。
React主要解決什么問題呢硬爆？
他們的官網(wǎng)上有這么一句話：We built React to solve one problem: building large applications with data that changes over time.
構(gòu)建那些會隨時間變化的大型應(yīng)用欣舵。
在整個web的MVC架構(gòu)中，你可以認(rèn)為React是整個視圖層缀磕，并且是一個高效的視圖層缘圈。React提供了和以往不一樣的看待視圖層的方式劣光，它以組件開發(fā)為基礎(chǔ)。對于React而言糟把，你的頁面都是由一個個組件構(gòu)成的绢涡，你可以通過分割組件的方式去實現(xiàn)復(fù)雜的頁面或者某個功能模塊。并且這些組件是可以被復(fù)用的遣疯。
React的另一大特點是：虛擬DOM節(jié)點雄可。它讓頁面的渲染更加的高效，并且比直接操作真實DOM更加的可控缠犀。這兩大特點使得React有了強大的渲染頁面的能力数苫。
Virtual DOM 虛擬DOM
傳統(tǒng)的web應(yīng)用，操作DOM一般是直接更新操作的辨液，但是我們知道DOM更新通常是比較昂貴的虐急。而React為了盡可能減少對DOM的操作，提供了一種不同的而又強大的方式來更新DOM滔迈，代替直接的DOM操作止吁。就是Virtual DOM,一個輕量級的虛擬的DOM，就是React抽象出來的一個對象燎悍，描述dom應(yīng)該什么樣子的敬惦，應(yīng)該如何呈現(xiàn)。通過這個
Virtual DOM去更新真實的DOM谈山，由這個Virtual DOM管理真實DOM的更新俄删。
為什么通過這多一層的Virtual DOM操作就能更快呢？ 這是因為React有個diff算法勾哩，更新Virtual DOM并不保證馬上影響真實的DOM抗蠢，React會等到事件循環(huán)結(jié)束举哟，然后利用這個diff算法思劳，通過當(dāng)前新的dom表述與之前的作比較，計算出最小的步驟更新真實的DOM妨猩。
Components 組件
在DOM樹上的節(jié)點被稱為元素潜叛，在這里則不同，Virtual DOM上稱為commponent壶硅。Virtual DOM的節(jié)點就是一個完整抽象的組件威兜，它是由commponents組成。
State 和 Render
React是如何呈現(xiàn)真實的DOM庐椒，如何渲染組件椒舵，什么時候渲染，怎么同步更新的约谈，這就需要簡單了解下State和Render了笔宿。state屬性包含定義組件所需要的一些數(shù)據(jù)犁钟，當(dāng)數(shù)據(jù)發(fā)生變化時，將會調(diào)用Render重現(xiàn)渲染泼橘，這里只能通過提供的setState方法更新數(shù)據(jù)涝动。
組件的生命周期
一個React組件的生命周期分為三個部分：實例化、存在期和銷毀時炬灭。
實例化
當(dāng)組件在客戶端被實例化醋粟，第一次被創(chuàng)建時，以下方法依次被調(diào)用：
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
getDefaultProps
對于每個組件實例來講重归，這個方法只會調(diào)用一次米愿，該組件類的所有后續(xù)應(yīng)用，getDefaultPops 將不會再被調(diào)用鼻吮，其返回的對象可以用于設(shè)置默認(rèn)的 props(properties的縮寫) 值吗货。
getInitialState
對于組件的每個實例來說，這個方法的調(diào)用有且只有一次狈网，用來初始化每個實例的 state宙搬，在這個方法里，可以訪問組件的 props拓哺。
getInitialState 和 getDefaultPops 的調(diào)用是有區(qū)別的勇垛，getDefaultPops 是對于組件類來說只調(diào)用一次，后續(xù)該類的應(yīng)用都不會被調(diào)用士鸥，而 getInitialState 是對于每個組件實例來講都會調(diào)用闲孤，并且只調(diào)一次。
componentWillMount
該方法在首次渲染之前調(diào)用烤礁，也是再 render 方法調(diào)用之前修改 state 的最后一次機會讼积。
render
該方法會創(chuàng)建一個虛擬DOM，用來表示組件的輸出脚仔。對于一個組件來講勤众，render方法是唯一一個必需的方法。
注意：render方法返回的結(jié)果并不是真正的DOM元素鲤脏，而是一個虛擬的DOM.
componentDidMount
該方法不會在服務(wù)端被渲染的過程中調(diào)用们颜。該方法被調(diào)用時，已經(jīng)渲染出真實的 DOM猎醇，可以再該方法中通過this.getDOMNode()訪問到真實的 DOM窥突。
存在期
此時組件已經(jīng)渲染好并且用戶可以與它進行交互，比如鼠標(biāo)點擊硫嘶，手指點按阻问，或者其它的一些事件，導(dǎo)致應(yīng)用狀態(tài)的改變沦疾，你將會看到下面的方法依次被調(diào)用
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
componentWillReceiveProps
組件的 props 屬性可以通過父組件來更改称近，這時贡蓖，componentWillReceiveProps 將來被調(diào)用』筒纾可以在這個方法里更新 state,以觸發(fā) render 方法重新渲染組件斥铺。
shouldComponentUpdate
如果你確定組件的 props 或者 state 的改變不需要重新渲染，可以通過在這個方法里通過返回 false 來阻止組件的重新渲染坛善，返回 `false 則不會執(zhí)行 render 以及后面的 componentWillUpdate晾蜘，componentDidUpdate 方法。
componentWillUpdate
這個方法和 componentWillMount 類似眠屎，在組件接收到了新的 props 或者 state 即將進行重新渲染前剔交，componentWillUpdate(object nextProps, object nextState) 會被調(diào)用，注意不要在此方法中再去更新 props 或者 state改衩。
componentDidUpdate
這個方法和 componentDidMount 類似岖常，在組件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 會被調(diào)用葫督〗甙埃可以在這里訪問并修改 DOM。
銷毀時
componentWillUnmount
每當(dāng)React使用完一個組件橄镜，這個組件必須從 DOM 中卸載后被銷毀偎快，此時 componentWillUnmout 會被執(zhí)行，完成所有的清理和銷毀工作洽胶，在 conponentDidMount 中添加的任務(wù)都需要再該方法中撤銷晒夹，如創(chuàng)建的定時器或事件監(jiān)聽器。
當(dāng)再次裝載組件時姊氓，以下方法會被依次調(diào)用：
- getInitialState
- componentWillMount
- render
- componentDidMount
