一、前言
React的用戶頁面的構建只要思想是通過構建可復用的組件來實現(xiàn)。那么什么叫組件吨瞎？
所謂的組件就是有限狀態(tài)機，通過狀態(tài)渲染對應的界面了穆咐，和iOS一樣颤诀，React的每個組件也有對應的生命周期，它規(guī)定了組件的狀態(tài)和方法需要在什么階段進行改變和執(zhí)行对湃。
當調用React.createClass()創(chuàng)建一個組件類時,你應該提供一個包含有render方法以及可選的其他生命周期方法的 規(guī)范(Specifications)對象崖叫。
1.1什么是有限狀態(tài)機？
有限狀態(tài)機拍柒，表示有限個狀態(tài)以及在這些狀態(tài)之間的轉移和動作等行為的模型心傀。
狀態(tài)機，能夠記住目前所處的狀態(tài)拆讯，根據(jù)當前的狀態(tài)可以做出相應的決策脂男，并且在進入不同的狀態(tài)時，可以做不同的操作种呐。就像特別簡單的一個例子：一個人的所處的狀態(tài)宰翅，決定了不同的操作，如果一個人進入餓的狀態(tài)陕贮，那么接下來他要進行的操作就是喝水堕油。
React 正是利用這一概念，通過管理狀態(tài)來實現(xiàn)對組件的管理肮之。
例如：某個組件有顯示和隱藏兩個狀態(tài)掉缺，通常會設計兩個方法show()和hide()來實現(xiàn)切換；而 React 只需要設置狀態(tài)setState({ showed: true/false })即可實現(xiàn)戈擒。
二眶明。React生命周期
簡單當首次裝載組件時，按順序執(zhí)行 getDefaultProps筐高、getInitialState搜囱、componentWillMount丑瞧、render 和 componentDidMount；的說組件分為三種狀態(tài)：掛載 更新 和卸載蜀肘。
根據(jù)不同的狀態(tài)詳細分為：
??裝載組件绊汹、 卸載組件、重新裝載組件扮宠、再次渲染組件時西乖，組件接受到更新狀態(tài)。
三坛增。為什么會是如此的執(zhí)行順序呢获雕？
自定義組件的生命周期主要主要通過三種狀態(tài)來進行管理：掛載 更新 和卸載。三種狀態(tài)對應三種方法：mountComponent收捣、updateComponent届案、unmountComponent。
3.1掛載
createClass 創(chuàng)建自定義組件的入口方法罢艾，負責管理生命周期中的 getDefaultProps楣颠。getDefaultProps 方法只執(zhí)行一次，這樣所有實例初始化的 props 將會被共享昆婿。
getDefaultProps
該函數(shù)用于初始化一些默認的屬性球碉，通常會將固定的內(nèi)容放在這個函數(shù)中，進行初始化和賦值仓蛆。在組件中睁冬，可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后看疙，再次使用該組件不會調用getDefaultProps函數(shù)豆拨，所以組件自己不可以自己修改props。
mountComponent 負責管理生命周期中的getInitialState能庆、componentWillMount施禾、render 和 componentDidMount。
getInitialState
該函數(shù)是用于對組件的一些狀態(tài)進行初始化搁胆；
由于該函數(shù)不同于getDefaultProps弥搞，在以后的過程中，會再次調用渠旁，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化攀例，如控件上顯示的文字，可以通過this.state來獲取值顾腊，通過this.setState來修改state值粤铭， 比如：
this.setState({
activePage: activePage,
currentX: contentOffSetX
});
componentWillMount
相當于OC中的ViewWillAppear方法，在組件將要被加載在視圖上之前調用杂靶，功能相對較少梆惯。
render
render是一個組件中必須有的方法酱鸭，本質上是一個函數(shù)，并返回JSX或其他組件來構成DOM垛吗，和Android的XML布局類似凹髓，注意：只能返回一個頂級元素;
此外，在render函數(shù)中怯屉，只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值?扁誓。
componentDidMount
在調用了render方法后，組件加載成功并被成功渲染出來以后蚀之，所要執(zhí)行的后續(xù)操作，一般會在這個函數(shù)中處理網(wǎng)絡請求等加載數(shù)據(jù)的操作捷泞；
3.2更新
如果前后元素不一致說明需要進行組件更新足删。
updateComponent 負責管理生命周期中的componentWillReceiveProps、shouldComponentUpdate锁右、componentWillUpdate失受、render 和 componentDidUpdate。
注意：禁止在shouldComponentUpdate和componentWillUpdate中調用setState咏瑟，會造成循環(huán)調用拂到，直至耗光瀏覽器內(nèi)存后崩潰。
componentWillReceiveProps
指父元素對組件的props或state進行了修改
shouldComponentUpdate
一般用于優(yōu)化码泞，可以返回false或true來控制是否進行渲染
componentWillUpdate
組件刷新前調用兄旬，類似componentWillMount
componentDidUpdate
更新后的hook
3.3卸載
unmountComponent 負責管理生命周期中的componentWillUnmount。
首先將狀態(tài)設置為UNMOUNTING余寥，若存在 componentWillUnmount领铐，則執(zhí)行；如果此時在 componentWillUnmount 中調用setState宋舷，是不會觸發(fā) reRender绪撵。更新狀態(tài)為NULL，完成組件卸載操作祝蝠。
四音诈。常用的知識點
4.1setState 更新機制
setState的原理？
當調用setState時绎狭，會對 state 以及 _pendingState 更新隊列進行合并操作细溅，但其實真正更新 state 的幕后黑手是
replaceState
。
replaceState 會先判斷當前狀態(tài)是否為MOUNTING坟岔，如果不是即會調用ReactUpdates.enqueueUpdate執(zhí)行更新谒兄。
當狀態(tài)不為MOUNTING或RECEIVING_PROPS時，performUpdateIfNecessary 會獲取 _pendingElement社付、_pendingState承疲、_pendingForceUpdate邻耕，并調用 updateComponent 進行組件更新。
如果在 shouldComponentUpdate 或 componentWillUpdate 中調用setState燕鸽，此時的狀態(tài)已經(jīng)從RECEIVING_PROPS -> NULL兄世，則 performUpdateIfNecessary 就會調用 updateComponent 進行組件更新，但 updateComponent 又會調用 shouldComponentUpdate 和 componentWillUpdate啊研，因此造成循環(huán)調用御滩，使得瀏覽器內(nèi)存占滿后崩潰。
