The React component lifecycle

import React from 'react';
import logo from './logo.svg';
import './App.css';
class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      msg:'News for the first time'}}componentWillMount(){
    console.log(this.state.msg);
    
  }
  componentDidMount(){
    console.log('I'm after render');
    // This is where the Ajax request component is already mounted and can safely fetch the rendered DOM, so it is most appropriate at this stage
  }
  componentWillUpdate(){
    console.log('I'm about to update');
    
  }
  componentDidUpdate(){
    console.log('I've updated.');
    
  }
  // It will not execute immediately at initialization but will be triggered when component receives new props for the state
    // This is usually used to re-render child components when the parent component is updated
    // React is not based on the data content, but based on the reference to the data
  componentWillReceiveProps(nextProps){
    console.log(nextProps.todos);
    console.log(this.props.todos);
  }
  shouldComponentUpdate(nextProps,nextState){
    console.log(nextState);
    console.log(this.state.msg);
    return false
  }
  handelClick = () = >{
    this.setState({
      msg:'I'm the updated data.'})}componentWillUnmount(){
    // Will tie up some loose ends
    // Clear the timer
    console.log('I'm about to be unloaded');
    
  }
  handelUnMount = () = >{
    React.unmountComponentAtNode(document.getElementById('root'))}render(){
    const {msg} = this.state; 
    return(
      <div>
        <h1>{msg}</h1>
        <button onClick={this.handelClick}>update</button>
        <button onClick={this.handelUnMount}>uninstall</button>
      </div>)}}export default App;
Copy the code