2017-12-06 1 views
1

Ich entwickle eine Web-Seite mit React, und habe einige Fragen über das "Lifting Stat Up" Beispiel (und ich füge den Link für den vollständigen Code von ihm here für eine schnelle Referenz), die mit dem, was ich in meinem eigenen Projekt begegnet inkonsistent ist.Warum ist `componentWillReceiveProps` in Reactions" Lifting State Up "-Beispiel nicht erforderlich?

Meine Frage ist, diesen Teil:

<TemperatureInput 
     scale="c" 
     temperature={celsius} 
     onTemperatureChange={this.handleCelsiusChange} /> 

während Benutzereingabe neuer Werte, wird die celsius neu berechnet werden (durch eine Callback-Funktion in TemperatureInput ausgelöst, die handleCelsiusChange aufruft, und dann render ausgelöst wird), und als eines von props zu TemperatureInput übergeben. Aber innerhalb der Definition von TemperatureInput, warum componentWillReceiveProps ist nicht definiert? Wenn in meiner Praxis die props nur im Konstruktor zugewiesen wird, wird sie nicht automatisch aktualisiert, wenn sich der Wert ändert. Wie das Dokument sagte, wird kein neues Element erstellt, sondern nur das vorhandene aktualisiert. Wenn keine neue Instanz erstellt wird, wird der Konstruktor nicht aufgerufen, sodass this.props ohne eine componentWillReceiveProps-Funktion nicht aktualisiert wird.

All diese oben genannten sind konsistent zu meiner Praxis, aber nicht zu dem Beispiel. Warum componentWillReceiveProps ist im Beispiel nicht erforderlich, um this.props aktualisiert zu machen?

Antwort

2

Die constructor in diesem Fall nichts zu tun mit den speziell props, es ruft einfach den React.Component Konstruktor mit super() was, was es ohnehin tun würde, ist. Wenn Sie zum Beispiel einen Zustand von Requisiten setzen, benötigen Sie eine componentWillReceiveProps, da Sie den Zustand aktualisieren müssen, wenn sich die Requisiten ändern.

Wenn die Komponente neue Requisiten bekommt, wird der Konstruktor nicht wieder aufgerufen, da es bereits eine Instanz ist, sondern aktualisiert, um die Requisiten auf der Komponenteninstanz reagieren, und ruft die render() wieder, so dass die Requisiten in render() werden die aktualisierten sein Requisiten. Wenn Sie eine componentWillReceiveProps definiert haben, wird diese vor dem Aufruf an render() aufgerufen;

+0

Großartig! Deine Erklärung beantwortet genau das, was mich verwirrt hat. Ich habe auf Basis eines solchen Verständnisses einen eigenen Code erstellt und der Code funktioniert wie erwartet. Danke für die schnelle und genaue Antwort. – nanoix9

Verwandte Themen