React new version life cycle hook function and usage detailed explanation

//Get a derived state from props static getDerivedStateFromProps(props,state){
	return props
}

<div id="test"></div>
  <!-- Import react core library -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- Introduce react-dom to support react to operate dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- Introduce babel to convert jsx to js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // Create component class Count extends React.Component{
    // Constructor constructor(props){
      console.log('Count ---constructor')
      super(props)
      // Initialize state this.state = {count:0}
    }

    //Hook componentDidMount(){
      console.log('Count --- componentDidMount')
    }

    // Uninstall component button callback death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // Implement +1
     add =()=>{
      // Get the original state const {count} = this.state
      // Update status this.setState({count:count+1})
    }

    // Callback for the forced update button force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps', props, state)
      return props
    }

    // Control component update valve shouldComponentUpdate(){
      console.log('Count --- shouldComponentUpdate')
      // If the return value is false, the valve is closed by default.
      return true
    }

    //Component update completed hook componentDidUpdate(){
      console.log('Count --- componentDidUpdate')
    }

     // The component will be uninstalled hook componentWillUnmount(){
      console.log('Count --- componentWillUnmount');
    }

    render(){
      console.log('Count --- render')
      const {count} = this.state
      return(
        <div>
          <h2>Current sum: {count}</h2>
          <button onClick={this.add}>Click me +1</button>  
          <button onClick={this.death}>Click me to uninstall the component</button>  
          <button onClick={this.force}>Click here to force update (without changing data)</button>  
        </div>
      )
    }
  }
  
  // Rendering component ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>

<div id="test"></div>
  <!-- Import react core library -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- Introduce react-dom to support react to operate dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- Introduce babel to convert jsx to js -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <script type='text/babel'>
    // Create component class Count extends React.Component{
    // Constructor constructor(props){
      console.log('Count ---constructor')
      super(props)
      // Initialize state this.state = {count:0}
    }

    //Hook componentDidMount(){
      console.log('Count --- componentDidMount')
    }

    // Uninstall component button callback death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // Implement +1
     add =()=>{
      // Get the original state const {count} = this.state
      // Update status this.setState({count:count+1})
    }

    // Callback for the forced update button force=()=>{
      this.forceUpdate()
    }

    static getDerivedStateFromProps(props,state){
      console.log('getDerivedStateFromProps', props, state)
      return null
    }

    getSnapshotBeforeUpdate(){
      console.log('getSnapshotBeforeUpdate');
      return "eee"
    }

    // Control component update valve shouldComponentUpdate(){
      console.log('Count --- shouldComponentUpdate')
      // If the return value is false, the valve is closed by default.
      return true
    }

    //Component update completed hook componentDidUpdate(preProps,preState,snapshotValue){
      console.log('Count---1componentDidUpdate',preProps,preState,snapshotValue);
    }

     // The component will be uninstalled hook componentWillUnmount(){
      console.log('Count --- componentWillUnmount');
    }

    render(){
      console.log('Count --- render')
      const {count} = this.state
      return(
        <div>
          <h2>Current sum: {count}</h2>
          <button onClick={this.add}>Click me +1</button>  
          <button onClick={this.death}>Click me to uninstall the component</button>  
          <button onClick={this.force}>Click here to force update (without changing data)</button>  
        </div>
      )
    }
  }
  
  // Rendering component ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </script>