Ersetzen von ‚componentWillReceiveProps‘ durch ‚getDerivedStateFromProps‘

Amanshu Kataria

Follow

May 14, 2018 – 2 min read

Mit der Veröffentlichung von React 16.3 wurden einige neue Lifecycle-Methoden eingeführt, und mit der Veröffentlichung von React 17 werden einige Lifecycle-Methoden veraltet sein.

getDerivedStateFromProps ist eine dieser neu eingeführten Lifecycle-Methoden und ersetzt componentWillReceiveProps, die nun zu UNSAFE_componentWillReceiveProps geworden ist.

getDerivedStateFromProps ist eine statische Methode, die aufgerufen wird, nachdem eine Komponente instanziiert wurde und wenn sie neue Props erhält. Da es sich um eine statische Methode handelt, können Sie innerhalb dieser Methode nicht auf this zugreifen und auch auf keine andere Klassenmethode. Im Gegensatz zu componentWillReceiveProps können Sie in dieser Methode keinen Status setzen, so dass die einzige Möglichkeit, den Status zu aktualisieren, die Rückgabe eines Objekts ist. Wenn du keinen Zustand aktualisieren willst, gib einfach null zurück.

Lassen Sie uns in den Code eintauchen

So funktioniert componentWillReceiveProps.

Wir vergleichen nextProps.someValue mit this.props.someValue und wenn beide unterschiedlich sind, dann führen wir eine Operation durch, setState und rufen this.classMethod(); auf.

Nun schauen wir uns an, wie getDerivedStateFromProps funktioniert.

Es erhält zwei Parameter nextProps und prevState. Wie bereits erwähnt, kann man innerhalb dieser Methode nicht auf this zugreifen, also muss man die Parameter im Status speichern, um nextProps mit den vorherigen Parametern zu vergleichen. Im obigen Code werden nextProps und prevState verglichen. Wenn beide unterschiedlich sind, wird ein Objekt zurückgegeben, um den Status zu aktualisieren, andernfalls wird null zurückgegeben, was anzeigt, dass keine Statusaktualisierung erforderlich ist. Wenn sich der Zustand ändert, wird componentDidUpdate aufgerufen, wo wir die gewünschten Operationen wie in componentWillReceiveProps.

durchführen können.