React
Lebenszyklus der Reaktionskomponente

Einführung

Komponentenerstellung

Wenn eine React-Komponente erstellt wird, werden einige Funktionen aufgerufen:

• Wenn Sie React.createClass (ES5) verwenden, werden 5 benutzerdefinierte Funktionen aufgerufen
• Wenn Sie die class Component extends React.Component (ES6) verwenden, werden 3 benutzerdefinierte Funktionen aufgerufen

getDefaultProps() (nur ES5)

Dies ist die erste aufgerufene Methode.

Von dieser Funktion zurückgegebene Prop-Werte werden als Standardwerte verwendet, wenn sie nicht definiert werden, wenn die Komponente instanziiert wird.

Im folgenden Beispiel wird this.props.name auf Bob sofern nicht anders angegeben:

getDefaultProps() {
  return {
    initialCount: 0,
    name: 'Bob'
  };
}

getInitialState() (nur ES5)

Dies ist die zweite aufgerufene Methode.

Der Rückgabewert von getInitialState() definiert den Anfangsstatus der React-Komponente. Das React-Framework ruft diese Funktion auf und weist diesem this.state den Rückgabewert zu.

Im folgende Beispiel this.state.count wird mit dem Wert von intialized this.props.initialCount :

getInitialState() {
  return {
    count : this.props.initialCount
  };
}

componentWillMount() (ES5 und ES6)

Dies ist die dritte aufgerufene Methode.

Diese Funktion kann verwendet werden, um endgültige Änderungen an der Komponente vorzunehmen, bevor sie zum DOM hinzugefügt wird.

componentWillMount() {
  ...
}

render() (ES5 und ES6)

Dies ist die vierte aufgerufene Methode.

Die Funktion render() sollte eine reine Funktion des Zustands und der Requisiten der Komponente sein. Sie gibt ein einzelnes Element zurück, das die Komponente während des Rendervorgangs darstellt, und sollte entweder eine native DOM-Komponente (z. B. <p /> ) oder eine Verbundkomponente sein. Wenn nichts gerendert werden soll, kann es null oder undefined .

Diese Funktion wird nach jeder Änderung der Requisiten oder des Zustands der Komponente aufgerufen.

render() {
  return (
    <div>
      Hello, {this.props.name}!
    </div>
  );
}

componentDidMount() (ES5 und ES6)

Dies ist die fünfte Methode, die aufgerufen wird.

Die Komponente wurde gemountet und Sie können jetzt auf die DOM-Knoten der Komponente zugreifen, z. B. über refs .

Diese Methode sollte verwendet werden für:

• Timer vorbereiten
• Daten abrufen
• Ereignis-Listener hinzufügen
• DOM-Elemente bearbeiten

componentDidMount() {
  ...
}

ES6-Syntax

Wenn die Komponente mit der ES6-Klassensyntax definiert ist, können die Funktionen getDefaultProps() und getInitialState() nicht verwendet werden.

Stattdessen deklarieren wir unsere defaultProps als statische Eigenschaft für die Klasse und deklarieren die Zustandsform und den Anfangszustand im Konstruktor unserer Klasse. Beide werden zur Konstruktionszeit auf die Instanz der Klasse festgelegt, bevor eine andere React-Lebenszyklusfunktion aufgerufen wird.

Das folgende Beispiel veranschaulicht diesen alternativen Ansatz:

class MyReactClass extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      count: this.props.initialCount
    };
  }
  
  upCount() {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  }
  
  render() {
    return (
      <div>
        Hello, {this.props.name}!<br />
        You clicked the button {this.state.count} times.<br />
        <button onClick={this.upCount}>Click here!</button>
      </div>
    );
  }
}

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getDefaultProps() ersetzen

Standardwerte für die Komponentenrequisiten werden durch Festlegen der Eigenschaft defaultProps der Klasse angegeben:

MyReactClass.defaultProps = {
  name: 'Bob',
  initialCount: 0
};

getInitialState() ersetzen

Der idiomatische Weg zum Einrichten des Anfangszustands der Komponente besteht darin, im Konstruktor this.state :

constructor(props){
  super(props);

  this.state = {
    count: this.props.initialCount
  };
}

Komponentenaktualisierung

componentWillReceiveProps(nextProps)

Dies ist die erste Funktion, die bei Eigenschaftsänderungen aufgerufen wird .

Wenn sich die Eigenschaften der Komponente ändern , ruft React diese Funktion mit den neuen Eigenschaften auf . Sie können mit this.props zu den alten Requisiten zuzugreifen und diese auf die neuen Requisiten mit nextProps.

Mit diesen Variablen können Sie einige Vergleichsoperationen zwischen alten und neuen Requisiten durchführen oder eine Funktion aufrufen, da sich eine Eigenschaft ändert.

componentWillReceiveProps(nextProps){
  if (nextProps.initialCount && nextProps.initialCount > this.state.count){
    this.setState({
      count : nextProps.initialCount
    });
  }
}

shouldComponentUpdate(nextProps, nextState)

Dies ist die zweite Funktion, die bei Eigenschaftsänderungen und der ersten Zustandsänderung aufgerufen wird .

Wenn eine andere Komponente / Ihre Komponente eine Eigenschaft / einen Status Ihrer Komponente ändert, rendert React standardmäßig eine neue Version Ihrer Komponente. In diesem Fall gibt diese Funktion immer true zurück.

Sie können diese Funktion überschreiben und genauer wählen, ob Ihre Komponente aktualisiert werden muss oder nicht .

Diese Funktion wird hauptsächlich zur Optimierung verwendet .

Wenn die Funktion " false" zurückgibt, wird die Update-Pipeline sofort angehalten .

componentShouldUpdate(nextProps, nextState){
  return this.props.name !== nextProps.name ||
    this.state.count !== nextState.count;
}

componentWillUpdate(nextProps, nextState)

Diese Funktion funktioniert wie componentWillMount() . Änderungen sind nicht in DOM enthalten . Sie können also einige Änderungen vornehmen, bevor das Update ausgeführt wird.

/! \: Sie können this.setState () nicht verwenden.

componentWillUpdate(nextProps, nextState){}

render()

Es gibt einige Änderungen, also rendern Sie die Komponente erneut.

componentDidUpdate(prevProps, prevState)

Dasselbe wie componentDidMount() : DOM wird aktualisiert , sodass Sie hier einige Arbeiten am DOM ausführen können.

componentDidUpdate(prevProps, prevState){}

Komponentenentfernung

componentWillUnmount()

Diese Methode wird aufgerufen, bevor eine Komponente vom DOM abgehängt wird.

Es ist ein guter Ort für Reinigungsarbeiten wie:

• Ereignis-Listener entfernen
• Clearing-Timer
• Steckdosen stoppen
• Redux-Zustände bereinigen.

componentWillUnmount(){
  ...
}

Ein Beispiel zum Entfernen eines angehängten Ereignislisteners in componentWillUnMount

import React, { Component } from 'react';

export default class SideMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
        ...
      };
    this.openMenu = this.openMenu.bind(this);
    this.closeMenu = this.closeMenu.bind(this);
  }

  componentDidMount() {
    document.addEventListener("click", this.closeMenu);
  }

  componentWillUnmount() {
    document.removeEventListener("click", this.closeMenu);
  }

  openMenu() {
    ...
  }

  closeMenu() {
    ...
  }

  render() {
    return (
      <div>
        <a
          href      = "javascript:void(0)"
          className = "closebtn"
          onClick   = {this.closeMenu}
        >
          ×
        </a>
        <div>
          Some other structure
        </div>
      </div>
    );
  }
}

Komponentenbehälter reagieren

Beim Erstellen einer React-Anwendung ist es häufig wünschenswert, Komponenten nach ihrer Hauptverantwortung in Präsentations- und Container-Komponenten zu unterteilen.
Bei Präsentationskomponenten handelt es sich nur um die Anzeige von Daten. Sie können als Funktionen betrachtet werden und werden häufig als Funktionen implementiert, die ein Modell in eine Ansicht konvertieren. Normalerweise behalten sie keinen internen Zustand bei. Container-Komponenten befassen sich mit der Datenverwaltung. Dies kann intern durch den eigenen Bundesstaat oder durch Vermittlung bei einer Staatsverwaltungsbibliothek wie Redux erfolgen. Die Containerkomponente zeigt keine Daten direkt an, sondern leitet die Daten an eine Präsentationskomponente weiter.

// Container component
import React, { Component } from 'react';
import Api from 'path/to/api';

class CommentsListContainer extends Component {
    constructor() {
        super();
        // Set initial state
        this.state = { comments: [] }
    }

    componentDidMount() {
        // Make API call and update state with returned comments
        Api.getComments().then(comments => this.setState({ comments }));
    }

    render() {
        // Pass our state comments to the presentational component
        return (
            <CommentsList comments={this.state.comments} />;
        );
    }
}

// Presentational Component
const CommentsList = ({ comments }) => (
    <div>
        {comments.map(comment => (
            <div>{comment}</div>
        )}
    </div>
);

CommentsList.propTypes = {
    comments: React.PropTypes.arrayOf(React.PropTypes.string)
}

Lebenszyklus-Methodenaufruf in verschiedenen Status

Dieses Beispiel dient als Ergänzung zu anderen Beispielen, in denen die Verwendung der Lebenszyklusmethoden beschrieben wird und wann die Methode aufgerufen wird.

In diesem Beispiel wird zusammengefasst, welche Methoden (ComponentWillMount, ComponentWillReceiveProps usw.) aufgerufen werden und in welcher Reihenfolge sich die Komponenten in verschiedenen Status unterscheiden :

Wenn eine Komponente initialisiert wird:

1. getDefaultProps
2. getInitialState
3. KomponenteWillMount
4. machen
5. componentDidMount

Wenn sich eine Komponente geändert hat:

1. shouldComponentUpdate
2. KomponenteWillUpdate
3. machen
4. componentDidUpdate

Wenn eine Komponente Requisiten geändert hat:

1. componentWillReceiveProps
2. shouldComponentUpdate
3. KomponenteWillUpdate
4. machen
5. componentDidUpdate

Wenn eine Komponente abgemeldet wird:

1. KomponenteWillUnmount