Was sind die Lebenszyklusfunktionen von React-Komponenten?

Jede Komponente hat einige Lebenszyklusfunktionen.

Wenn eine Komponenteninstanz erstellt und in das DOM eingefügt wird, werden die folgenden Funktionen aufgerufen

constructor
componentWillMount
render
componentDidMount

, um den Zustand der Komponente zu ändern oder props führen zu Aktualisierungen und die folgenden Methoden werden aufgerufen, wenn die Komponente erneut gerendert wird

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Wenn die Komponente aus dem DOM entfernt wird, wird die Folgende Methoden werden aufgerufen:

componentWillUnmount

1.render()

render-Methode ist erforderlich. Der Rückgabewert von render ist vom folgenden Typ:
(1) reagieren Element: entweder eine benutzerdefinierte Komponente oder eine native DOM-Komponente
(2)Zeichenfolge oder Zahl: wird in einen Textknoten im DOM gerendert
(3)Portale:Erstellen Sie <🎜 über ReactDOM.createPortal
>(4)null:Nichts wird gerendert
(5)Boolean:Nichts wird gerendert
(6)Ein Array, das mehrere enthält Elemente

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

Die render

-Methode sollte einfach sein. Der Status der Komponente kann in render nicht geändert werden. a Neue Ergebnisse. Und Sie können nicht mit dem Browser in Render interagieren. Wenn Sie mit dem Browser interagieren müssen, führen Sie ihn in „componentDidMount“ oder anderen Lebenszyklusfunktionen aus. 2.constructor(props)

react Komponente Der Konstruktor wird aufgerufen, bevor die Komponente geladen wird. Wenn der Konstruktor nicht explizit definiert ist, wird der Standardkonstruktor

beim Instanziieren der Komponente aufgerufen.

Wenn der Konstruktor explizit in einer Unterklasse von React.Component definiert ist, ist dies erforderlich super(props) zuerst im Konstruktor aufzurufen.Es ist eine gute Wahl, den Zustand im Konstruktor zu instanziieren. Hier ist ein Beispiel für einen Codeabschnitt
Verwenden Sie in

reagieren Es ist für Requisiten zulässig, den

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

Status zu initialisieren, aber es gibt ein Problem: Wenn

Requisiten aktualisiert werden, wird der Status nicht aktualisiert. Die Lösung ist: Aktualisieren Sie den Status mit neuen Requisiten im componentWillReceiveProps(nextProps) der Komponente. Obwohl dies das Problem lösen kann, wird es nicht empfohlen, den Status auf die nächstgelegene öffentliche übergeordnete Komponente Three.componentWillMount()

componentWillMount, ComponentWillMount wird sofort aufgerufen vor dem Laden. Es wird aufgerufen, bevor render aufgerufen wird. Das Ändern des

Status in

componentWillMount führt nicht dazu, dass die Komponente erneut gerendert wird. Diese Methode wird nur für serverseitiges Rendering aufgerufen. Es wird empfohlen, diese Methode durch constructor zu ersetzen.

4.componentDidMount()

Wenn die Komponente geladen wird, wird componentDidMount sofort ausgelöst. Das Ändern des Status in dieser Funktion führt dazu Komponente zum erneuten Rendern. Das DOM kann erst manipuliert werden, nachdem die Komponente geladen wurde. Wenn Sie Remote-Daten laden müssen, empfiehlt es sich, hier eine Netzwerkanfrage zu senden. >componentWillReceiveProps wird ausgelöst, bevor die reproduzierte Komponente neue Requisiten akzeptiert. Wenn Sie

state aktualisieren müssen, um auf die Aktualisierung von

props zu reagieren, können Sie state hier über die setState-Methode aktualisieren. Wenn die Komponente zum ersten Mal

Requisiten empfängt, wird diese Methode nicht aufgerufen

Hinweis: Diese Methode kann aufgerufen werden, wenn die Requisiten nicht geändert wurden, also in dieser Methode das aktuelle Requisiten werden Es ist notwendig, die nächsten Requisiten zu vergleichen.
6.shouldComponentUpdate(nextState,nextProps) Wenn neue Requisiten oder Status akzeptiert werden, wird

shouldComponentUpdate vor dem Rendern aufgerufen. Diese Methode gibt standardmäßig

true zurück Bei Verwendung von forceUpdate wird diese Methode nicht aufgerufen. Wenn shouldComponentUpdate

false zurückgibt, werden nachfolgende

componentWillUpdate, render und componentDidMount nicht aufgerufen und die Komponente und ihre Unterkomponenten werden nicht erneut gerendert. 7.componentWillUpdate(nextProps, nextState) Beim Empfang neuer Requisiten oder Zuständen wird diese Methode unmittelbar vor dem erneuten Rendern aufgerufen. Sie können

this.setState() in dieser Methode nicht aufrufen.

8.componentDidUpdate( prevProps, prevState) Diese Methode wird sofort nach Abschluss des Updates aufgerufen. Diese Methode wird beim ersten Rendering nicht aufgerufen. Wenn die Komponente aktualisiert wird, können Sie das DOM hier bearbeiten. Wenn Sie feststellen, dass sich die aktuellen Requisiten von den vorherigen

Requisiten unterscheiden, ist es eine gute Idee, hier eine Netzwerkanfrage zu senden

9.componentWillUnmount()Diese Methode wird unmittelbar vor der Zerstörung der Komponente aufgerufen und ist teilweise erforderlich Die Bereinigung kann mit dieser Methode erfolgen

Das obige ist der detaillierte Inhalt vonWas sind die Lebenszyklusfunktionen von React-Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!