Detaillierte Beschreibung des Lebenszyklus von React-Komponenten

1. Was ist der Lebenszyklus

Der Lebenszyklus einer Komponente ist der Arbeitsprozess von React, genau wie Menschen geboren werden, alt werden, krank werden und sterben und es Veränderungen in der Natur gibt. Jede Komponente auf einer Webseite wird erstellt, aktualisiert und gelöscht, genau wie ein lebender Organismus.

Der Lebenszyklus einer React-Komponente kann in drei Prozesse unterteilt werden

• Montagevorgang: Dies ist der Vorgang, bei dem die Komponente zum ersten Mal im DOM-Baum gerendert wird.
• Aktualisierungsprozess: Der Prozess, bei dem eine Komponente neu gerendert wird.
• Unmounting-Prozess: Der Prozess zum Entfernen einer Komponente aus dem DOM.

2. Ladevorgang

Rufen Sie die folgenden Funktionen nacheinander auf: constructor、getInitialState、getDefaultProps、componentWillMount、render、componentDidMount。

1.Konstruktor

Es ist der Konstruktor in ES6, der eine Instanz einer Komponentenklasse erstellt. Dabei sind zwei Schritte erforderlich: Initialisierung des Status und Bindung der this-Umgebung der Memberfunktion.

2. Render

Rendern ist die wichtigste Funktion in React-Komponenten. Dies ist die einzige nicht ignorierbare Funktion in React. In der Renderfunktion kann es nur ein übergeordnetes Element geben. Die Renderfunktion ist eine reine Funktion. Sie führt eigentlich keine Renderaktionen aus. Sie ist nur eine von JSX beschriebene Struktur. Letztendlich führt React den Rendervorgang aus. Die Renderfunktion sollte keine Operationen enthalten. Die Beschreibung der Seite hängt vollständig von den Rückgabeergebnissen von this.state und this.props ab. Sie können this.setState nicht in render aufrufen.

• Es gibt eine Formel, die es sehr anschaulich zusammenfasst: UI=render(data)

3. componentWillMount und componentDidMount

Diese beiden Funktionen werden jeweils vor und nach dem Rendern ausgeführt. Da dieser Prozess normalerweise nur auf der Browserseite aufgerufen werden kann, erhalten wir hier asynchrone Daten, und wenn componentDidMount aufgerufen wird, wurde die Komponente in den DOM-Baum geladen.

3. Update-Vorgang

Einfach ausgedrückt handelt es sich dabei um den Prozess der Änderung von Eigenschaften und Status, bei dem componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。

1. KomponenteWillReceiveProps(nextProps)

Es wird nicht nur aufgerufen, wenn sich die Requisiten ändern. Tatsächlich wird die im Render gerenderte untergeordnete Komponente aktualisiert, solange die Renderfunktion der übergeordneten Komponente aufgerufen wird. Unabhängig davon, ob sich die von der übergeordneten Komponente an die untergeordnete Komponente übergebenen Requisiten geändert haben, wird der Prozess componentWillReceiveProps der untergeordneten Komponente ausgelöst. Der Auslöseprozess der Methode this.setState ruft diese Funktion jedoch nicht auf, da diese Funktion dazu geeignet ist, zu berechnen, ob der interne Status basierend auf dem Wert der neuen Requisiten aktualisiert werden soll.

2. sollteComponentUpdate(nextProps, nextState)

Die Wichtigkeit dieser Funktion ist nur der von Rendern unterlegen. Die Renderfunktion bestimmt, was gerendert werden soll, während shouldComponentUpdate bestimmt, was nicht gerendert werden muss. Beide müssen Funktionen zurückgeben. Dieser Prozess kann die Leistung verbessern und unnötige erneute Renderingprozesse vermeiden.

3. componentWillUpdate und componentDidUpdate

Im Gegensatz zum Ladevorgang kann componentDidUpdate hier sowohl browserseitig als auch serverseitig ausgeführt werden.

4. Rendern auslösen

In React gibt es 4 Pfade, die das Rendern auslösen.

Im Folgenden wird davon ausgegangen, dass shouldComponentUpdate standardmäßig „true“ zurückgibt:

(1) Erstes Rendering

(2) Rufen Sie this.setState auf (nicht jeder Aufruf von setState löst ein Rendering aus. React kann die Vorgänge zusammenführen und sie alle auf einmal rendern).

(3) Die übergeordnete Komponente wird aktualisiert (normalerweise ändern sich die Eigenschaften, aber auch wenn sich die Eigenschaften nicht ändern oder kein Datenaustausch zwischen der übergeordneten und der untergeordneten Komponente stattfindet, wird das Rendern ausgelöst).

(4) Rufen Sie this.forceUpdate auf.

Hinweis: Wenn Sie in shouldComponentUpdate „false“ zurückgeben, können Sie den Aktualisierungspfad vorzeitig verlassen.

4. Deinstallationsprozess

In der Praxis wird es selten verwendet. Hier gibt es nur ein componentWillUnmount. Im Allgemeinen müssen in componentDidMount registrierte Ereignisse hier gelöscht werden.

5. Lebenszyklusprozess

1. Initialisieren Sie das Rendering und die Anzeige zum ersten Mal: ​​ReactDOM.render()

• constructor(): Erstellt ein Objekt und initialisiert den Status
• componentWillMount() : einzufügender Callback
• render() : wird verwendet, um einen virtuellen DOM-Rückruf einzufügen
• componentDidMount() : Rückruf wurde eingefügt

2. Aktualisieren Sie den Status jedes Mal: ​​this.setState()

• componentWillUpdate() : zu aktualisierender Callback
• render() : aktualisieren (erneut rendern)
• componentDidUpdate() : Rückruf aktualisiert

3. Komponenten entfernen: ReactDOM.unmountComponentAtNode(containerDom)

• componentWillUnmount(): Die Komponente wird entfernt.

6. Beispiele

 <div id='Container'></div>
    <Skripttyp="text/babel">
        Klasse LifeCycle erweitert React.Component {
            Konstruktor(Requisiten) {
                super(Requisiten);
                alert("Erstes Rendern");
                Alarm("Konstruktor");
                dieser.Zustand = {str: "hallo"};
            }
             KomponenteWillMount() {
                Warnung("KomponenteWillMount");
            }
            componentDidMount() {
                Warnung("KomponenteDidMount");
            }
            KomponenteWillReceiveProps(nextProps) {
                Warnung("KomponenteWillReceiveProps");
            }
            sollteKomponentenUpdate() {
                Warnung("sollteKomponentenaktualisierung");
                return true; // Denken Sie daran, true zurückzugeben
            }
             KomponenteWillUpdate() {
                Warnung("Komponente wird aktualisiert");
            }
            KomponenteDidUpdate() {
                Warnung("KomponenteDidUpdate");
            }
            componentWillUnmount() {
                Warnung("Komponente wird nicht eingehängt");
            }
            setzeDenZustand() {
                lass s = "hallo";
                wenn (dieser.Zustand.str === s) {
                    s = "HALLO";
                }
                dies.setState({
                    str: s
                });
            }
            erzwingeUpdate() {
                dies.forceUpdate();
            }
            rendern() {
                Alarm("rendern");
                zurückkehren(
                    <div>
                        <span>{"Eigenschaften:"}<h2>{parseInt(this.props.num)}</h2></span>
                        <br />
                        <span>{"Bundesstaat:"}<h2>{this.state.str}</h2></span>
                    </div>
                );
            }
        }
        Klasse Container erweitert React.Component {
            Konstruktor(Requisiten) {
                super(Requisiten);
                dieser.Zustand = {
                    Zahl: Math.random() * 100
                };
            }
            Eigenschaften ändern () {
                dies.setState({
                    Zahl: Math.random() * 100
                });
            }
            setLifeCycleState() {
                this.refs.rLifeCycle.setTheState();
            }
            forceLifeCycleUpdate() {
                this.refs.rLifeCycle.forceItUpdate();
            }
            unmountLifeCycle() {
                // Das Aushängen der übergeordneten Komponente führt hier auch zum Aushängen der untergeordneten Komponente ReactDOM.unmountComponentAtNode(document.getElementById("container"));
            }
            übergeordnetesForceUpdate() {
                dies.forceUpdate();
            }
            rendern() {
                zurückkehren (
                    <div>
                        <a href="javascript:;" beiKlick={this.propsChange.bind(this)}>Eigenschaftenänderung</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" beiKlick={this.setLifeCycleState.bind(this)}>Zustand festlegen</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.forceLifeCycleUpdate.bind(this)}>ForceUpdate</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" onClick={this.unmountLifeCycle.bind(this)}>Aushängen</a>
                        &nbsp;&nbsp;&nbsp;
                        <a href="javascript:;" beiKlick={this.parentForceUpdate.bind(this)}>parentForceUpdateOhneÄnderung</a>
                        <Lebenszyklus ref="rLifeCycle" num={this.state.num}></Lebenszyklus>
                    </div>
                );
            }
        }
        ReactDOM.render(
            <Container></Container>,
            document.getElementById('Container')
        );
    </Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!