react的生命周期可以分为
三个状态
- Mounting:组件挂载,已插入真实DOM
- Updating:组件更新,正在被重新渲染
- Unmounting:组件移出,已移出真实Dom
四个阶段
创建、实例化、更新、销毁
三个状态又可以细分以下阶段
Mounting/组件挂载相关
componentWillMount
组件将要挂载。在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state
componentDidMount
组件已经挂载。在render之后执行，同一个组件重复渲染只执行一次
Updating/组件更新相关
componentWillReceiveProps
已加载组件收到新的props之前调用，注意组件初始化渲染时则不会执行
shouldComponentUpdate
组件判断是否重新渲染时调用。该接口实际是在组件接收到了新的props或者新的state的时候会立即调用
componentWillUpdate
组件将要更新
componentDidUpdate
组件已经更新
Unmounting/组件移除相关
componentWillUnmount
在组件将要被移除之前的时间点触发，可以利用该方法来执行一些必要的清理组件将要移除
生命周期中与props和state相关
getDefaultProps
设置props属性默认值
getInitialState
升值state属性初始化
上面说的都是什么鬼，看不懂，下面看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
var Demo = React.createClass({
/*
1.创建阶段
只调用getDefaultProps方法
*/
getDefaultProps:function(){
// 在创建类的时候被调用，设置this.props的默认值
console.log("getDefaultProps");
return {};
},
/*
2.实例化阶段
*/
getInitialState:function(){
// 设置this.props的默认值
console.log("getInitialState");
return null;
},
componentWillMount:function(){
// 在render之前调用
console.log("componentWillMount");
},
render:function(){
// 用来渲染并返回虚拟DOM
console.log("render");
return <div>Hello</div>
},
componentDidMount:function(){
// 在render之后调用
// 在该方法中，React会使用render方法返回的虚拟DOM对象创建真实的DOM结构
// 可以在这个方法中读取DOM节点
console.log("componentDidMount");
},
/*
3.更新阶段
*/
// 父组件修改属性触发，可以修改新属性和状态
componentWillReceiveProps:function(){
console.log("componentWillReceiveProps");
},
// 是否更新，返回false会阻止render调用
shouldComponentUpdate:function(){
console.log("shouldComponentUpdate");
return true;
},
// 组件将要更新
componentWillUpdate:function(){
console.log("componentWillUpdate");
},
// 组件已经更新
componentDidUpdate:function(){
console.log("componentDidUpdate");
},
/*
4.销毁阶段
*/
componentWillUnmount:function(){
console.log("componentWillUnmount");
}
})
ReactDOM.render(
<Demo/>,
document.getElementById("container")
)
</script>
</body>
</html>
执行此代码，可以在控制台看到
image.png
执行了创建和实例化阶段
当我们再代码中再次加入
ReactDOM.render(
<Demo/>,
document.getElementById("container")
)
执行代码
image.png
执行了实例化阶段
当我们在shouldComponentUpdate中返回false
shouldComponentUpdate:function(){
console.log("shouldComponentUpdate");
return false;
},
image.png
组件并没有更新
在代码中继续加入
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
执行代码
image.png
组件被移除
网友评论