欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

React 生命周期函数详解

程序员文章站 2024-02-26 22:36:46
...

目录

  1. 概念
  2. componentWillMount
  3. componentDidMount
  4. shouldComponentUpdate
  5. componentWillUpdate
  6. componentDidUpdate
  7. componentWillReceiveProps
  8. componentWillUnmount

概念

生命周期函数:指在某一个时刻组件会自动调用执行的函数 //在组件即将被挂载到页面的时刻自动执行

componentWillMount

  //在组件即将被挂载到页面的时刻自动执行
  componentWillMount(){
    console.log('componentWillMount')
  }

componentDidMount

  //在组件被挂载到页面之后自动执行
  componentDidMount(){
      console.log('componentDidMount')
  }

shouldComponentUpdate

  //组件被更新之前会自动执行
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate')
    //true会继续false暂停
    return true;
  }

componentWillUpdate

  //shouldComponentUpdate 执行完 componentWillUpdate 才执行
  componentWillUpdate(){
    console.log(' componentWillUpdate')
  }

componentDidUpdate

  //组件更新完成之后会被执行
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }

componentWillReceiveProps

  //当一个组件从父组件接收参数且组件之前已经存在于父组件时执行
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps')
  }

@[toc] componentWillUnmount 

 //当这个组件即将被从页面剔除才会被执行
  componentWillUnmount(){
    console.log('componentWillUnmount')
  }