Dan Abramov hat die neue Version von Facebooks React js 17 vorgestellt. Es gibt einige interessante Änderungen und neue Features zu entdecken.
React js 17 mit Fokus auf async rendering
Mit einem starken Fokus auf asynchrones Rendering versucht React 17 eine Umgebung zu schaffen, die es Entwicklern ermöglicht auf einfache Weise effiziente Anwendungen zu erstellen, indem es die Auswirkungen von Rechen- und Netzwerkgeschwindigkeiten auf das Benutzererlebnis minimiert.
Um dies zu erreichen, wird es unweigerlich eine Verschiebung in der Art und Weise der Schreibweise der React-Anwendungen geben. Die Einführung einiger neuer Funktionen und die Entfernung (deprecation) einiger früherer machen diesen Umstand unumgänglich.
Neue Lifecycle-Methoden in React js 17
Es gibt zwei neue Lifecycle-Methoden:
getDerivedStateFromProps und getSnapShotBeforeUpdate
Diese solltet ihr beachten, wenn ihr euch darauf vorbereitet eure Anwendung auf React 17 umzustellen. Unsichere Methoden solltet ihr durch diese neuen Lifecycle-Methode ersetzen.
Beispielsweise kann componentWillUpdate durch die Verwendung von getDerivedStateFromProps in Verbindung mit shouldComponentUpdate ersetzt werden. Auf componentWillMount sollte für das asynchrone Rendern ganz verzichtet werden.
Die getDerivedStateFromProps Methode
Diese Lifecycle-Methode ersetzt componentWillReceiveProps und componentWillUpdate und wird aufgerufen, nachdem eine Komponente erstellt wurde und wenn sie neue Properties erhalten hat. Sie gibt ein Objekt zurück, dessen Zustand aktualisiert werden soll. Wenn die Komponente nicht neu gerendert werden soll kann diese auch NULL zurück geben.
state = { myProps: null };
static getDerivedStateFromProps(nextProps, prevState) {
return {
myProps: nextProps.myNewProps,
..
};
}Diese Methode sollte jedoch nur dazu verwendet werden, wenn der Innere Zustand sich ändert. Ansonsten kann es zu Fehlfunktionen (bugs) führen.
Die getSnapshotBeforeUpdate Methode
Diese Methode behandelt Komponentenaktualisierungen und wird componentWillUpdate effektiv ersetzen und arbeitet mit componentDidUpdate. Sie wird vor jeder DOM-Aktualisierung aufgerufen und gibt einen Wert zurück, der an componentDidUpdateDidUpdate übergeben wird, sodass dann die Änderungen gehandhabt werden:
getSnapshotBeforeUpdate (prevProps, prevState) {
if (this.state.liste > prevState.liste) {
const listenRef = this.listenRef.current
return listenRef.scrollHeight - listenRef.scrollTop
}
return null
}Die Präsentation der Neuen Features auf Youtube
Sobald die neue Version von React js veröffentlicht wird, werden wir die neuen Funktionen auch in unsere Übungsunterlagen aufnehmen. Diese Funktionen werden dann Teil der Schulungen, um euch ebenso auf dem neusten Stand zu halten.
