Was ist neu in der React JavaScript UI-Bibliothek?

Version 16.8 der React JavaScript UI-Bibliothek ist jetzt in der Produktionsversion verfügbar und verfügt über die Hooks-Funktion, mit der Status- und andere React-Funktionen verwendet werden können, ohne dass eine Klasse geschrieben werden muss.

Wo kann ich React herunterladen?

Sie können die Produktversion von React von GitHub herunterladen.

Aktuelle Version: Neue Funktionen in React 16.8

React 168 wurde im Februar 2019 veröffentlicht und bietet eine Implementierung von Hooks für das DOM, den DOM-Server, den Testrenderer und den flachen Renderer von React. Hooks werden in React DevTools unterstützt. Entwickler können ihre eigenen Hooks erstellen, um wiederverwendbare Stateful-Logik zwischen Komponenten zu teilen. Facebook rät Entwicklern jedoch, sich Zeit für diese Funktion zu nehmen, und empfiehlt Entwicklern nicht, Anwendungen neu zu schreiben, um Hooks „über Nacht“ zu verwenden.

Es gibt keine Pläne, Klassen aus React zu entfernen, daher sollten Entwickler versuchen, einige neue Komponenten einzubinden. Code mit beliebigen Hooks funktioniert neben vorhandenem Code mit Klassen.

Vorherige Version: Neue Funktionen in React 16.7

React 16.7 wurde im Dezember 2018 veröffentlicht und bietet die Hooks-Funktion zum Verwenden von Status- und anderen React-Funktionen, ohne eine Klasse zu schreiben.

Hooks sind Funktionen, die mit Funktionsstatus- und Lebenszyklusfunktionen von Funktionskomponenten verknüpft sind. Sie arbeiten derzeit Seite an Seite mit dem vorhandenen Code und ermöglichen eine schrittweise Übernahme. Es gibt keine Pläne, Klassen tatsächlich aus React zu entfernen. Haken lösen eine Vielzahl von Problemen in React, einschließlich:

  • Das Fehlen einer Möglichkeit, einer Komponente wiederverwendbares Verhalten zuzuordnen. Es gab Muster wie Render-Requisiten und Komponenten höherer Ordnung, die versuchen, dieses Problem zu lösen. Diese erfordern jedoch eine Umstrukturierung der Komponenten, was umständlich sein und das Befolgen von Code erschweren kann. Mithilfe von Hooks können Entwickler Stateful Logic aus einer Komponente extrahieren, um sie unabhängig zu testen und wiederzuverwenden.
  • Komplexe Komponenten sind zu schwer zu verstehen. Mit Hooks können Komponenten basierend auf verwandten Elementen in kleinere Funktionen aufgeteilt werden, z. B. das Einrichten eines Abonnements oder das Abrufen von Daten. Dies geschieht, anstatt eine Aufteilung basierend auf Lebenszyklusmethoden zu erzwingen.
  • Klassen können sowohl Menschen als auch Maschinen verwirren und werden als das größte Hindernis für das Lernen von React angesehen. Mit Hooks können Entwickler mehr Funktionen von React ohne Klassen nutzen. Haken umfassen Funktionen, ohne jedoch den Geist der Reaktion zu opfern. Der Zugang zu zwingenden Notluken ist gewährleistet. Entwickler müssen keine komplexen funktionalen oder reaktiven Programmiertechniken erlernen.

Vorherige Version: Neue Funktionen in React 16.6

React 16.6 wurde im Oktober 2018 veröffentlicht und bietet mehrere Verbesserungen.

  • Mit memokönnen Entwickler das Rendern mit Funktionskomponenten beenden, ähnlich wie Klassenkomponenten das Rendern beenden können, wenn die Eingabestützen mit PureComponentsoder identisch sind shouldComponentUpdate.
  • Mit lazykönnen Entwickler die SuspenseKomponente zum Aufteilen von Code verwenden, indem sie einen dynamischen Import in call to umschließen React.lazy(). Hinweis: Die Funktion ist für das serverseitige Rendern noch nicht verfügbar.
  • Die Convenience-API wurde eingeführt, um einen Kontextwert innerhalb einer Klassenkomponente zu verwenden. Entwickler hatten sich darüber beschwert, dass die Übernahme der neuen Render-Prop-API aus React 16.3 in Klassenkomponenten schwierig sein könnte.
  • Eine Fehlermethode getDerivedStatefromError()rendert die Fallback-Benutzeroberfläche, bevor das Rendern abgeschlossen ist. Hinweis: Es ist noch nicht für das serverseitige Rendern verfügbar, aber Entwickler können damit beginnen, sich darauf vorzubereiten.
  • Zwei StrictmodeAPIs sind veraltet: findDOMNode()und Legacy-Kontext mit contextType und getChildContext. Entwickler werden aufgefordert, ein Upgrade auf die neue contextTypeAPI durchzuführen.

Vorherige Version: Neue Funktionen in React 16.4

Die Ende Mai 2018 veröffentlichte Version 16.4 von React bietet Unterstützung für Zeigerereignisse, eine häufig angeforderte Funktion sowie eine Verbesserung für eine bevorstehende asynchrone Renderfunktion. Zu den Browsern, die Zeigerereignisse unterstützen, gehören Versionen von Google Chrome, Mozilla Firefox, Microsoft Edge und Microsoft Internet Explorer.

Zeigerereignisse sind DOM-Ereignisse, die für ein Zeigegerät ausgelöst werden und ein einzelnes Ereignismodell für Geräte wie Maus oder Berührung bereitstellen.

Mit der Unterstützung für Zeigerereignisse fügt React Unterstützung für Ereignistypen hinzu, die Folgendes umfassen:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Weitere neue Funktionen in React 16.4 sind:

  • Verbesserte Kompatibilität mit einem geplanten asynchronen Rendering-Modus. Zu diesem Zweck enthält die Version eine Fehlerbehebung für getDerivedStatefromProps, die jetzt jedes Mal aufgerufen wird, wenn eine Komponente benötigt wird, unabhängig davon, warum das Update durchgeführt wird. Es wurde nur aufgerufen, wenn eine Komponente von einem übergeordneten Element erneut gerendert wurde und aufgrund eines lokalen Elements nicht ausgelöst wurde setState. Das Update wirkt sich nicht auf die meisten Apps aus, kann jedoch in seltenen Fällen Probleme mit einer kleinen Anzahl von Komponenten verursachen.
  • Zur unstable_ProfilerMessung der Leistung wurde eine experimentelle Profilerkomponente hinzugefügt, die als Leistungsmessung bezeichnet wird.
  • Ein experimenteller Abgleicher zum Erstellen benutzerdefinierter Renderer verfügt über eine neue Hostkonfigurationsform, die flach ist und keine verschachtelten Objekte verwendet.
  • Zu den Korrekturen am React DOM gehören die Reparatur eines Fehlers, der in einigen Fällen die Kontextausbreitung verhinderte, sowie eine Situation, in der einige Attribute fälschlicherweise von benutzerdefinierten Elementknoten entfernt wurden.

Die experimentelle Rückgabefunktion für Anrufe wurde in React Version 16.4 gelöscht, da sie die Bundle-Größe beeinflusste und die API nicht gut genug war. Erwarten Sie es irgendwann in einer anderen Form, sagt Facebook.

Vorherige Version: Neue Funktionen in React 16.3

Die Version 16.3 von React vom März 2018 enthält Änderungen des Lebenszyklus sowie eine API für den Kontext.

Änderungen des Lebenszyklus in Reaktion 16.3

Für den Komponentenlebenszyklus erweitert der bevorstehende asynchrone Rendermodus das Klassenkomponenten-API-Modell, das auf eine Weise verwendet wird, die ursprünglich nicht beabsichtigt war. Daher werden neue Lebenszyklen hinzugefügt, einschließlich getDerivedStateFromPropsals sicherere Alternative zum alten Lebenszyklus componentWillReceiveProps. Außerdem wird hinzugefügt getSnapshotBeforeUpdate, um das sichere Lesen von Eigenschaften wie dem DOM zu unterstützen, bevor Aktualisierungen vorgenommen werden.

In Reaktion 16.3 wird einigen dieser Lebenszyklen, z. B. componentWillMountund, das Präfix "unsicher" hinzugefügt componentWillReceiveUpdate. In diesen Fällen bezieht sich „unsicher“ nicht auf die Sicherheit, sondern auf die Tatsache, dass Code, der diese Lebenszyklen verwendet, in zukünftigen Versionen von React mit größerer Wahrscheinlichkeit Fehler aufweist.

Mit der Version React 16.3 müssen Entwickler nichts gegen ältere Methoden unternehmen. Die Version soll Open Source-Projektbetreuer auffordern, ihre Bibliotheken vor Verfallswarnungen zu aktualisieren, die erst in einer zukünftigen Version in der 16.x-Zeile aktiviert werden.

Version 16.3 fügt die StrictModeKomponente hinzu, die Komponenten mit unsicheren Lebenszyklen identifiziert. StrictMode, das nur im Entwicklungsmodus ausgeführt wird, warnt auch vor der Verwendung älterer String-Ref-APIs und erkennt unerwartete Nebenwirkungen. Es aktiviert zusätzliche Überprüfungen für Nachkommen. Weitere Funktionen werden später hinzugefügt.

Die Kontext-API unterstützt die statische Typprüfung und umfassende Aktualisierungen

Die neue Kontext-API unterstützt die statische Typprüfung und umfassende Aktualisierungen. Diese API ist auch effizienter als die vorherige experimentelle API-Version, sagte Brian Vaughn, Mitglied des React JS-Kernteams bei Facebook. Mit Context können Daten durch einen Komponentenbaum geleitet werden, ohne dass Requisiten manuell übergeben werden müssen. Einige davon enthalten Gebietsschemaeinstellungen und UI-Themen. Die alte API funktioniert weiterhin für React 16.x-Versionen, sodass Benutzer Zeit für die Migration haben.

Ebenfalls neu in React 16.3:

  • Eine verbesserte API createrefAPIzum Verwalten von Refs, mit der auf DOM-Knoten oder React-Elemente zugegriffen werden kann , die mit der Rendermethode entwickelt wurden.
  • Die forwardRefAPI hilft bei der Verwendung von Komponenten höherer Ordnung, die die Wiederverwendung von Code fördern.

Vorherige Version: Neue Funktionen in React 16.2

Die Version von React 16.2 vom November 2017 bietet die Möglichkeit, die Unterstützung für das Anzeigen mehrerer untergeordneter Elemente mithilfe einer Komponenten-Rendering-Methode zu verbessern. Mit Fragmenten, die leeren JSX-Tags ähneln, können Entwickler eine Liste von untergeordneten Elementen gruppieren, ohne dem DOM Knoten hinzuzufügen.

Sie können Version 16.2 aus der NPM-Registrierung installieren. Führen Sie die Installation mit dem Yarn-Paketmanager aus yarn add [email protected]^16.2.0 [email protected]^16.2.0. Führen Sie es aus, um es mit NPM zu installieren npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

Vorherige Version: Neue Funktionen in React 16.0

React 16.0, das während seiner Entwicklung als „React Fibre“ bezeichnet wurde, ist eine Neufassung des React-Kerns und verbessert die wahrgenommene Reaktionsfähigkeit für komplexe Anwendungen über einen neuen Abstimmungsalgorithmus. Zu den Hauptmerkmalen von React 16 gehören:

  • Fehler, die einen Komponentenstapel-Trace enthalten, um das Debuggen zu vereinfachen.
  • Rückgabe von Strings / Arrays direkt aus Komponenten-Rendermethoden.
  • Ein neuer schnellerer serverseitiger Streaming-Renderer.
  • Mehr native Anwendungsleistung.
  • Die Umstellung von der umstrittenen BSD + Patents-Lizenz auf die schmackhaftere MIT-Lizenz.

Obwohl die Interna von React in React 16 vollständig neu geschrieben wurden, ist die öffentliche API "im Wesentlichen unverändert", sagte Sophie Alpert, technische Leiterin von Facebook für React. Die Absicht war es, Entwicklern das Umschreiben vorhandener Komponenten zu ersparen, die mit React erstellt wurden.

Der neue Code von React 16 wurde gemäß einer bei Facebook bekannten Praxis neben dem alten Code im GitHub-Repo geschrieben. Das Umschalten zwischen den beiden wurde mit dem Booleschen useFiberFeature-Flag durchgeführt. Durch diesen Prozess konnte Facebook mit dem Aufbau seiner neuen Implementierung beginnen, ohne die vorhandenen Benutzer zu beeinträchtigen, und weiterhin Fehlerbehebungen an der alten Codebasis vornehmen.

Nach einigen Monaten des Ausbügelns von Fehlern entschied sich Facebook dafür, ein einziges Produkt zu liefern, um die möglichen Fehler zu reduzieren, anstatt zwei Versionen von React auf dem neuesten Stand zu halten.