Das React Native 0.61 Update bringt eine wichtige neue Funktion, die das Entwicklungserlebnis verbessert.
Funktionen von React Native 0.61
In React Native 0.61 fassen wir die aktuellen Highlights „Live-Neuladen“ (Neuladen beim Speichern) und „Hot-Neuladen“ in einer einzigen neuen Funktion namens „Fast Refresh“ zusammen. Fast Refresh besteht aus den folgenden Prinzipien:
- Schnelle Aktualisierung Unterstützt das aktuelle React vollständig, einschließlich Funktionskomponenten und Hooks.
- Fast Refresh erholt sich nach Tippfehlern und anderen Fehltritten und greift bei Bedarf auf einen vollständigen Neuladevorgang zurück.
- Fast Refresh führt keine invasiven Codeänderungen durch und ist daher zuverlässig genug, um standardmäßig aktiviert zu sein.
Schnelle Aktualisierung
React Native gibt es schon seit einiger Zeit Live-Reloading und Hot-Reloading. Beim Live-Neuladen wird die gesamte Anwendung neu geladen, wenn eine Codeänderung erkannt wird. Dadurch würde Ihre aktuelle Position innerhalb der Anwendung verloren gehen, es würde jedoch garantiert, dass sich der Code nicht in einem fehlerhaften Zustand befindet. Hot Reloading würde versuchen, lediglich die von Ihnen gemachten Fortschritte zu „korrigieren“. Dies ist möglich, ohne die gesamte Anwendung neu laden zu müssen, sodass Sie Ihre Fortschritte viel schneller sehen können.
Das Hot-Reloading klang großartig, war jedoch ziemlich fehlerhaft und funktionierte nicht mit aktuellen React-Funktionen wie Funktionskomponenten mit Hooks.
Die React Native-Gruppe hat diese beiden Funktionen überarbeitet und in der neuen Fast Reload-Funktion zusammengefasst. Es ist standardmäßig aktiviert und führt, sofern möglich, das aus, was mit einem Hot-Reload vergleichbar ist, und greift auf einen vollständigen Reload zurück, wenn dies definitiv nicht der Fall ist.
Upgrade auf React Native 0.61
Ebenso wird bei allen React Native-Upgrades empfohlen, einen Blick auf die Unterschiede der kürzlich erstellten Projekte zu werfen und diese Änderungen auf Ihr eigenes Projekt anzuwenden.
Aktualisieren Sie die Abhängigkeitsversionen
Der erste Schritt besteht darin, die Bedingungen in Ihrer package.json zu aktualisieren und einzuführen. Denken Sie daran, dass jede React Native-Version einer bestimmten Version von React zugeordnet ist. Stellen Sie daher sicher, dass Sie auch diese aktualisieren. Sie sollten außerdem sicherstellen, dass der React-Test-Renderer mit der React-Version übereinstimmt. Wenn Sie es verwenden und dies aktualisieren, aktualisieren Sie die Versionen metro-react-native-babel-preset und Babel.
Flow-Upgrade
Zunächst ein einfaches. Die von React Native verwendete Flow-Version wurde in 0.61 aktualisiert. Dies bedeutet, dass Sie sicherstellen müssen, dass die Flow-Container-Abhängigkeit, die Sie haben, auf ^0.105.0 festgelegt ist und dass Sie einen ähnlichen Wert in der [Version] Ihrer .flowconfig-Datei haben.
Wenn Sie Flow zur Typprüfung in Ihrem Projekt verwenden, kann dies zu zusätzlichen Fehlern in Ihrem eigenen Code führen. Der beste Vorschlag ist, dass Sie das Änderungsprotokoll für die Versionen im Bereich von 0.98 und 0.105 untersuchen, um herauszufinden, was sie verursachen könnte.
Wenn Sie Typescript zur Typprüfung Ihres Codes verwenden, können Sie die .flowconfig-Datei und die Flow-Bin-Abhängigkeit wirklich eliminieren und diesen Teil des Unterschieds ignorieren.
Wenn Sie keinen Typprüfer verwenden, wird empfohlen, die Verwendung eines solchen in Betracht zu ziehen. Beide Optionen funktionieren, es wird jedoch empfohlen, Typescript zu verwenden.