Als Teil der Implementierung von asynchronem Rendering in React gibt es ein paar Lifecycle-Methoden, die in React 17 veraltet sein werden (siehe React Blog). Eine häufig verwendete Methode ist componentWillReceiveProps. In den meisten Fällen wird sie verwendet, um den
Props-Wechsel einer Komponente zu behandeln.

Was also tun?

Eine Lösung ist die Verwendung der static getDerivedStateFromProps-Methode. Es gibt ein großartiges ‚HowTo‘ dev.to Post von Larry Price.

Eine andere Lösung ist die Verwendung von React Hooks, insbesondere des useEffect() Hooks. Dies könnte eine gute Lösung sein, wenn man eine kleine Komponente hat und innerhalb dieser Änderung zu einer funktionalen Komponente wechseln möchte.

Hier ist ein einfaches Beispiel. Stellen Sie sich vor, wir rendern eine Tabellenkomponente mit einer Liste von Elementen. Alle Elemente müssen zunächst die Methode doSomething() durchlaufen.

Vorheriger Code

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

mit Hooks

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

Wir können den useEffect()Hook verwenden, der standardmäßig bei jedem Rendering läuft. Um unnötige Aufrufe zu vermeiden, verwenden wir als zweiten Parameter. So wird useEffect() nur ausgeführt, wenn sich die Eigenschaft items geändert hat.

Wichtiger Hinweis

Bevor man zu getDerivedStateFromProps() oder useEffect() wechselt, sollte man prüfen, ob man diese Eigenschaftsbehandlung wirklich benötigt. Werfen Sie einen Blick auf diesen offiziellen React Blogpost für häufige Fehler und Anti-Patterns.

Manchmal schreiben wir einige Eigenschaften in den Status, auch wenn wir sie nicht brauchen. Wenn man zum Beispiel eine Liste sortieren muss, die von einer Eigenschaft stammt, sollte man dies während des Renderings tun und es vermeiden, es in den Zustand der Komponente zu schreiben.