第八章 React组件的生命周期

来源：互联网发布：见过最漂亮的女生知乎编辑：程序博客网时间：2024/05/19 17:05

React组件的生命周期分为创建类（继承类）、实例化对象、更新数据和销毁4个阶段，每个阶段又有若干个函数可以响应不同的阶段。
一、创建组件的类
React组件是有类和实例的区别，不管是ES5的写法，见下面代码:
var Component1 = React.createClass({
getInitialState: function() {
return {

}
},
})
还是ES6的使用:
// 定义一个HelloMessage的React组件，通过继承React.Component来实现
class HelloMessage extends React.Component {
...
}
都是在创建一个组件的类，在创建类的时候，只有一个回调 getDefaultProps 会被调用。
二、实例化组件对象
有了组件的类，就可以实例化组件对象，一般由下面过程组成：
1、getInitialState: 获取 this.state 的初始值
2、componentWillMount: 在render之前调用此方法，在render之前需要处理的逻辑就在这里编写
3、render: 渲染并返回一个虚拟DOM
4、componentDidMount: react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法。
需要注意的是：
this.state 只存储原始数据，比如this.state.time = 1733255642536。
render只处理和展示相关的逻辑，比如格式化时间，<span>time: {this.formatTime(this.state.time)}</span>。
3、componentWillMount 用来处理render之前的逻辑，不要在render中处理业务逻辑。
render就是一个模板的作用，他只处理和展示相关的逻辑，比如格式化时间这样的，如果有业务逻辑，那么要放在 componentWillMount 中执行。所以render中一定不会出现改变 state 之类的操作。
如下例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React组件的生命周期</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Component1 = React.createClass({
getInitialState: function() {
return {
time:1733255642536
}
},
formatTime:function(s){
var t=new Date(s)
return t.getFullYear()+"年"+t.getMonth()+"月"+t.getDay()+"日";
},
componentWillMount:function(){
this.setState({time:this.state.time+200000000});
},
render: function() {
return (
<span>time: {this.formatTime(this.state.time)}</span>
);
}
})
ReactDOM.render(<Component1 />,document.getElementById("hello"));
</script>
</body>
</html>
4、render返回的是虚拟DOM。
5、componentDidMount 中处理和真实DOM相关的逻辑。
这时候真实的DOM已经渲染出来，典型的场景就是可以在这里调用jquery插件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React组件的生命周期</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var Component1 = React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps");
return{
name:"zhiboxuan"
}
},
getInitialState: function() {
console.log("getInitialState");
return {
time:1733255642536
}
},
formatTime:function(s){
var t=new Date(s)
return t.getFullYear()+"年"+t.getMonth()+"月"+t.getDay()+"日";
},
componentWillMount:function(){
console.log("componentWillMount");
this.setState({time:this.state.time+200000000});
},
componentDidMount:function(){
console.log("componentDidMount");
},
render: function() {
console.log("render");
return (
<span>time: {this.formatTime(this.state.time)}</span>
);
}
})
ReactDOM.render(<Component1 />,document.getElementById("hello"));
</script>
</body>
</html>
console输出结果：

三、更新方式
假设shouldComponentUpdate都是按照默认返回true的方式，在react中，触发render的有4种情况：
1、首次实例化渲染对象，调用render。
2、调用this.setState (并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render)。
3、父组件发生更新(一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）。
4、调用this.forceUpdate()。
下面是对React组件四种情况的总结：

注意，如果在shouldComponentUpdate里面返回false可以提前退出更新路径。

0 0