React

Aus besserwiki.de
Reagieren ⓘ
React-icon.svg
Ursprüngliche(r) Autor(en)Jordan Walke
Entwickler(n)Meta und Gemeinschaft
Erste Veröffentlichung29. Mai 2013; vor 9 Jahren
Geschrieben in.JavaScript
PlattformWeb-Plattform
TypJavaScript-Bibliothek
LizenzMIT-Lizenz

React (auch bekannt als React.js oder ReactJS) ist eine freie und quelloffene JavaScript-Bibliothek für die Erstellung von Benutzeroberflächen auf Basis von UI-Komponenten. Sie wird von Meta (ehemals Facebook) und einer Gemeinschaft von einzelnen Entwicklern und Unternehmen gepflegt. React kann als Basis für die Entwicklung von Single-Page-, Mobile- oder Server-Rendering-Anwendungen mit Frameworks wie Next.js verwendet werden. React befasst sich jedoch nur mit der Zustandsverwaltung und dem Rendern dieses Zustands im DOM, so dass die Erstellung von React-Anwendungen in der Regel die Verwendung zusätzlicher Bibliotheken für das Routing sowie bestimmte clientseitige Funktionen erfordert. ⓘ

Grundlegende Verwendung

Im Folgenden finden Sie ein rudimentäres Beispiel für die Verwendung von React im Web, das in JSX und JavaScript geschrieben wurde. ⓘ 

importiere React von 'react';
importiere ReactDOM von 'react-dom/client'; <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

const Greeting = () => {
    return (
        <div className="hello-world">
            <h1>Hallo, Welt!</h1>
        </div>
    );
}; <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

const App = () => {
    return <gruß />;
}; <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

const root = ReactDOM.createRoot(document.getElementById('root')); <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

root.render(
    <react.strictmode>
        <app />
    </react.strictmode>
);

ⓘ

basierend auf dem folgenden HTML-Dokument. ⓘ 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>
</head>
<body>
  <noscript>Sie müssen JavaScript aktivieren, um diese Anwendung auszuführen.</noscript>
  <div id="root"></div>
</body>
</html> <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

Die Greeting-Funktion ist eine React-Komponente, die die berühmte Begrüßung "Hello, world" anzeigt. ⓘ

Wenn sie in einem Webbrowser angezeigt wird, ist das Ergebnis ein Rendering von: 

<div class="hello-world">
  <h1>Hallo, Welt!</h1>
</div> <span title="Aus: Englische Wikipedia, Abschnitt &quot;Basic usage&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Basic_usage <span style="color:#dddddd">ⓘ</span>]</span>

Bemerkenswerte Merkmale

Deklarativ

React hält sich an das Paradigma der deklarativen Programmierung. Entwickler entwerfen Ansichten für jeden Zustand einer Anwendung, und React aktualisiert und rendert Komponenten, wenn sich Daten ändern. Dies steht im Gegensatz zur imperativen Programmierung. ⓘ

Komponenten

Der Code von React besteht aus Einheiten, die Komponenten genannt werden. Diese Komponenten sind wiederverwendbar und müssen im SRC-Ordner nach der Pascal-Case-Namenskonvention (Großschreibung camelCase) gebildet werden. Komponenten können mit Hilfe der React DOM-Bibliothek auf ein bestimmtes Element im DOM gerendert werden. Wenn eine Komponente gerendert wird, können die Werte zwischen den Komponenten über "props" übergeben werden: 

import React from "react";
import Tool von "./Tool";
const Example = () => {
  return (
    <>
      <div className="app">
        <tool name="Gulshan" />
      </div>
    </>
  );
};
  
export default Beispiel; <span title="Aus: Englische Wikipedia, Abschnitt &quot;Components&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Components <span style="color:#dddddd">ⓘ</span>]</span>

Im obigen Beispiel wurde die Eigenschaft name mit dem Wert "Gulshan" von der Komponente Example an die Komponente Tool übergeben. ⓘ

Auch der Rückgabeabschnitt ist in ein Tag eingeschlossen, da die Rückgabefunktion nur einen einzigen Wert zurückgeben kann. Daher werden alle JSX-Elemente und -Komponenten in ein einziges Tag eingebunden. ⓘ

Die beiden primären Möglichkeiten, Komponenten in React zu deklarieren, sind Funktionskomponenten und klassenbasierte Komponenten.

ⓘ

Funktionskomponenten

Funktionskomponenten werden mit einer Funktion deklariert, die dann etwas JSX zurückgibt. ⓘ 

const Greeter = () => <div>Hallo World</div>; <span title="Aus: Englische Wikipedia, Abschnitt &quot;Functional components&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#Functional_components <span style="color:#dddddd">ⓘ</span>]</span>

Klassenbasierte Komponenten

Klassenbasierte Komponenten werden mit ES6-Klassen deklariert. 

class ParentComponent extends React.Component {
  state = { color: 'green' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}
Während sich bei Klassenkomponenten alles um die Verwendung von Klassen und die Lifecycle-Methoden dreht, verfügen funktionale Komponenten über Hooks für die Zustandsverwaltung und andere Probleme, die beim Schreiben von Code in React auftreten. ⓘ

Virtuelles DOM

Ein weiteres bemerkenswertes Merkmal ist die Verwendung eines virtuellen Dokumentenobjektmodells, oder virtuelles DOM. React erstellt einen speicherinternen Datenstruktur-Cache, berechnet die daraus resultierenden Unterschiede und aktualisiert dann effizient das im Browser angezeigte DOM. Dieser Prozess wird als Reconciliation bezeichnet. So kann der Programmierer seinen Code so schreiben, als ob die gesamte Seite bei jeder Änderung gerendert würde, während die React-Bibliotheken nur die Teilkomponenten rendern, die sich tatsächlich ändern. Dieses selektive Rendering sorgt für einen erheblichen Leistungsschub. Es erspart den Aufwand, den CSS-Stil, das Layout der Seite und das Rendering für die gesamte Seite neu zu berechnen. ⓘ

Lebenszyklus-Methoden

Lifecycle-Methoden für klassenbasierte Komponenten verwenden eine Form von Hooking, die die Ausführung von Code zu bestimmten Zeitpunkten während der Lebensdauer einer Komponente ermöglicht. ⓘ

  • shouldComponentUpdate ermöglicht es dem Entwickler, das unnötige erneute Rendern einer Komponente zu verhindern, indem es false zurückgibt, wenn ein Rendering nicht erforderlich ist.
  • componentDidMount wird aufgerufen, sobald die Komponente "gemountet" wurde (die Komponente wurde in der Benutzeroberfläche erstellt, oft durch Verknüpfung mit einem DOM-Knoten). Dies wird üblicherweise verwendet, um das Laden von Daten aus einer entfernten Quelle über eine API auszulösen.
  • componentWillUnmount wird aufgerufen, unmittelbar bevor die Komponente abgebaut oder "unmounted" wird. Dies wird üblicherweise verwendet, um ressourcenintensive Abhängigkeiten zur Komponente zu löschen, die nicht einfach mit dem Abbau der Komponente entfernt werden (z.B. das Entfernen von setInterval()-Instanzen, die mit der Komponente in Verbindung stehen, oder ein "eventListener", der aufgrund des Vorhandenseins der Komponente auf das "Dokument" gesetzt wurde).
  • render ist die wichtigste Lebenszyklusmethode und die einzige, die in jeder Komponente erforderlich ist. Sie wird normalerweise jedes Mal aufgerufen, wenn der Zustand der Komponente aktualisiert wird, was sich in der Benutzeroberfläche widerspiegeln sollte. ⓘ

JSX

JSX, oder JavaScript Syntax Extension, ist eine Erweiterung der JavaScript-Syntax. Ähnlich wie HTML bietet JSX eine Möglichkeit, das Rendering von Komponenten mit einer Syntax zu strukturieren, die vielen Entwicklern vertraut ist. React-Komponenten werden in der Regel in JSX geschrieben, obwohl sie das nicht müssen (Komponenten können auch in reinem JavaScript geschrieben werden). JSX ähnelt einer anderen Erweiterungssyntax, die von Facebook für PHP entwickelt wurde, nämlich XHP. ⓘ

Ein Beispiel für JSX-Code: 

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Kopfzeile</p>
        <p>Inhalt</p>
        <p>Fußzeile</p>
      </div>
    );
  }
} <span title="Aus: Englische Wikipedia, Abschnitt &quot;JSX&quot;" class="plainlinks">[https://en.wikipedia.org/wiki/React_(JavaScript_library)#JSX <span style="color:#dddddd">ⓘ</span>]</span>

Architektur über HTML hinaus

Die grundlegende Architektur von React gilt nicht nur für das Rendern von HTML im Browser. Facebook verfügt beispielsweise über dynamische Diagramme, die in <canvas>-Tags gerendert werden, und Netflix und PayPal verwenden Universal Loading, um identisches HTML sowohl auf dem Server als auch auf dem Client zu rendern. ⓘ

React-Hooks

Hooks sind Funktionen, die es Entwicklern ermöglichen, sich von Funktionskomponenten aus in den React-Zustand und die Lebenszyklusfunktionen einzuklinken. Hooks funktionieren nicht innerhalb von Klassen - sie ermöglichen die Verwendung von React ohne Klassen. ⓘ

React bietet ein paar eingebaute Hooks wie useState, useContext, useReducer , useMemo und useEffect. Andere sind in der Hooks-API-Referenz dokumentiert. useState und useEffect, die am häufigsten verwendet werden, dienen der Kontrolle des Zustands bzw. der Seiteneffekte. ⓘ

Regeln für Hooks

Es gibt Regeln für Hooks, die das charakteristische Codemuster beschreiben, auf das sich Hooks stützen. Es ist die moderne Art, den Zustand mit React zu handhaben. ⓘ

  1. Hooks sollten nur auf der obersten Ebene aufgerufen werden (nicht innerhalb von Schleifen oder if-Anweisungen).
  2. Hooks sollten nur von React-Funktionskomponenten und benutzerdefinierten Hooks aufgerufen werden, nicht von normalen Funktionen oder Klassenkomponenten. ⓘ

Obwohl diese Regeln zur Laufzeit nicht erzwungen werden können, können Code-Analyse-Tools wie Linters so konfiguriert werden, dass sie viele Fehler während der Entwicklung erkennen. Die Regeln gelten sowohl für die Verwendung von Hooks als auch für die Implementierung von benutzerdefinierten Hooks, die andere Hooks aufrufen können. ⓘ

Gemeinsame Idiome

React versucht nicht, eine vollständige "Anwendungsbibliothek" bereitzustellen. Es ist speziell für die Erstellung von Benutzeroberflächen konzipiert und enthält daher nicht viele der Werkzeuge, die manche Entwickler für die Erstellung einer Anwendung für notwendig erachten. Dies erlaubt die Wahl der Bibliotheken, die der Entwickler bevorzugt, um Aufgaben wie Netzwerkzugriff oder lokale Datenspeicherung zu erledigen. Mit zunehmender Reife der Bibliothek haben sich gemeinsame Nutzungsmuster herausgebildet. ⓘ

Unidirektionaler Datenfluss

Um Reacts Konzept des unidirektionalen Datenflusses zu unterstützen (im Gegensatz zum bidirektionalen Datenfluss von AngularJS), wurde die Flux-Architektur als Alternative zur beliebten Model-View-Controller-Architektur entwickelt. Flux bietet Aktionen, die über einen zentralen Dispatcher an einen Speicher gesendet werden, und Änderungen am Speicher werden an die Ansicht zurückgegeben. Bei der Verwendung mit React wird diese Weitergabe durch Komponenteneigenschaften erreicht. Seit seiner Entwicklung wurde Flux von Bibliotheken wie Redux und MobX abgelöst. ⓘ

Flux kann als eine Variante des Beobachtermusters betrachtet werden. ⓘ

Eine React-Komponente unter der Flux-Architektur sollte keine Props, die ihr übergeben werden, direkt ändern, sondern Callback-Funktionen übergeben bekommen, die Aktionen erzeugen, die vom Dispatcher gesendet werden, um den Speicher zu ändern. Die Aktion ist ein Objekt, dessen Aufgabe es ist, zu beschreiben, was stattgefunden hat: Eine Aktion, die beschreibt, dass ein Benutzer einem anderen "folgt", könnte beispielsweise eine Benutzer-ID, eine Ziel-Benutzer-ID und den Typ USER_FOLLOWED_ANOTHER_USER enthalten. Die Speicher, die man sich als Modelle vorstellen kann, können sich als Reaktion auf die vom Dispatcher empfangenen Aktionen ändern. ⓘ

Dieses Muster wird manchmal als "Eigenschaften fließen abwärts, Aktionen fließen aufwärts" ausgedrückt. Seit den Anfängen von Flux sind viele Implementierungen entstanden, die bekannteste ist vielleicht Redux, das einen einzigen Speicher aufweist, der oft als einzige Quelle der Wahrheit bezeichnet wird. ⓘ

Zukünftige Entwicklung

Der Projektstatus kann über das Diskussionsforum des Kernteams verfolgt werden. Größere Änderungen an React werden jedoch über das Future of React Repository issues und pull requests vorgenommen. Dies ermöglicht es der React-Community, Feedback zu neuen potenziellen Funktionen, experimentellen APIs und Verbesserungen der JavaScript-Syntax zu geben. ⓘ

Geschichte

React wurde von Jordan Walke, einem Software-Ingenieur bei Facebook, entwickelt, der einen frühen Prototyp von React namens "FaxJS" veröffentlichte. Er wurde von XHP, einer HTML-Komponentenbibliothek für PHP, beeinflusst. Es wurde erstmals 2011 im News Feed von Facebook und später 2012 auf Instagram eingesetzt. Auf der JSConf US im Mai 2013 wurde sie als Open Source veröffentlicht. ⓘ

React Native, das die native Android-, iOS- und UWP-Entwicklung mit React ermöglicht, wurde im Februar 2015 auf der React Conf von Facebook angekündigt und im März 2015 als Open Source veröffentlicht. ⓘ

Am 18. April 2017 kündigte Facebook React Fiber an, einen neuen Satz interner Algorithmen für das Rendering, im Gegensatz zu Reacts altem Rendering-Algorithmus, Stack. React Fiber sollte die Grundlage für alle zukünftigen Verbesserungen und Funktionsentwicklungen der React-Bibliothek werden. Die eigentliche Syntax für die Programmierung mit React hat sich nicht geändert; nur die Art und Weise, wie die Syntax ausgeführt wird, hat sich geändert. Das alte Rendering-System von React, Stack, wurde zu einer Zeit entwickelt, als der Fokus des Systems auf dynamische Veränderungen noch nicht verstanden wurde. Stack war langsam, wenn es zum Beispiel darum ging, komplexe Animationen zu zeichnen, und versuchte, alles in einem Stück zu erledigen. Fiber zerlegt Animationen in Segmente, die über mehrere Frames verteilt werden können. Ebenso kann die Struktur einer Seite in Segmente unterteilt werden, die separat gepflegt und aktualisiert werden können. JavaScript-Funktionen und virtuelle DOM-Objekte werden als "Fasern" bezeichnet und können jeweils separat bedient und aktualisiert werden, was eine flüssigere Darstellung auf dem Bildschirm ermöglicht. ⓘ

Am 26. September 2017 wurde React 16.0 für die Öffentlichkeit freigegeben. ⓘ

Am 16. Februar 2019 wurde React 16.8 für die Öffentlichkeit freigegeben. Mit dieser Version wurde React Hooks eingeführt. ⓘ

Am 10. August 2020 kündigte das React-Team den ersten Release Candidate für React v17.0 an, der als erstes Major Release ohne größere Änderungen an der React-Entwickler-API auffällt. ⓘ

Versionen ⓘ
Version Datum der Veröffentlichung Änderungen
0.3.0 29. Mai 2013 Erste öffentliche Freigabe
0.4.0 20. Juli 2013 Unterstützung für Kommentar-Knoten
{/* */}
Verbesserte serverseitige Rendering-APIs, React.autoBind wurde entfernt, Unterstützung für die Key-Prop, Verbesserungen an Formularen, Behebung von Fehlern.
0.5.0 20. Oktober 2013 Verbesserte Speichernutzung, Unterstützung für Selection und Composition Events, Unterstützung für getInitialState und getDefaultProps in Mixins, React.version und React.isValidClass hinzugefügt, Verbesserte Kompatibilität für Windows.
0.8.0 20. Dezember 2013 Unterstützung für rows & cols, defer & async, Schleife für <audio> & <video>, autoCorrect Attribute hinzugefügt. onContextMenu-Ereignisse hinzugefügt, jstransform und esprima-fb-Tools aktualisiert, browserify aktualisiert.
0.9.0 20. Februar 2014 Unterstützung für crossOrigin-, download- und hrefLang-, mediaGroup- und muted-, sandbox-, seamless- und srcDoc-, scope-Attribute hinzugefügt, any-, arrayOf-, component-, oneOfType-, renderable-, shape- zu React.PropTypes hinzugefügt, Unterstützung für onMouseOver- und onMouseOut-Event hinzugefügt, Unterstützung für onLoad- und onError- auf <img> Elementen.
0.10.0 21. März 2014 Unterstützung für srcSet- und textAnchor-Attribute hinzugefügt, Update-Funktion für unveränderliche Daten hinzugefügt, sichergestellt, dass alle void-Elemente kein schließendes Tag einfügen.
0.11.0 17. Juli 2014 Verbesserte SVG-Unterstützung, e.view-Ereignis normalisiert, $apply-Befehl aktualisiert, Unterstützung für Namespaces hinzugefügt, neue transformWithDetails-API hinzugefügt, enthält vorgefertigte Pakete unter dist/, MyComponent() gibt jetzt einen Deskriptor zurück, keine Instanz.
0.12.0 21. November 2014 Neue Funktionen hinzugefügt Spread-Operator ({...}) eingeführt, um this.transferPropsTo zu verwerfen, Unterstützung für acceptCharset, classID, manifest HTML-Attribute hinzugefügt, React.addons.batchedUpdates zur API hinzugefügt, @jsx React.DOM nicht mehr erforderlich, Probleme mit CSS Transitions behoben.
0.13.0 10. März 2015 Veraltete Patterns, die in 0.12 gewarnt haben, funktionieren nicht mehr, ref resolution order hat sich geändert, Eigenschaften this._pendingState und this._rootNodeID entfernt, Unterstützung von ES6-Klassen, API React.findDOMNode(component) hinzugefügt, Unterstützung für Iteratoren und immutable-js-Sequenzen, neue Funktionen React.addons.createFragment hinzugefügt, veraltetes React.addons.classSet.
0.14.1 29. Oktober 2015 Unterstützung für srcLang, default, kind-Attribute und color-Attribut hinzugefügt, Legacy .props-Zugriff auf DOM-Knoten sichergestellt, scryRenderedDOMComponentsWithClass behoben, react-dom.js hinzugefügt.
15.0.0 7. April 2016 Initiales Rendering verwendet nun document.createElement anstatt HTML zu generieren, Keine zusätzlichen s mehr, Verbesserte SVG-Unterstützung, ReactPerf.getLastMeasurements() ist undurchsichtig, Neue Verwerfungen mit einer Warnung eingeführt, Mehrere kleine Speicherlecks behoben, React DOM unterstützt jetzt die HTML-Attribute cite und profile sowie die CSS-Eigenschaften cssFloat, gridRow und gridColumn.
15.1.0 20. Mai 2016 Behebung eines Batching-Fehlers, Sicherstellung der Verwendung des neuesten Objekt-Assigns, Behebung einer Regression, Entfernen der Verwendung des Merge-Utilitys, Umbenennung einiger Module.
15.2.0 1. Juli 2016 Einfügen von Komponenten-Stack-Informationen, Beenden der Validierung von Props zur Einhängezeit, Hinzufügen von React.PropTypes.symbol, Hinzufügen von onLoad-Handling zu <link> und onError-Behandlung zum <source> Element, Hinzufügen von isRunning() API, Performance Regression beheben.
15.3.0 30. Juli 2016 Hinzufügen von React.PureComponent, Problem mit verschachteltem Server-Rendering beheben, Hinzufügen von xmlns, xmlnsXlink zur Unterstützung von SVG-Attributen und referrerPolicy zu HTML-Attributen, Aktualisieren von React Perf Add-on, Problem mit ref behoben.
15.3.1 19. August 2016 Verbessert die Leistung von Entwicklungs-Builds, Bereinigt interne Hooks, Aktualisiert fbjs, Verbessert die Startzeit von React, Behebt Speicherleck im Server-Rendering, Behebt React Test Renderer, Ändert trackedTouchCount invariant in eine console.error.
15.4.0 16. November 2016 React-Paket und Browser-Build enthält nicht mehr React DOM, Verbesserte Entwicklungsleistung, Behebt gelegentliche Testfehler, Aktualisiert batchedUpdates API, React Perf, und ReactTestRenderer.create().
15.4.1 23. November 2016 Umstrukturierung der Variablenzuweisung, Korrektur der Ereignisbehandlung, Korrektur der Kompatibilität des Browser-Builds mit AMD-Umgebungen.
15.4.2 6. Januar 2017 Build-Probleme behoben, fehlende Paket-Abhängigkeiten hinzugefügt, Fehlermeldungen verbessert.
15.5.0 7. April 2017 React-dom/test-utils hinzugefügt, peerDependencies entfernt, Problem mit Closure Compiler behoben, Deprecation-Warnung für React.createClass und React.PropTypes hinzugefügt, Chrome-Bug behoben.
15.5.4 11. April 2017 Kompatibilität mit Enzyme behoben, indem batchedUpdates im shallow Renderer offengelegt wurde, Version von prop-types aktualisiert, Paket react-addons-create-fragment um loose-envify transform ergänzt.
15.6.0 13. Juni 2017 Hinzufügen von Unterstützung für CSS-Variablen in style-Attributen und Grid-Style-Eigenschaften, Fix AMD-Unterstützung für Addons, die von react abhängen, Entfernen unnötiger Abhängigkeiten, Hinzufügen einer Verwerfungswarnung für React.createClass und React.DOM factory helpers.
16.0.0 26. September 2017 Verbesserte Fehlerbehandlung mit Einführung von "Fehlergrenzen", React.DOM erlaubt die Übergabe von Nicht-Standard-Attributen, Kleinere Änderungen am setState-Verhalten, Entfernen von react-with-addons.js build, Hinzufügen von React.createClass als create-react-class, React.PropTypes als prop-types, React.DOM als react-dom-factories, Änderungen am Verhalten von scheduling und lifecycle-Methoden.
16.1.0 9. November 2017 Abkündigung von Bower-Releases, Behebung einer versehentlichen zusätzlichen globalen Variable in den UMD-Builds, Behebung des Feuerns von onMouseEnter und onMouseLeave, Behebung des <textarea>-Platzhalters, Entfernen von nicht verwendetem Code, Hinzufügen einer fehlenden package.json-Abhängigkeit, Hinzufügen von Unterstützung für React DevTools.
16.3.0 29. März 2018 Hinzufügen einer neuen offiziell unterstützten Kontext-API, Hinzufügen eines neuen PaketsVerhindern einer Endlosschleife beim Versuch, Portale mit SSR zu rendern, Beheben eines Problems mit this.state, Beheben eines IE/Edge-Problems.
16.3.1 3. April 2018 Prefix private API, Behebung von Leistungsrückgängen und Fehlern bei der Fehlerbehandlung im Entwicklungsmodus, Hinzufügen der Peer-Abhängigkeit, Behebung einer falsch positiven Warnung im IE11 bei Verwendung von Fragment.
16.3.2 16. April 2018 Behebung eines IE-Absturzes, Korrektur von Beschriftungen in User-Timing-Messungen, Hinzufügen eines UMD-Builds, Verbesserung der Leistung von unstable_observedBits API mit Verschachtelung.
16.4.0 24. Mai 2018 Hinzufügen von Unterstützung für die Spezifikation von Pointer Events, Hinzufügen der Möglichkeit, propTypes zu spezifizieren, Beheben des Lesekontexts, Beheben der getDerivedStateFromProps() Unterstützung, Beheben eines testInstance.parent Absturzes, Hinzufügen der React.unstable_Profiler Komponente zur Leistungsmessung, Ändern der internen Ereignisnamen.
16.5.0 5. September 2018 Hinzufügen von Unterstützung für React DevTools Profiler, Fehler in mehr Edge Cases elegant behandeln, Hinzufügen von react-dom/profiling, Hinzufügen von onAuxClick-Ereignissen für Browser, Hinzufügen von movementX- und movementY-Feldern zu Maus-Ereignissen, Hinzufügen von tangentialPressure- und twist-Feldern zu Pointer-Ereignissen.
16.6.0 23. Oktober 2018 Hinzufügen von Unterstützung für contextType, Unterstützung von Prioritätsebenen, Continuations und Wrapped Callbacks, Verbessern des Fallback-Mechanismus, Beheben von grauem Overlay auf iOS Safari, Hinzufügen von React.Lazy() für Code-Splitting-Komponenten.
16.7.0 20. Dezember 2018 Fix performance of React.lazy for lazily-loaded components, Clear fields on unmount to avoid memory leaks, Fix bug with SSR, Fix a performance regression.
16.8.0 6. Februar 2019 Hooks hinzufügen, Hinzufügen ReactTestRenderer.act() und ReactTestUtils.act() für Batching-Updates, Unterstützung von synchronen Thenables, die an React.lazy() übergeben werden, Verbesserung der useReducer Hook lazy initialization API.
16.8.6 27. März 2019 Behebt einen falschen Bailout in useReducer(), Behebt iframe-Warnungen in Safari DevTools, Warnt, wenn contextType auf Context.Consumer statt auf Context gesetzt ist, Warnt, wenn contextType auf ungültige Werte gesetzt ist.
16.9.0 9. August 2019 Hinzufügen von React.Profiler API zum programmatischen Sammeln von Leistungsmessungen. Entfernen von unstable_ConcurrentMode zugunsten von unstable_createRoot
16.10.0 27. September 2019 Fix edge case, bei dem ein Hook-Update nicht memoisiert wurde. Korrektur der Heuristik zur Bestimmung des Zeitpunkts für die Hydrierung, so dass wir während einer Aktualisierung nicht fälschlicherweise hydrieren. Löschen zusätzlicher Faserfelder beim Aushängen, um Speicher zu sparen. Behebung eines Fehlers mit erforderlichen Textfeldern in Firefox. Bevorzugung von Object.is anstelle von Inline Polyfill, wenn verfügbar. Fehler beim Mischen von Suspense und Fehlerbehandlung behoben.
16.10.1 28. September 2019 Behebung einer Regression in Next.js-Apps, bei der eine Suspense-Fehlanpassung während der Hydrierung stillschweigend fortgesetzt wird.
16.10.2 3. Oktober 2019 Behebung einer Regression in react-native-web durch Wiederherstellung der Reihenfolge der Argumente in Event-Plugin-Extraktoren
16.11.0 22. Oktober 2019 Behebt das doppelte Auslösen von Mouseenter-Handlern in verschachtelten React-Containern. Entfernen der experimentellen APIs unstable_createRoot und unstable_createSyncRoot. (Diese sind im Experimental-Kanal als createRoot und createSyncRoot verfügbar).
16.12.0 14. November 2019 React DOM - Fix für passive Effekte (useEffect), die in einer Multi-Root-App nicht ausgelöst werden.

React Is - Fix lazy und memo Typen, die als Elemente statt als Komponenten betrachtet werden.

16.13.0 26. Februar 2020 Funktionen im React Concurrent Modus hinzugefügt.

Behebung von Regressionen in der React Core Library und React Dom.

16.13.1 19. März 2020 Fehler im Legacy-Modus Suspense behoben.

Revert-Warnung für komponentenübergreifende Updates, die innerhalb von Klassen-Render-Lebenszyklen stattfinden

16.14.0 14. Oktober 2020 Hinzufügen von Unterstützung für die neue JSX-Transformation.
17.0.0 20. Oktober 2020 "No New Features" ermöglicht schrittweise React-Updates von älteren Versionen.

Hinzufügen der neuen JSX-Transformation, Änderungen an der Ereignisdelegation

17.0.1 22. Oktober 2020 React DOM - Behebt einen Absturz im IE11
17.0.2 22. März 2021 React DOM - Entfernen einer unbenutzten Abhängigkeit zur Behebung der SharedArrayBuffer Cross-Origin-Isolation-Warnung.
18.0.0 29. März 2022 Concurrent React, automatisches Batching, neue Suspense-Funktionen, Übergänge, Client- und Server-Rendering-APIs, neue Strict-Mode-Verhaltensweisen, neue Hooks
18.1.0 26. April 2022 Viele Fehlerbehebungen und Leistungsverbesserungen
18.1.2 14. Juni 2022 Viele weitere Fehlerbehebungen und Leistungsverbesserungen

Lizenzierung

Die erste öffentliche Veröffentlichung von React im Mai 2013 verwendete die Apache-Lizenz 2.0. Im Oktober 2014 wurde diese mit React 0.12.0 durch die 3-Klausel-BSD-Lizenz ersetzt und eine separate PATENTS-Textdatei hinzugefügt, die die Nutzung aller Facebook-Patente im Zusammenhang mit der Software erlaubt:

Die hierin gewährte Lizenz erlischt automatisch und ohne Ankündigung für jeden, der einen Anspruch erhebt (einschließlich der Einreichung einer Klage, Behauptung oder anderen Aktion), der (a) eine direkte, indirekte oder mitwirkende Verletzung oder Veranlassung zur Verletzung eines Patents behauptet: (i) durch Facebook oder eine seiner Tochtergesellschaften oder verbundenen Unternehmen, unabhängig davon, ob ein solcher Anspruch mit der Software zusammenhängt oder nicht, (ii) durch eine beliebige Partei, wenn sich ein solcher Anspruch ganz oder teilweise aus einer Software, einem Produkt oder einer Dienstleistung von Facebook oder einer seiner Tochtergesellschaften oder verbundenen Unternehmen ergibt, unabhängig davon, ob ein solcher Anspruch mit der Software zusammenhängt oder nicht, oder (iii) durch eine beliebige Partei, die sich auf die Software bezieht; oder (b) dass ein Recht aus einem Patentanspruch von Facebook ungültig oder nicht durchsetzbar ist.

Diese unkonventionelle Klausel sorgte für einige Kontroversen und Debatten in der React-Nutzergemeinschaft, da sie so ausgelegt werden könnte, dass Facebook die Lizenz in vielen Szenarien widerrufen kann, beispielsweise wenn Facebook den Lizenznehmer verklagt und ihn zu "anderen Maßnahmen" veranlasst, indem es die Maßnahme in einem Blog oder anderswo veröffentlicht. Viele äußerten die Befürchtung, dass Facebook die Kündigungsklausel auf unfaire Weise ausnutzen könnte oder dass die Integration von React in ein Produkt die zukünftige Übernahme eines Startup-Unternehmens erschweren könnte. ⓘ

Auf der Grundlage des Feedbacks der Community aktualisierte Facebook die Patenterteilung im April 2015, um sie weniger zweideutig und freizügiger zu gestalten:

Die hier gewährte Lizenz endet automatisch und ohne Vorankündigung, wenn du (oder eine deiner Tochtergesellschaften, verbundenen Unternehmen oder Vertreter) direkt oder indirekt eine Patentklage einleitest oder ein direktes finanzielles Interesse an einer Patentklage hast: (i) gegen Facebook oder eine seiner Tochtergesellschaften oder verbundenen Unternehmen, (ii) gegen eine Partei, wenn eine solche Patentklage ganz oder teilweise aus einer Software, Technologie, einem Produkt oder einer Dienstleistung von Facebook oder einer seiner Tochtergesellschaften oder verbundenen Unternehmen resultiert, oder (iii) gegen eine Partei, die sich auf die Software bezieht. [...] Eine "Patentbehauptung" ist jede Klage oder andere Aktion, die eine direkte, indirekte oder mitwirkende Verletzung oder Veranlassung zur Verletzung eines Patents behauptet, einschließlich einer Gegenklage oder Widerklage. ⓘ

Die Apache Software Foundation erachtete diese Lizenzvereinbarung als unvereinbar mit ihren Lizenzierungsrichtlinien, da sie "das Risiko an die nachgelagerten Verbraucher unserer Software unausgewogen zugunsten des Lizenzgebers und nicht des Lizenznehmers weitergibt und damit gegen unsere Apache-Rechtspolitik verstößt, ein universeller Geber zu sein", und "keine Untermenge derjenigen sind, die in der [Apache License 2.0] zu finden sind, und sie können nicht als [Apache License 2.0] unterlizenziert werden". Im August 2017 wies Facebook die nachgelagerten Bedenken der Apache Foundation zurück und weigerte sich, seine Lizenz zu überdenken. Im darauffolgenden Monat beschloss WordPress, seine Projekte Gutenberg und Calypso von React abzulösen. ⓘ

Am 23. September 2017 kündigte Facebook an, dass es in der darauffolgenden Woche Flow, Jest, React und Immutable.js unter einer Standard-MIT-Lizenz neu lizenzieren würde; das Unternehmen erklärte, dass React "die Grundlage eines breiten Ökosystems von Open-Source-Software für das Web" sei und dass man "den Fortschritt nicht aus nichttechnischen Gründen aufhalten" wolle. ⓘ

Am 26. September 2017 wurde React 16.0.0 mit der MIT-Lizenz veröffentlicht. Die Änderung der MIT-Lizenz wurde mit React 15.6.2 auch auf die 15.x-Release-Linie zurückportiert. ⓘ

Releasefrequenz, Support und Abwärtskompatibilität

React Releases folgen dem Konzept des Semantic Versionings. Es wird zwischen Major-, Minor- und Bugfix-Releases unterschieden. Es wird versucht nicht abwärtskompatible Major Release zu vermeiden und neue Features primär in Minor Releases zu veröffentlichen. Bislang gab es Major Releases alle ein bis drei Jahre. Long Term Support (LTS) gibt es offiziell keinen. Sobald eine Major Release ausgeliefert wird, werden für frühere Releases keine Bugfixes mehr geliefert. Eine Ausnahme dazu dürften kritische Sicherheitsfehler darstellen. In diesem Fall werden Bugfix-Releases für die letzten Minor-Releases ausgeliefert. ⓘ

Kernkonzepte

Virtual DOM und DOM-Diffing

Die Kernidee von React besteht in der Annahme, dass der komplette, der betroffenen Komponente untergeordnete Anwendungsbaum bei jeder Änderung einer Eigenschaft der Komponente neu aufgebaut wird. Da es in der Praxis performanceintensiv sein kann, dies z. B. im Webbrowser innerhalb des DOM durchzuführen, wurde das Konzept des „Virtual DOM“ geschaffen. Die damit verbundene Technik des „DOM-Diffing“ beschreibt das selektive Aktualisieren des DOM auf Basis eines Vergleichs zwischen ursprünglichem und geändertem Virtual DOM. ⓘ

Als Beispiel kann ein Entwickler bei einer Messaging-Anwendung in einer Inbox davon ausgehen, dass die Auflistung aller Nachrichten und der untenstehende Zähler der Nachrichtenanzahl bei jeder neuen Nachricht komplett neu aufgebaut werden. Das DOM-Diffing sorgt in diesem Fall dafür, dass lediglich die veränderten Teile (in diesem Fall die ergänzte neue Nachricht und der aktualisierte Zähler) im DOM aktualisiert werden. ⓘ

Kritik

Anders als bei strikten MVC-Modellen wird in React ein komponentenzentriertes Modell vorgeschlagen, welches Logik für Interaktion und Darstellung innerhalb eines Objekts bündelt. Dies wird insbesondere aufgrund der weitverbreiteten strikten Trennung zwischen Markup und Logik in Form von Templating-Systemen oft kritisch gesehen. ⓘ

Weblinks

Referenzen

Abgerufen von „http://besserwiki.de/index.php?title=React&oldid=37933“