3. 組件生命周期
- React嚴格定義了組件的生命周期，生命周期可能會經(jīng)歷如下三個過程：
- 裝載過程（Mount）：也就是把組件第一次在DOM樹上渲染的過程；
- 更新過程（Updata）：當組件被從新渲染的過程；
- 卸載過程（Unmount）：組件從DOM樹中刪除的過程。
- 三種不同的過程，React庫會調(diào)用組件的一些成員函數(shù)，即生命周期函數(shù)。
3.1、裝載過程
- 當組件第一次被渲染時，依次調(diào)用的函數(shù)：
- construction
- getInitalState
- getDefaultProps
- componentWillMount
- render
- componentDidMount
- constructor
ES6中每個類的構(gòu)造函數(shù)，要創(chuàng)建一個組件類的實例，便會調(diào)用對應(yīng)的構(gòu)造函數(shù)
注意：
- 并不是每個組件都需要定義自己的構(gòu)造函數(shù)，無狀態(tài)的React組件往往就不需要定義構(gòu)造
函數(shù)；- 一個React組件需要構(gòu)造函數(shù)目的：
- 初始化state，因為組件的生命周期中任何函數(shù)都可能要訪問state，那么整個周期中第一個被調(diào)用的構(gòu)造函數(shù)便是初始化state最理想的地方；
- 綁定成員函數(shù)的this環(huán)境：
- 因為在ES6語法下，類的每個成員函數(shù)在執(zhí)行時的this并不是和類實例自動綁定的；
- 而在構(gòu)造函數(shù)中this就是當前組件實例，所以，為了方便將來調(diào)用，往往在構(gòu)造函數(shù)中將這個實例的特定函數(shù)綁定this為當前類實例：
```
...
constructor(props){
super(props);
this.onClickFunc = this.onClickFunc.bind(this);
}
```
-
getInitialState和getDefaultProps
- getInitialState函數(shù)的返回值用來初始化組件的this.state;
- getInitialState只出現(xiàn)在裝載過程，也就是說一個組件的整個生命周期過程中，這個函數(shù)只被調(diào)用一次；
- getDefaultProps函數(shù)的返回值可以作為props的初始值；
- 兩個函數(shù)都只有在使用React.createClass方法創(chuàng)建組件類時才會用到：
const Sample = React.createClass({ getInitialState: function() { return {foo: '返回值將作為this.state的初始值'}; }, getDefaultProps: function() { return {sampleProp: '作為props的初始值'} } })- React.createClass創(chuàng)建方法已經(jīng)逐漸被Facebook官方廢棄
- 使用ES6時,在構(gòu)造函數(shù)中通過this.state賦值完成狀態(tài)初始化；通過給類屬性（注意是類屬性，而不是類的實例對象的屬性）defaultProps賦值指定的props初始值：
class Sample extends React.Component{ constructor (props){ super(props); this.state = {foo: '初始值'} } } Sample.defaultProps = { sampleProps: 0 } render
render函數(shù)是React組件中最重要的函數(shù)，一個React組件可以忽略其他所有函數(shù)都不實現(xiàn)，但一定要實現(xiàn)render函數(shù)，因為所有React組件的父類React.Component類對除了render之外的生命周期函數(shù)都有默認實現(xiàn)。
通常一個組件要發(fā)揮作用，總是要渲染一些東西，render函數(shù)并不做實際的渲染動作，它只是返回一個JSX描述結(jié)構(gòu)，最終由React來操作渲染過程；
當某個特殊的組件作用不是渲染界面，或者沒有東西可畫時，可讓render函數(shù)返回null或者false，即告訴React此組件不渲染任何DOM元素；
注意：render函數(shù)應(yīng)該是一個純函數(shù)，完全根據(jù)this.state和this.props來決定返回的結(jié)果，而且不要產(chǎn)生任何副作用，不要在render函數(shù)中調(diào)用this.setState去改變狀態(tài)，因為一個純函數(shù)不應(yīng)該引起狀態(tài)的改變。
- componentWillMount和componentDidMount
在裝載過程中，componentWillMount會在render函數(shù)之前調(diào)用，此時還沒有任何東西渲染出來，即使調(diào)用this.setState修改狀態(tài)也不會發(fā)生重新繪制；
componentDidMount在render函數(shù)之后調(diào)用，但render調(diào)用之后并不會立即調(diào)用，而是在render函數(shù)返回的東西已經(jīng)引發(fā)了渲染，組件已經(jīng)被‘裝載’到了DOM樹上后，componentDidMount才被調(diào)用，此時已繪制出真實的DOM樹；
注意：
- render函數(shù)本身并不往DOM樹上渲染或者裝載內(nèi)容，它只是返回一個表示JSX表示的對象（及組件實例），然后由React庫根據(jù)返回的對象決定如何渲染；
- 而React庫肯定是要把所有組件返回的結(jié)果綜合起來，才能知道如何產(chǎn)生對應(yīng)的DOM修改；
- 所以只有React庫調(diào)用所有組件的render函數(shù)之后，才有可能完成DOM裝載，這時候才會依調(diào)用componentDidMount函數(shù)作為裝載的收尾。
- componentWillMount可以在服務(wù)器和瀏覽器端被調(diào)用，而componentDidMount只能在瀏覽器端被調(diào)用（因為componentDidMount是在‘裝載’完成之后被調(diào)用，且‘裝載’是一個創(chuàng)建組件并放到DOM樹上的過程，而服務(wù)器端渲染通過React組件產(chǎn)生的只是一個純粹的字符串，并不會產(chǎn)生DOM樹，即在服務(wù)器端不可能完成‘裝載過程’所以無法調(diào)用componentDidMount）
3.2、更新過程
- 隨著用戶的操作改變展示的內(nèi)容，當props或者state被修改時，就會引發(fā)組件的更新過程；
- 更新過程會依次調(diào)用以下生命周期函數(shù)，其中render函數(shù)和“裝載”過程一樣：
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
- 并不是所有的更新過程都會執(zhí)行全部函數(shù)。
- componentWillReceiveProps（nextProps）
- 并不是只有在組件的props發(fā)生改變的時候才會調(diào)用此函數(shù)；
- 在更新過程，只要是父組件的render函數(shù)被調(diào)用，在render函數(shù)里被渲染的子組件就會經(jīng)歷更新過程，不管父組件傳給子組件的props有沒有改變，都會觸發(fā)子組件的componentWillReceiveProps函數(shù)；
- 注意：通過this.setState方法觸發(fā)的更新過程不會調(diào)用這個函數(shù)；
- 因為，這個函數(shù)適合根據(jù)新的props值（也就是參數(shù)nextProps）來計算是不是要更新內(nèi)部狀態(tài)state；而更新內(nèi)部狀態(tài)的方法是this.setState,如果this.setState的調(diào)用導(dǎo)致componentWillReceiveProps再調(diào)用，那將是一個死循環(huán)。
- shouldComponentUpdate(nextProps,nextState)
- 除了render函數(shù)，shouleComponentUpdate可能是生命周期函數(shù)中最重要的一個函數(shù)；
- 因為render函數(shù)決定了該渲染什么，shouldComponentUpdate決定了一個組件什么時候不需要渲染；
- render和shouldComponentUpdate也是React生命周期函數(shù)中唯二兩個要求有返回結(jié)果的函數(shù)；
- render函數(shù)的返回結(jié)果用于構(gòu)建DOM對象，shouldComponentUpdate函數(shù)返回一個布爾值，告訴React庫這個組件這次更新過程是否繼續(xù)；
- 在更新過程中，React庫首先調(diào)用shouldComponentUpdate函數(shù)，如果這個函數(shù)返回true，那就繼續(xù)更新過程，接下來調(diào)用render，反之則終止此次更新過程；
- shouldComponentUpdate的參數(shù)就是接下來的props和state值；我們可以根據(jù)這兩個參數(shù)，外加this.props和this.state來判斷返回true或false，從而避免不必要的更新。
-
componentWillUpdate和componentDidUpdate
- 如果組件的shouldComponentUpdate返回true，React接下來調(diào)用componentWillUpdate、render和componentDidUpdate；
- 和“裝載”過程不同，這對函數(shù)都可以在服務(wù)器和瀏覽器更新階段調(diào)用
- 不過，通常在使用React做服務(wù)端渲染時，基本不會經(jīng)歷更新過程，因為服務(wù)器端只需要產(chǎn)出HTML字符串，而一個裝載過程就足夠產(chǎn)出HTML字符串了，所以正常情況下，服務(wù)器端不會調(diào)用componentDidUpdate函數(shù)，如果調(diào)用了，說明程序有錯，需要改進。
3.2、卸載過程
- React組件的卸載過程只涉及一個函數(shù)componentWillUnmount,
- 當React組件要從DOM樹上刪除之前，對應(yīng)的componentWillUnmount函數(shù)會被調(diào)用，所以這個函數(shù)適合做一些清理性的工作。
持續(xù)更新中……喜歡請點個贊哦~
