Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React

//Einen abgeleiteten Status von den Props abrufen static getDerivedStateFromProps(props,state){
	Rücklaufstützen
}

<div id="test"></div>
  <!-- React-Core-Bibliothek importieren -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- Einführung von react-dom zur Unterstützung von react beim Betrieb von dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- Führen Sie Babel ein, um jsx in js zu konvertieren -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <Skripttyp = "Text/Babel">
    //Komponentenklasse erstellen Count erweitert React.Component{
    // Konstruktor Konstruktor(Requisiten){
      console.log('Anzahl ---Konstruktor')
      super(Requisiten)
      // Status initialisieren this.state = {count:0}
    }

    //Komponente einhakenDidMount(){
      console.log('Anzahl --- componentDidMount')
    }

    // Rückruf der Schaltfläche „Komponente deinstallieren“ death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // Implementiere +1
     hinzufügen =()=>{
      // Den ursprünglichen Zustand abrufen const {count} = this.state
      // Status aktualisieren this.setState({count:count+1})
    }

    // Rückruf für die Schaltfläche zum erzwungenen Aktualisieren force=()=>{
      dies.forceUpdate()
    }

    statisch getDerivedStateFromProps(Requisiten,Zustand){
      console.log('getDerivedStateFromProps', Eigenschaften, Status)
      Rücklaufstützen
    }

    // Steuerkomponenten-Updateventil shouldComponentUpdate(){
      console.log('Anzahl --- sollteKomponentenaktualisierung')
      // Wenn der Rückgabewert false ist, ist das Ventil standardmäßig geschlossen.
      returniere wahr
    }

    //Komponentenaktualisierung abgeschlossen hook componentDidUpdate(){
      console.log('Anzahl --- KomponenteDidUpdate')
    }

     // Die Komponente wird deinstalliert hook componentWillUnmount(){
      console.log('Anzahl --- Komponente wird ausgehängt');
    }

    machen(){
      console.log('Anzahl --- Rendern')
      const {Anzahl} = dieser.Zustand
      zurückkehren(
        <div>
          <h2>Aktuelle Summe: {count}</h2>
          <button onClick={this.add}>Klick mich an +1</button>  
          <button onClick={this.death}>Klicken Sie hier, um die Komponente zu deinstallieren</button>  
          <button onClick={this.force}>Klicken Sie hier, um die Aktualisierung zu erzwingen (ohne Daten zu ändern)</button>  
        </div>
      )
    }
  }
  
  // Rendering-Komponente ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </Skript>

<div id="test"></div>
  <!-- React-Core-Bibliothek importieren -->
  <script src="../js/17.0.1/react.development.js"></script>
  <!-- Einführung von react-dom zur Unterstützung von react beim Betrieb von dom -->
  <script src="../js/17.0.1/react-dom.development.js"></script>
  <!-- Führen Sie Babel ein, um jsx in js zu konvertieren -->
  <script src="../js/17.0.1/babel.min.js"></script>

  <Skripttyp = "Text/Babel">
    //Komponentenklasse erstellen Count erweitert React.Component{
    // Konstruktor Konstruktor(Requisiten){
      console.log('Anzahl ---Konstruktor')
      super(Requisiten)
      // Status initialisieren this.state = {count:0}
    }

    //Komponente einhakenDidMount(){
      console.log('Anzahl --- componentDidMount')
    }

    // Rückruf der Schaltfläche „Komponente deinstallieren“ death=()=>{
      ReactDOM.unmountComponentAtNode(document.getElementById('test'))
    }

    // Implementiere +1
     hinzufügen =()=>{
      // Den ursprünglichen Zustand abrufen const {count} = this.state
      // Status aktualisieren this.setState({count:count+1})
    }

    // Rückruf für die Schaltfläche zum erzwungenen Aktualisieren force=()=>{
      dies.forceUpdate()
    }

    statisch getDerivedStateFromProps(Requisiten,Zustand){
      console.log('getDerivedStateFromProps', Eigenschaften, Status)
      return null
    }

    getSnapshotBeforeUpdate(){
      console.log('getSnapshotBeforeUpdate');
      "eee" zurückgeben
    }

    // Steuerkomponenten-Updateventil shouldComponentUpdate(){
      console.log('Anzahl --- sollteKomponentenaktualisierung')
      // Wenn der Rückgabewert false ist, ist das Ventil standardmäßig geschlossen.
      returniere wahr
    }

    //Komponentenaktualisierung abgeschlossen hook componentDidUpdate(preProps,preState,snapshotValue){
      console.log('Anzahl---1Komponentenaktualisierung', preProps, preState, SnapshotValue);
    }

     // Die Komponente wird deinstalliert hook componentWillUnmount(){
      console.log('Anzahl --- Komponente wird ausgehängt');
    }

    machen(){
      console.log('Anzahl --- Rendern')
      const {Anzahl} = dieser.Zustand
      zurückkehren(
        <div>
          <h2>Aktuelle Summe: {count}</h2>
          <button onClick={this.add}>Klick mich an +1</button>  
          <button onClick={this.death}>Klicken Sie hier, um die Komponente zu deinstallieren</button>  
          <button onClick={this.force}>Klicken Sie hier, um die Aktualisierung zu erzwingen (ohne Daten zu ändern)</button>  
        </div>
      )
    }
  }
  
  // Rendering-Komponente ReactDOM.render(<Count count={166}/>,document.getElementById('test'))
  </Skript>