current position:Home>Analysis of react life cycle function

Analysis of react life cycle function

2022-05-15 02:05:04ALKEN ABBY

react Analysis of life cycle function

The picture shows :

 Insert picture description here

The code description :

   //  Life cycle function 
  //  Automatically execute when the component is about to be mounted to the page 
  componentWillMount() {
    
    console.log('componentWillMount')
  }


render(){
    
	console.log('render')
}

 //  After the component is first mounted on the page , Automatically executed 
  componentDidMount() {
    
    console.log('componentDidMount')
  }


//  Before the component update, it will execute 
  //  The return value is Boolean ,true  Is the value to update ,false  Is not to update the value 
  shouldComponentUpdate(nextProps, nextState, nextContext) {
    
    console.log('shouldComponentUpdate');
    return true;
  }


  //  The component update will be executed before , But he was there.  shouldComponentUpdate  Then it's executed 
  //  If  shouldComponentUpdate  return true, He did it 
  //  If  shouldComponentUpdate  return false, He doesn't carry out 
  componentWillUpdate(nextProps, nextState, nextContext) {
    
    console.log('componentWillUpdate')
  }


//  After the component update is completed , He will be executed 
  componentDidUpdate(prevProps, prevState, snapshot) {
    
    console.log('componentDidUpdate')
  }


  //  Conditions :
  //  A component wants to receive... From the parent component props Parameters 
  //  As long as the parent component's  render  The function is re executed , The lifecycle function of the sub component will be executed 
  //  namely   If this component exists in the parent component for the first time , Not execute 
  //  If this component already exists in the parent component , Will execute 
  componentWillReceiveProps(nextProps, nextContext) {
    
    console.log('child componentWillReceiveProps')
  }


  //  When this component is about to be removed from the page , Will be performed 
  componentWillUnmount() {
    
    console.log(' child componentWillUnmount');
  }

copyright notice
author[ALKEN ABBY],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/132/202205120527478833.html

Random recommended