Interviewer stellen häufig Fragen zum Lebenszyklus von React

React-Lebenszyklus

Zwei Bilder zum besseren Verständnis des Lebenszyklus von React

React-Lebenszyklus (alt)

Klasse Life erweitert React.Component{
      // Konstruktor Konstruktor(Requisiten){
        console.log('Lebenskonstruktor --- Konstruktor');
        super(Requisiten)
        dieser.Zustand={num:0}
      }
      // Berechnen Sie +1 Funktion add=()=>{
        const {num} = dieser.Zustand
        dies.setState({num:num+1})
      }
      // Komponente löschen death=()=>{
        ReactDOM.unmountComponentAtNode(document.getElementById('text'))
      }
      Kraft = () = > {
        dies.forceUpdate()
      }
      // Wird componentWillMount(){ mounten
        console.log('Life wird gemountet --- componentWillMount');
      }
      // Bereits gemountet componentDidMount(){
        console.log('Das Leben wurde gemountet --- componentDidMount');
      }
      //Triggerkomponente löschenWillUnmount(){
        console.log('Auslöser für Lebenslöschung --- componentWillUnmount');
      }
      // Sollen die Daten geändert werden? shouldComponentUpdate(){
        console.log('Ändert Life Daten --- shouldComponentUpdate');
        returniere wahr
      }
      // Daten werden geändert componentWillUpdate(){
        console.log('Das Leben steht kurz vor einer Datenänderung --- componentWillUpdate');
      }
      //datacomponentDidUpdate() ändern{
        console.log('Das Leben verändert Daten --- componentDidUpdate');
      }
      machen(){
        console.log('Leben---render');
        const {num} = dieser.Zustand
        zurückkehren(
          <div>
          <h1>Zähler: {num}</h1> 
          <button onClick={this.add}>Klick mich an +1</button> 
          <button onClick={this.death}>Löschen</button> 
          <button onClick={this.force}>Keinen Datenzustand ändern, Aktualisierung erzwingen</button> 
          </div>
        )
      }
    }
    // Rendere die Seite ReactDOM.render(<Life />, document.getElementById('text'))

Montageschritte

Schritte zum Aktualisieren

löschen

Zusammenfassung: Initialisierungsphase: ausgelöst durch ReactDOM.render() – erstes Rendering
1. constructor() ---構造器
2. componentWillMount() ---將要掛載
3. render() ---render
4. componentDidMount() ---掛載時: ausgelöst durch this.setSate() innerhalb der Komponente oder erneutes Rendern der übergeordneten Komponente
1. shouldComponentUpdate() ---是否要進行更改數據
2. componentWillUpdate() ---將要更新數據
3. render()
4. componentDidUpdate() ---更新數據und Komponenten deinstallieren: ausgelöst durch ReactDOM.unmountComponentAtNode()
componentWillUnmount() ---卸載

React-Lebenszyklus (Neu)

Drei Phasen des Lebenszyklus (Neu)

Initialisierungsphase: ausgelöst durch ReactDOM.render() – erstes Rendering
1. Konstruktor()
2. getDerivedStateFromProps
3. rendern()
4. componentDidMount()-Aktualisierungsphase: ausgelöst durch this.setSate() innerhalb der Komponente oder durch erneutes Rendern der übergeordneten Komponente
1. getDerivedStateFromProps
2. sollteComponentUpdate()
3. rendern()
4. getSnapshotBeforeUpdate
5. componentDidUpdate() deinstalliert die Komponente: ausgelöst durch ReactDOM.unmountComponentAtNode()
1. KomponenteWillUnmount()

Wichtiger Haken

1.render: Rendering initialisieren oder Rendering-Aufruf aktualisieren
2.componentDidMount: Überwachung aktivieren und Ajax-Anfrage senden
3.componentWillUnmount: Führen Sie einige Abschlussarbeiten durch, z. B.: Bereinigen Sie den Timer

Der Haken, der aufgegeben wird

1.KomponenteWillMount
2.componentWillReceiveProps
3.componentWillUpdate

現在使用會出現警告，下一個大版本需要加上UNSAFE_前綴才能使用，以后可能會被徹底廢棄，不建議使用。

Damit ist dieser Artikel über die Fragen zum React-Lebenszyklus, die Interviewer häufig stellen, abgeschlossen. Weitere Inhalte zum React-Lebenszyklus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!