美文网首页
react生命周期函数(老版本)

react生命周期函数(老版本)

作者: Mr无愧于心 | 来源:发表于2019-03-08 10:58 被阅读0次

    图例说明

    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
    
    1. 组件的数据更新流程
    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>
      }
    }
    

    相关文章

      网友评论

          本文标题:react生命周期函数(老版本)

          本文链接:https://www.haomeiwen.com/subject/waxzkqtx.html