图例说明
react-life.jpg
生命周期函数
1. defaultProps//设置默认属性(方法只有浏览器编译以后 才会生效,es6的类不允许static后边接属性,只允许接函数,这里是react做的处理)
class A extends React.Component{
static defaultProps = {
age: 18
}
}
2. componentWillMount()//挂载之前
3. render(return jsx)//挂载
3. componentDidMount()//挂载之后
5. componentWillReceiveProps(nextProps)//Props属性改变后(路由重新渲染或者是REDUX容器中的状态改变了)
6. shouldComponentUpdate(nextProps, nextState)//是否允许组件更新 返回true或false决定是否允许update
7. componentWillUpdate()//组件更新之前
8. componentDidUpdate()//组件更新之后
9. componentWillUnmount()//组件卸载
生命周期:
- 组件的初始化流程:
defaultProps===>constructor===>componentWillMount===>render==>componentDidMount
- 组件的数据更新流程
shouldComponentUpdate ==> componentWillUpdate ==> render ==> componentDidUpdate
例子演示
class lift extends React.Component{
constructor(){
super();
this.state.num=10;
}
componentWillMount(){
console.log('组件挂载之前')
//相当于vue的beforeCreate
}
componentDidMount(){
console.log('组件挂载之后')
//控制状态信息更改的操作
//从服务器获取数据
//相当于vue的created
}
shouldComponentUpdate(nextProps,nextState){
console.log('是否允许组件更新,返回true是允许更新,返回false是不允许组件更新');
//可以用来控制流程
//在这个钩子函数中,获取的this.state不是新修改的,而是修改之前的
//两个参数 nextProps罪行的属性信息 nextState最新修改的状态信息
}
cpmponentWillUpdate(){
console.log('组件更新之前')
//相当于vue的beforeUpdate
}
cpmponentDidUpdate(){
console.log('组件更新之后')
//相当于vue的updated
}
componentEillReceiveProps(nextProps,nextState){
console.log('组件的属性发生改变')
}
componentWillUnmount(){
console.log('组件销毁')
}
render(){
console.log('组件挂载')
return <div>{this.state.num}</div>
}
}
网友评论