Reagieren Sie auf die Konstruktionsreihenfolge verschachtelter Komponenten

Auf der offiziellen React-Website finden Sie die Beschreibung des Lebenszyklus

Eine Frage hierbei ist: Wird bei verschachtelten Komponenten zuerst die übergeordnete Komponente oder zuerst die untergeordnete Komponente erstellt? Soll zuerst die untergeordnete Komponente oder die übergeordnete Komponente aktualisiert werden?

Um dieses Problem zu lösen, können Sie mit der Verschachtelung einzelner Elemente beginnen. Unten sehen Sie eine übergeordnete Komponente mit nur DOM-Elementen.

Funktion Übergeordnet(){
  zurückkehren (
    <div>Kind</div>
  )
}

Für das obige Element ruft React React.createElement auf, um ein Objekt zu erstellen. Dies ist die Konstruktionsphase des untergeordneten Elements (hier wird babeljs.io verwendet).

React.createElement("div", null, "Kind")

Nach dem Bau ist es Zeit zum Rendern und Aktualisieren

Als nächstes schauen wir uns verschachtelte Komponenten an.

Funktion Kind() {
  return <div>Kind</div>
}
Funktion Übergeordnet(){
  zurückkehren (
   <Child>Elternteil-Kind</Child>
  )
}

React ruft React.createElement auf und übergibt die folgenden Parameter

Funktion Kind() {
  returniere React.createElement("div", null, "Kind");
}

Funktion Übergeordnet() {
  return React.createElement(Child, null, "übergeordnetes Element, untergeordnetes Element");
}

Hier sehen wir den Konstruktionsprozess der übergeordneten und untergeordneten Komponente. Zuerst wird die aktuelle Komponente erstellt, dann wird sie in die Komponente eingefügt und weiter aufgebaut. Das Prinzip ist von oben nach unten.

Als nächstes schauen wir uns die Übergabe mehrerer Komponenten an

Funktion Kind() {
  return <div>untergeordnete Komponente</div>
}
Funktion Übergeordnet(){
  zurückkehren (
    <div>
     <div>div-Element</div>
     <Kind />
    </div>
  )
}

Die folgenden Parameter werden an React.createElement übergeben

React.createElement("div", null, React.createElement("div", null, "div\u5143\u7D20"), React.createElement(Kind, null))
React.createElement("div", null, "child\u7EC4\u4EF6")

Es kann weiter klargestellt werden, dass die Konstruktion der Unterkomponente getrennt von der übergeordneten Komponente erfolgt und nach der Konstruktion der übergeordneten Komponente erstellt wird. Die Reihenfolge der Konstruktion von übergeordneten und untergeordneten Komponenten ist also übergeordneter Komponentenkonstruktor, Rendern untergeordneter Komponentenkonstruktor, Rendern

Beim Rendern der untergeordneten Komponente wird componentDidMount aufgerufen.

Build-Zusammenfassung

Bei mehreren Komponenten wird zuerst der Konstruktor des übergeordneten Elements initialisiert und mit der Bereitstellung begonnen, dann wird Render aufgerufen

Bei DOM-Elementen werden sie sofort erstellt. Bei React-Komponenten werden sie später in die Komponente eingefügt und der vorherige Konstruktor, die Konstruktion und das Rendering werden bis zum letzten untergeordneten Element wiederholt.

Wenn die letzte untergeordnete Komponente gerendert wird, wird componentDidMount aufgerufen. Das heißt, das Element wurde montiert. Dann geht es Schicht für Schicht nach oben und ruft componentDidMount nacheinander auf.

Etwas abseits vom Thema

Der folgende Code kann zum Verständnis des obigen Inhalts beitragen

// Die Funktion von RenderChild besteht darin, untergeordnete Elemente zu rendern, wenn ein Wert empfangen wird, und andere Elemente zu rendern, wenn kein Wert vorhanden ist. function RenderChild(props){
  zurückkehren (
    Eigenschaften.a ? Eigenschaften.Kinder : <div>aaaa</div>
  )
}

Schreibmethode 1 (direktes Rendern von DOM-Elementen):
Funktion Übergeordnet(){
  sei a = undefiniert;
  setzeTimeout(() => {
    a = { b: 1 };
  });
  zurückkehren (
    <RenderChild val={a}>
      <div>{ab}</div>
    </RenderChild>
  )
}

Schreibmethode 2 (Rendering-Komponente):
Funktion Child(Requisiten) {
  return <div>{props.ab}</div>
}

Funktion Übergeordnet(){
  const a = undefiniert;
  setzeTimeout(() => {
    a = { b: 1 };
  });
  zurückkehren (
    <RenderChild val={a}>
      <Child childVal={a} />
    </RenderChild>
  )
}

Bei den beiden oben genannten Schreibweisen wird die erste definitiv einen Fehler melden

Denn der erste Build-Parameter ist

React.createElement(RenderChild, { val: a }, React.createElement("div", null, ab))
Zu diesem Zeitpunkt ist a noch undefiniert

Der zweite Build-Parameter ist

Funktion RenderChild(Requisiten) {
  gibt props.val zurück? props.children: React.createElement("div", null, "aaaa");
}

Funktion Child(Requisiten) {
  gibt React.createElement("div", null, props.value.b) zurück;
}
React.createElement(RenderChild, { Wert: a }, React.createElement(Child, {
    Wert: a
 }));

Da Child nach RenderChild erstellt wird, wird kein Fehler gemeldet, selbst wenn in Child ein nicht vorhandener Wert verwendet wird.

Abschließende Zusammenfassung

1. Die Konstruktion und Montage von React-Komponenten erfolgt vom Stammelement zum untergeordneten Element, sodass der Datenfluss von oben nach unten erfolgt. Die Montage ist abgeschlossen und der Status wird vom untergeordneten Element zum Stammelement aktualisiert. Zu diesem Zeitpunkt kann der neueste Status an das Stammelement übergeben werden.

2. Ein Unterschied zwischen Komponenten und DOM-Elementen besteht darin, dass DOM-Elemente am aktuellen Speicherort erstellt werden, während React-Komponenten in hierarchischer Reihenfolge erstellt und gerendert werden.

Oben finden Sie den detaillierten Inhalt der Konstruktionsreihenfolge verschachtelter React-Komponenten. Weitere Informationen zur Konstruktion verschachtelter React-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!