&emsp;&emsp;組件的生命周期（Life Cycle）包含三個階段：掛載（Mounting）、更新（Updating）和卸載（Unmounting），在每個階段都會有相應的回調方法（也叫鉤子）可供選擇，從而能更好的控制組件的行為。 ## 一、掛載 &emsp;&emsp;在這個階段，組件會完成它的首次渲染，先執行初始化，再被掛載到真實的DOM中，其中依次調用的方法有constructor()、componentWillMount()、render()和componentDidMount()。除了render()，其他三個方法都只會運行一次。 **1）constructor()** &emsp;&emsp;在生命周期中，類的構造函數constructor()會率先被執行，用于初始化組件的狀態、接收外部傳遞進來的數據、綁定成員方法的this指向等工作。 **2）componentWillMount()** &emsp;&emsp;componentWillMount()方法會運行在render()之前，它是渲染之前的回調函數。不過，由于在這個方法中執行的任務都能提前到constructor()中，因此實際項目中很少會用到它。 **3）render()** &emsp;&emsp;render()是在定義組件時必須聲明的方法，它是一個無副作用的純函數，可根據組件的props和state得到一個React元素、null或false等返回值，并且在render()方法中不能調用改變組件狀態的this.setState()方法。注意，將元素渲染到頁面DOM中的工作都由React負責，而不是render()方法。 **4）componentDidMount()** &emsp;&emsp;componentDidMount()方法會運行在render()之后，它是渲染之后的回調函數。此時組件已被掛載到頁面中，可以執行DOM相關的操作，例如異步讀取服務器中的數據并填充到組件中、調用jQuery代碼等。 &emsp;&emsp;下面的組件沒有實際用途，僅僅是為了演示四個回調函數，其中componentWillMount()和componentDidMount()都成功調用了this.setState()方法。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.state = { name: props.name }; } componentWillMount() { this.setState({age: 28}); } render() { return <button>{this.state.name}</button>; } componentDidMount() { $.post("server.php", {id:1}, json => { this.setState({age: json.data.age}); }, "json"); } } ~~~ ## 二、更新 &emsp;&emsp;引起組件更新（即重新渲染）的方式有三種，第一種是由父組件向下傳遞props（即調用父組件的render()方法）引起的更新，依次會調用五個方法：componentWillReceiveProps()、shouldComponentUpdate()、componentWillUpdate()、render()和componentDidUpdate()。第二種是通過改變自身state（即調用this.setState()方法）引起的更新，會忽略componentWillReceiveProps()方法，只執行四個回調函數。第三種是通過組件的forceUpdate()方法強制更新，只有后三個回調函數會被執行。在下面的組件中，定義了更新階段的五個回調函數，并且點擊按鈕就會觸發強制更新。 ~~~js class Btn extends React.Component { constructor(props) { super(props); this.state = { name: "strick" }; } dot() { this.setState({name: "freedom"}); this.forceUpdate(); //強制更新 } componentWillReceiveProps(nextProps) { } shouldComponentUpdate(nextProps, nextState) { return true; } componentWillUpdate(nextProps, nextState) { } render() { return <button onClick={this.dot.bind(this)}>{this.state.name}</button>; } componentDidUpdate(prevProps, prevState) { } } ~~~ **1）componentWillReceiveProps()** &emsp;&emsp;componentWillReceiveProps()方法常用于執行props更新后的邏輯，只有第一種更新方式才會調用它，該方法能接收一個名為nextProps的參數，表示父組件傳遞進來的新的props。當需要通過this.setState()方法將nextProps中的數據同步到內部狀態時，要先比較nextProps和this.props中的值是否相同，再決定是否執行同步。由于在componentWillReceiveProps()中能調用this.setState()方法，因此為了避免進入一個死循環，在調用this.setState()方法更新組件時就不會觸發它。 **2）shouldComponentUpdate()** &emsp;&emsp;shouldComponentUpdate()用于決定是否繼續組件的更新，它能接收2個參數：nextProps和nextState，分別表示新的props和state，通過比較nextProps、nextState和組件當前的this.props、this.state能得出一個布爾類型的返回結果。當返回結果為false時，組件會停止更新，后續的componentWillUpdate()、render()和componentDidUpdate()也不會被執行。將這個方法使用恰當的話，能減少冗余的渲染，優化組件的性能。 **3）componentWillUpdate()和componentDidUpdate()** &emsp;&emsp;componentWillUpdate()和componentDidUpdate()分別運行在render()之前和之后，它們都能接收2個參數，前者提供更新后的props和state，后者提供更新前的props和state。在componentWillUpdate()中，不能調用this.setState()方法，以免發生不必要的死循環。 ## 三、卸載 &emsp;&emsp;當組件在從DOM中被卸載之前，會觸發一個無參數的componentWillUnmount()方法。在該方法內適合做些清理的工作，例如清除定時器、移除多余的DOM元素等。下面演示了處理卸載的過程，限于篇幅省略了組件的構造函數和render()方法，只給出了關鍵代碼。 ~~~js class Btn extends React.Component { componentWillUnmount() { clearInterval(timeout); } } var container = document.getElementById("container"); ReactDOM.render(<Btn>提交</Btn>, container); ReactDOM.unmountComponentAtNode(container); //移除DOM中的組件 ~~~ ## 四、流程圖 &emsp;&emsp;接下來用一張總的流程圖（如圖5所示）來說明生命周期各個方法之間的關系，灰底的方法表示在其內部能調用this.setState()方法。 :-:  圖5 組件生命周期流程圖 ## 五、過時和新增的回調方法 **1）過時** &emsp;&emsp;從React v16.3開始，有3個生命周期方法被標記為過時：componentWillMount()、componentWillReceiveProps()和componentWillUpdate()，目前它們仍然有效，但不建議在新代碼中使用，官方為它們新增了一個以“UNSAFE\_”作為前綴的別名。 **2）新增** &emsp;&emsp;React v16新增了兩個生命周期方法，如下所列。 &emsp;&emsp;（1）static getDerivedStateFromProps(nextProps, prevState) &emsp;&emsp;靜態方法getDerivedStateFromProps()用來替代componentWillReceiveProps()。它在render()方法之前觸發，包含兩個參數：nextProps和prevState，分別表示新的props和舊的state。如果返回一個對象，那么更新state；如果返回null，那么就不更新state。 &emsp;&emsp;（2）getSnapshotBeforeUpdate(prevProps, prevState) &emsp;&emsp;getSnapshotBeforeUpdate()方法用來替代componentWillUpdate()。它在最近一次渲染輸出（即更新DOM）之前觸發，包含兩個參數：prevProps和prevState，分別表示舊的props和舊的state，返回值會成為componentDidUpdate()的第三個參數。 ***** > 原文出處： [博客園-React躬行記](https://www.cnblogs.com/strick/category/1455720.html) [知乎專欄-React躬行記](https://zhuanlan.zhihu.com/pwreact) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。