整個組件，從創建組件類開始，到渲染，到消亡的過程，就是組件的生命周期。
組件的生命周期可以分為三個階段：
- 掛載階段
- 更新階段
- 卸載階段
-
掛載階段
在這個過程中，會觸發以下幾個事件
getDefaultProps，設置默認屬性
getInitialState，設置初始狀態
componentWillMount 即將掛載
render 渲染，就是掛載
componentDidMount 掛載完成
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/react.min.js" ></script> <script type="text/javascript" src="js/react-dom.min.js" ></script> <script type="text/javascript" src="js/browser.min.js" ></script> </head> <body> <div id="app"></div> <script type="text/babel"> var Box = React.createClass({ //設置默認值 getDefaultProps:function(){ alert("設置默認屬性"); return{title:'這里是標題'}; }, //設置初始狀態 getInitialState : function(){ alert("設置初始狀態"); return {step:"掛載階段"}; }, // 即將掛載 componentWillMount : function(){ alert("即將掛載"); }, //掛載、渲染 render : function(){ alert("正在渲染..."); return ( <div> <h3>組件的生命周期</h3> <p>當前的狀態值是：{this.state.step}</p> </div> ); }, //完成掛載 componentDidMount : function(){ alert("掛載完成"); } }); ReactDOM.render(<Box />,document.getElementById("app")); </script> </body> </html>
-
更新階段
提供了如下一個鈎子（方法）：
compoentwillReceiveProps，即將接受上一級的屬性傳遞- 比較少用
shouldCompnetUpdate，是否應該進行更新操作
componentWillUpdate，即將進行更新操作
render，重新渲染
componentDidUpdate，更新完成
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/react.min.js" ></script> <script type="text/javascript" src="js/react-dom.min.js" ></script> <script type="text/javascript" src="js/browser.min.js" ></script> </head> <body> <div id="app"></div> <script type="text/babel"> var Box = React.createClass({ //設置默認值 getDefaultProps:function(){ alert("設置默認屬性"); return{title:'這里是標題'}; }, //設置初始狀態 getInitialState : function(){ alert("設置初始狀態"); return {step:1}; }, // 即將掛載 componentWillMount : function(){ alert("即將掛載"); }, //掛載、渲染 render : function(){ alert("正在渲染..."); return ( <div> <h3>組件的生命周期</h3> <p>當前的狀態值是：{this.state.step}</p> <button onClick={this.handleClick}>更新</button> </div> ); }, //完成掛載 componentDidMount : function(){ alert("掛載完成"); }, //完成更新操作 handleClick : function(){ this.setState({ step : this.state.step + 1 }); }, shouldComponentUpdate: function(nextProps, nextState) { alert('是否應該更新'); return true; }, componentWillUpdate : function(nextProps, nextState) { alert('即將更新'); }, componentDidUpdate: function(prevProps, prevState) { alert('更新完畢'); } }); ReactDOM.render(<Box />,document.getElementById("app")); </script> </body> </html>
-
卸載階段
在組件卸載的時候，進入卸載階段。只有一個方法 --- componentWillUnmount
當組件消失了，從ui界面上刪除了，才會進入卸載階段呢。
ReactDOM提供了一個方法，用於卸載組件
ReactDOM.unmountComponentAtNode(document.getElementById('app'));
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/react.min.js" ></script> <script type="text/javascript" src="js/react-dom.min.js" ></script> <script type="text/javascript" src="js/browser.min.js" ></script> </head> <body> <div id="app"></div> <script type="text/babel"> var Box = React.createClass({ //設置默認值 getDefaultProps:function(){ alert("設置默認屬性"); return{title:'這里是標題'}; }, //設置初始狀態 getInitialState : function(){ alert("設置初始狀態"); return {step:1}; }, // 即將掛載 componentWillMount : function(){ alert("即將掛載"); }, //掛載、渲染 render : function(){ alert("正在渲染..."); return ( <div> <h3>組件的生命周期</h3> <p>當前的狀態值是：{this.state.step}</p> <button onClick={this.handleClick}>更新</button> <button onClick={this.handleUnmount}>卸載組件</button> </div> ); }, //完成掛載 componentDidMount : function(){ alert("掛載完成"); }, //完成更新操作 handleClick : function(){ this.setState({ step : this.state.step + 1 }); }, shouldComponentUpdate: function(nextProps, nextState) { alert('是否應該更新'); return true; }, componentWillUpdate : function(nextProps, nextState) { alert('即將更新'); }, componentDidUpdate: function(prevProps, prevState) { alert('更新完畢'); }, handleUnmount : function(){ ReactDOM.unmountComponentAtNode(document.getElementById("app")); }, componentWillUnmount() { alert('即將卸載'); }, componentDidMount: function() { alert('掛載完畢'); } }); ReactDOM.render(<Box />,document.getElementById("app")); </script> </body> </html>
在上述三個階段中：
比較特殊的就是render，render在掛載階段和更新階段都會執行。掛載階段只執行一次，但是更新階段，可以重復執行。
React的根據狀態進行更新的機制，和組件的生命周期機制是緊密相連的