Es sieht so aus, componentWillReceiveProps
als würde es in den kommenden Releases zugunsten einer neuen Lebenszyklusmethode vollständig auslaufen getDerivedStateFromProps
: statisch getDerivedStateFromProps () .
Nach der Inspektion sieht es so aus, als ob Sie jetzt keinen direkten Vergleich zwischen this.props
und durchführen können nextProps
, wie Sie es können componentWillReceiveProps
. Gibt es einen Weg daran vorbei?
Außerdem wird jetzt ein Objekt zurückgegeben. Kann ich zu Recht davon ausgehen, dass der Rückgabewert im Wesentlichen ist this.setState
?
Unten ist ein Beispiel, das ich online gefunden habe: Status abgeleitet von Requisiten / Status .
Vor
class ExampleComponent extends React.Component {
state = {
derivedData: computeDerivedState(this.props)
};
componentWillReceiveProps(nextProps) {
if (this.props.someValue !== nextProps.someValue) {
this.setState({
derivedData: computeDerivedState(nextProps)
});
}
}
}
Nach dem
class ExampleComponent extends React.Component {
// Initialize state in constructor,
// Or with a property initializer.
state = {};
static getDerivedStateFromProps(nextProps, prevState) {
if (prevState.someMirroredValue !== nextProps.someValue) {
return {
derivedData: computeDerivedState(nextProps),
someMirroredValue: nextProps.someValue
};
}
// Return null to indicate no change to state.
return null;
}
}
quelle
componentWillReceiveProps
getDerivedStateFromProps
es nie wirklich zum Auswendiglernen gedacht war . Bitte lesen Sie meine Antwort unten, in der ich stattdessen den empfohlenen Ansatz beschrieben habe ....
? Das heißt, sollten wir das gesamte Zustandsobjekt oder nur den Teil zurückgeben, der uns wichtig ist.Wie wir vor kurzem auf dem Blog Reagieren geschrieben , in der überwiegenden Mehrzahl der Fälle die Sie nicht brauchen
getDerivedStateFromProps
überhaupt .Wenn Sie nur einige abgeleitete Daten berechnen möchten, gehen Sie wie folgt vor:
render
memoize-one
.Hier ist das einfachste "Nach" -Beispiel:
In diesem Abschnitt des Blogposts erfahren Sie mehr.
quelle
componentWillReceiveProps
war einfach und es hat funktioniert. Warum es für diesen statischen Müll entfernen ...Wie von Dan Abramov erwähnt
Wir verwenden diesen Ansatz tatsächlich mit Memoise One für jede Art von Proxy-Requisiten für Zustandsberechnungen.
Unser Code sieht so aus
Die Vorteile davon sind, dass Sie nicht Tonnen von Vergleichs-Boilerplates im Inneren codieren müssen
getDerivedStateFromProps
oder diecomponentWillReceiveProps
Initialisierung durch Kopieren und Einfügen in einem Konstruktor überspringen können.HINWEIS:
Dieser Ansatz wird nur verwendet, um die Requisiten auf den Status zu übertragen. Wenn Sie über eine innere Statuslogik verfügen, muss diese weiterhin in den Komponentenlebenszyklen behandelt werden.
quelle