react 中 生命周期

生命周期函数 指在某一时刻组件会自动调用执行的函数

例如  

  当时 state 和props 发送改变是会自动执行  render 函数

 

1.Initializtion

    初始化 props 和 state

2.Mounting  组件挂载

    //在组件即将被挂载到页面的时刻执行

    componentWillMount（）{

          console.log('会在render函数之前执行，且只在第一次执行')

    }

    //在组件被挂载到页面的时刻执行

  componentDidMount（）{

          console.log('会在render函数之后执行，且只在第一次执行')

    }

3.Updation  组件更新

      当props 或 states  发送改变时都会执行的生命周期

      shouldComponentUpdate(nextProps,nextState){

        // 案例   如果组件的值发送变化 返回true

        if(nextProps.content!==this.props.content){

             return ture

        }else{

              return false

        }

         console.log('这儿有两个参数意思  下一步 props 或  nextState 会变化成生命样子')

          console.log('组件被更新之前 他会自动执行,要求返回一个布尔类型，决定组件是是否被更新，如果是false则无法更新组件')

          return true

      }

      // 组件被更新之前 会自动执行

      componentWillUpdate(){

          console.log('如果 shouldComponentUpdate 返回 true 会执行，在render之前  false则不执行')

          return true

      }

     //在组件更新完成之后执行

     componentDidUpdate（）{

          console.log('如果 shouldComponentUpdate 返回 true 会执行，在render之后  false则不执行')

     }

     props 会比  states  多一个生命周期

     //  当一个组件从父组件 接收参数

    //    只要父组件的render函数被重新执行了  子组件的这个生命周期函数 就会被执行

     componentWillReceiveProps(){

         console.log（'换一种解释：如果这个组件第一次存在于父组件中 不会执行，如果这个组件之前已经存在于父组件中，才会执行')

     }

4.Unmounting   把这个组件 在页面上去除的过程

   componentWillUnmount(){

      console.log('当这个组件即将被从页面中剔除的时候执行')

   }