react 中 生命周期

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('当这个组件即将被从页面中剔除的时候执行')

   }

以上是 react 中 生命周期 的全部内容, 来源链接: utcz.com/z/383779.html

回到顶部