Eine kurze Diskussion über die Lebenszyklusfunktionen von React Component

Was sind die Lebenszyklusfunktionen von React-Komponenten? Lebenszyklusfunktionen sind nur für Klassenkomponenten verfügbar, einschließlich ES6-Syntaxklassen und Create-React-Class-Module:

Es ist in mehrere Phasen unterteilt: Mounten, Aktualisieren, Deinstallieren und Fehlerbehandlung .

1. Mounten: Konstruktor (häufig verwendet), statisches getDerivedStateFromProps, Rendern (häufig verwendet), componentDidMount (häufig verwendet)

Der Konstruktor ist der Konstruktor der Klassenkomponente. Sie können hier den Status der Komponente initialisieren oder Methoden binden, z. B.: Konstruktor (Props) {super (Props); this.state = {test: 'test'};this.someFn = this.someFn.bind (this);}, andernfalls müssen Sie die Konstruktormethode nicht explizit implementieren.

static getDerivedStateFromProps: Wird vor dem Rendern aufgerufen. Kann den Status ändern, indem ein Wert wie der folgende zurückgegeben wird:

statisch getDerivedStateFromProps(nextProps, prevState){
 
    wenn(Eigenschaften.test !== Zustand.test){
        return {state: props.state}; //Der zurückgegebene Teil heißt partialState
//Dies wird Teil des neuen Status sein, nextState wird _assign({}, prevState, partialState) sein;
    }
 
    gibt null zurück; 
//Wenn null oder „undefined“ zurückgegeben wird, ist nextState prevState und der Status der Komponente wird nicht geändert.

Sein einziger Zweck besteht darin, die Komponente ihren Status aktualisieren zu lassen, wenn sich die Eigenschaften ändern und der Wert des Status von den Eigenschaften abhängt. Unabhängig vom Grund oder ob shouldComponentUpdate in der Komponente „false“ zurückgibt, wird es vor dem Rendern ausgeführt.

Der Lebenszyklus ähnlich dem statischen getDerivedStateFromProps ist componentWillReceiveProps(nextProps), in dem this.setState({...}); aufgerufen wird, um den Status zu ändern. Seien Sie vorsichtig, wenn Sie statisches getDerivedStateFromProps und componentWillReceiveProps verwenden, berücksichtigen Sie die Leistung und vermeiden Sie Fehler. Erwägen Sie bei Bedarf React.PureComponent oder React.memo oder vollständig steuerbare Komponenten oder verwenden Sie wichtige nicht steuerbare Komponenten, um die oben genannten getDerivedStateFromProps und componentWillReceiveProps zu ersetzen.

Es gibt auch UNSAFE_componentWillReceiveProps, das ausgelöst wird, wenn die übergeordnete Komponente erneut gerendert wird;

Render ist eine Rendering-Funktion, die ein React-Element zurückgibt. Es ist eine Methode, die Klassenkomponenten implementieren müssen. Es ist eine reine Funktion, die nur ein React-Element zurückgibt und nicht direkt mit der Schnittstelle interagiert. Interaktionen werden im Allgemeinen in Zyklen wie ComponentDidMount oder ComponentDidUpdate platziert. Der Rückgabewerttyp der Render-Methode kann sein:

//Kann ein React-Element wie „<div/>“ oder „<MyComponent/>“ sein 
//Oder Elemente, die mit React.createElement(type, ?props, ?children) erstellt wurden,
//Es kann ein Array sein (das Array hat eine ähnliche Form wie this.props.children ['Test', ['nest test'], ...others])
//oder Fragmente,
//Kann ein String oder ein numerischer Typ sein (wird als String behandelt),
//Kann vom Typ Boolean oder null sein (wenn es Boolean oder null ist, wird nichts gerendert);
Klasse Test erweitert React.Component {
    machen(){
        // gibt „Hallo Test“ zurück;
        //gibt true zurück;
        //return ['Hallo', ' Test'];
        //zurückgeben <div>Test</div>
        //return <MeineKomponente>Test</MeineKomponente>
        gibt null zurück;
    }
}

componentDidMount wird aufgerufen, nachdem die Komponente im React-Komponentenbaum bereitgestellt wurde. Hier können Sie asynchrone Daten abrufen oder sich auf die Initialisierung von DOM-Knoten verlassen. Außerdem ist es zu diesem Zeitpunkt geeignet, Abonnements hinzuzufügen (denken Sie daran, das Abonnement zu kündigen, wenn componentWillUnmount ausgeführt wird). Wenn Sie hier setState aufrufen, wird zusätzliches Rendering ausgelöst. Dies geschieht jedoch, bevor der Browser den Bildschirm aktualisiert. Selbst wenn Rendering also zweimal aufgerufen wird, kann der Benutzer den Zwischenzustand nicht sehen.

2. Update: static getDerivedStateFromProps, shouldComponentUpdate, render (häufig verwendet), getSnapshotBeforeUpdate, componentDidUpdate (häufig verwendet)

shouldComponentUpdate: Verfügbar für Komponenten, die ReactComponent erben, aber nicht für Komponenten, die React.PureComponent erben; Gibt true zurück, um die Komponente zu aktualisieren, andernfalls wird, wenn shouldComponentUpdate false zurückgibt, die Rendermethode nicht aufgerufen und componentDidUpdate wird nicht aufgerufen; shouldComponentUpdate(nextProps, nextState){} kann this.props manuell mit nextProps und this.state mit nextState vergleichen; wenn es jedoch false zurückgibt, wird dies nicht verhindern, dass die untergeordnete Komponente erneut gerendert wird, wenn der Status aktualisiert wird. Selbst wenn die untergeordnete Komponente aktualisiert wird, erhält sie die neuen Props nicht, da die übergeordnete Komponente nicht aktualisiert wurde;

getSnapshotBeforeUpdate: Wird vor der letzten Rendering-Ausgabe aufgerufen (an den DOM-Knoten übermittelt). Es kann die aktuellen DOM-Informationen (z. B. die aktuelle DOM-Bildlaufposition) erfassen, bevor das Element an das DOM übermittelt wird, und dann zurückkehren, um an die Zyklusmethode componentDidUpdate übergeben zu werden (diese Methode wird aufgerufen, nachdem das Element an das DOM übermittelt wurde, sodass die zu diesem Zeitpunkt erhaltenen DOM-Informationen aktualisiert werden).

componentDidUpdate : componentDidUpdate(prevProps, prevState, snapshot){}; wird aufgerufen, nachdem die Komponente aktualisiert wurde. Hier können Sie den DOM bedienen, die Eigenschaften vorher und nachher vergleichen oder Daten asynchron unter Verwendung des Status usw. anfordern. Der dritte Parameter ist der Rückgabewert des Lebenszyklus der Komponente getSnapshotBeforeUpdate. Wenn getSnapshotBeforeUpdate nicht definiert ist, ist der dritte Parameter von componentDidUpdate undefiniert.

3. Aushängen: componentWillUnmount (häufig verwendet)

componentWillUnmount: Diese Zyklusmethode wird aufgerufen, bevor die Komponente deinstalliert und zerstört wird. Sie können den Timer löschen, die Netzwerkanforderung abbrechen, das Abonnement kündigen usw., um Speicher freizugeben.

4, statisch getDerivedStateFromError, KomponenteDidCatch;

statisches getDerivedStateFromError:

KomponenteDidCatch:

Referenzdokumentation

React-Komponente

Dies ist das Ende dieses Artikels über die Lebenszyklusfunktion von React Component. Weitere relevante Inhalte zum Lebenszyklus von React Component finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!