React 生命周期函数

import React,{ Component,Fragment } from 'react'
class Note extends Component{
  
  //组件第一次即将被挂载到页面的时候，会被执行
  componentWillMount(){
    console.log('componentWillMount');
  }

  //组件组件第一次挂载到页面后会被执行
  componentDidMount(){
    console.log('componentDidMount');
  }

  //一个组件要从父组件接受参数
  ////只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
  //////只要父组件的render函数被执行了，子组件的这个componentWillReceiveProps函数就会被执行
  //如果这个组件第一次存在于父组件中，不会执行
  //如果这个组件之前已经存在于父组件中，才会执行  
  componentWillReceiveProps(){
    console.log('child componentWillReceiveProps');
  }

  //组件需要更新吗，返回的是一个Boolean值，如果返回true，componentWillUpdate、 render、componentDidUpdate 会执行,如果返回false不会执行componentWillUpdate、 render、componentDidUpdate函数
  shouldComponentUpdate(){
    console.log('shoundComponentUpdate');
    return true;
  }

  //当shouldComponentUpdate返回true时，在重新渲染之前(render)之前会被执行
  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  //当shouldComponentUpdate返回true时，在重新渲染之后（render）之后会被执行
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }
  
  //当这个组件即将被从页面中剔除的时候，会被执行
  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  //数据（props 或者state）发生改变的时候,会被执行
  //父组件的render执行后，子组件的render函数也会被执行
  render(){
    console.log('render');
    return (
      <Fragment></Fragment>
    )
  }

}
export default Note;

标签：生命,console,log,render,周期函数,React,组件,执行,componentWillUpdate
来源： https://www.cnblogs.com/wangwenhui/p/10946160.html