首页 > 代码库 > React组件的生命周期
React组件的生命周期
整个组件，从创建组件类开始，到渲染，到消亡的过程，就是组件的生命周期。
组件的生命周期可以分为三个阶段：
- 挂载阶段
- 更新阶段
- 卸载阶段
-
挂载阶段
在这个过程中，会触发以下几个事件
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的根据状态进行更新的机制，和组件的生命周期机制是紧密相连的
React组件的生命周期
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。