react生命周期函数（老版本）

图例说明

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()//组件卸载

生命周期：

1. 组件的初始化流程：

defaultProps===>constructor===>componentWillMount===>render==>componentDidMount

2. 组件的数据更新流程

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>
  }
}