生命周期的三个阶段
- Mounting 加载阶段
- Update 更新阶段
- UnMounting 卸载阶段
常用的React生命周期函数
- componentWillMount 第一次渲染之前
- componentDidMount 第一次渲染之后
- componentWillReceiveProps(nextProps){} 在组件接受新的props调用
componentWillReceiveProps(nextProps){
if(this.props.num !== nextProps.num){
//处理逻辑
}
}
- shouldComponentUpdate(nextProps,nextState){} 返回一个布尔值,在组件接受一个新的props或者新的state调用。
shouldComponentUpDate(nextProps,nextState){
if(nextProps.num !== this.props.num){
return true;
}
return false;
}
- componentWillUpdate(nextProps,nextState){} 在组件接受新的state和新的props,但还没render的时候调用。
componentWillUpdate(nextProps,nextState){
}
- componentDidUpdate(prevProps,prevState){} 在组件更新之后调用。
componentDidUpdate(prevProps,prevState){
}
- componentWillUnMount() 在组件卸载之前立即调用。
示例:
/**
* Created by mapbar_front on 2019/8/26.
*/
import React,{Component} from 'react';
import {Button} from 'antd';
class ShowNum extends Component{
constructor(props){
super(props);
}
componentWillReceiveProps(nextProps){
console.log('---receive props---');
console.log('this.props',this.props);
console.log('nextProps',nextProps);
}
shouldComponentUpdate(newProps){
console.log('新的newProps');
if(newProps.num !== this.props.num){
console.log('newProps.num',newProps.num);
console.log('this.props.num',this.props.num);
return true;
}else {
console.log('else');
console.log('newProps.num',newProps.num);
console.log('this.props.num',this.props.num);
}
return false;
}
componentDidUpdate(prevProps,prevState){
console.log('---componentDidUpdate2---');
console.log('prevProps',prevProps);
console.log('prevState',prevState);
}
render(){
return(
<div>
{this.props.num}
</div>
)
}
}
class LifeCycle extends Component{
constructor(props){
super(props);
this.state = {
num:0,
}
}
componentWillMount(){
console.log('will mount');
}
componentDidMount(){
console.log('did mount');
}
shouldComponentUpdate(newProps,newState){
console.log('---should update---');
console.log('newProps',newProps);
console.log('newState',newState);
return true;
}
componentWillUpdate(nextProps,nextState){
console.log('---will update---');
}
componentDidUpdate(prevProps,prevState){
console.log('---did update---');
console.log('prevProps',prevProps);
console.log('prevState',prevState);
}
addNum=()=>{
this.setState({
num: this.state.num+1
})
}
render(){
return(
<div>
<Button onClick={this.addNum}>
LifeCycle
</Button>
<ShowNum num={this.state.num}/>
</div>
)
}
}
export default LifeCycle;
react17版本新增的两个生命周期函数是:
- List item