整个组件，从创建组件类开始，到渲染，到消亡的过程，就是组件的生命周期。
组件的生命周期可以分为三个阶段：
- 挂载阶段
- 更新阶段
- 卸载阶段
-
挂载阶段
在这个过程中，会触发以下几个事件
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的根据状态进行更新的机制，和组件的生命周期机制是紧密相连的
时间： 2024-12-28 02:35:10