React (JavaScript Library)

Für das Open-Source Mobile Application Framework siehe Reagieren nativ.
Reagieren
React-icon.svg
Originalautor (en) Jordan Walke
Entwickler (en) Meta und Gemeinschaft
Erstveröffentlichung 29. Mai 2013; Vor 9 Jahren[1]
Stabile Version
18.2.0[2] Edit this on Wikidata / 14. Juni 2022; Vor 52 Tagen
Repository
Geschrieben in JavaScript
Plattform Webplattform
Typ JavaScript -Bibliothek
Lizenz MIT -Lizenz
Webseite Reactjs.org Edit this on Wikidata

Reagieren (auch bekannt als React.js oder Reactjs) ist ein frei und offen Frontend JavaScript -Bibliothek[3] zum Bauen Benutzeroberflächen Basierend auf UI -Komponenten. Es wird von gepflegt von Meta (ehemals Facebook) und eine Gemeinschaft einzelner Entwickler und Unternehmen.[4][5][6] React kann als Basis bei der Entwicklung von verwendet werden einzelne Seite, mobile oder servergerenderte Anwendungen mit Frameworks wie Weiter.js. React befasst sich jedoch nur mit dem staatlichen Management und dem Rendern dieses Staates an die DomDas Erstellen von React-Anwendungen erfordert daher normalerweise die Verwendung zusätzlicher Bibliotheken für das Routing sowie bestimmte clientseitige Funktionen.[7][8]

Grundnutzung

Das Folgende ist ein rudimentäres Beispiel für die React -Nutzung für das in geschriebene Web in JSX und JavaScript.

importieren Reagieren aus 'reagieren'; importieren Reaktomie aus "React-Dom/Client";  Const Gruß = () => {   Rückkehr (   <div Klassenname="Hallo Welt">   <H1>Hallo, Welt! </h1>   </div>   ); };  Const App = () => {   Rückkehr <Gruß />; };  Const Wurzel = Reaktomie.Createroot(dokumentieren.GetElementById('Wurzel'));  Wurzel.machen(   <Reagieren.Strikter Modus>   <App />   </React.strictMode> );

bezogen auf Html Dokument unten.

 <html Lang="en"> <Kopf>   <Meta Charset="UTF-8" />   <Titel>React AppTitel> Kopf> <Karosserie>   <NoScript>Sie müssen JavaScript ermöglichen, diese App auszuführen.NoScript>   <div Ich würde="Wurzel"> </div> Karosserie> html>

Das Gruß Funktion ist eine React -Komponente, die die berühmte Einführung "Hallo, Welt" anzeigt.

Wenn Sie in einem Webbrowser angezeigt werden, wird das Ergebnis eine Darstellung von:

<div Klasse="Hallo Welt">  <H1>Hallo Welt!H1> div>

Bemerkenswerte Merkmale

Deklarativ

Reagieren haftend an die deklarative Programmierung Paradigma. Entwickler entwerfen Ansichten für jeden Status einer Anwendung und reagieren Aktualisierungen und rendern Komponenten, wenn sich Daten ändern. Dies steht im Gegensatz zu Imperative Programmierung.[9]

Komponenten

React -Code wird aus Entitäten hergestellt, die genannt werden Komponenten. Diese Komponenten sind wiederverwendbar und müssen im SRC -Ordner nach dem Pascal -Fall als Namenskonvention (Kapital des Kamelcases) gebildet werden. Komponenten können einem bestimmten Element in der Dom Verwenden der React DOM -Bibliothek. Wenn Sie eine Komponente rendern, kann man die Werte zwischen Komponenten durch "Requisiten" übergeben:[10] 

importieren Reagieren aus "reagieren"; importieren Werkzeug aus "./Werkzeug"; Const Beispiel = () => {  Rückkehr (  <>  <div Klassenname="App">  <Werkzeug Name="Gulshan" />  </div>  </>  ); };    Export Ursprünglich Beispiel;

Im obigen Beispiel die Name Eigentum mit dem Wert "Gulshan" wurde aus dem weitergegeben Beispiel Komponente zum Werkzeug Komponente.

Auch die Rückkehr Der Abschnitt ist in ein Tag eingewickelt, da die Einschränkung in der vorliegt Rückkehr Funktion, es kann nur einen einzelnen Wert zurückgeben. Alle JSX -Elemente und -Komponenten sind also in ein einzelnes Tag gebunden.

Die beiden Hauptmethoden zur Deklaration von Komponenten in React sind Funktionskomponenten und klassenbasierte Komponenten.

Funktionale Komponenten

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

Const Begrüßer = () => <div>Hallo Welt</div>;

Klassenbasierte Komponenten

Klassenbasierte Komponenten werden mithilfe von deklariert Es6 Klassen.

Klasse ParentComponent erweitert Reagieren.Komponente {  Zustand = { Farbe: 'grün' };  machen() {  Rückkehr (  <Kinderkomponent Farbe={Dies.Zustand.Farbe} />  );  } }
Wenn Klassenkomponenten um die Verwendung von Klassen und die Lebenszyklusmethoden geht, haben funktionelle Komponenten Hooks, um sich mit dem Zustandsmanagement und anderen Problemen zu befassen, die beim Schreiben von Code in React auftreten.

Virtual Dom

Eine weitere bemerkenswerte Funktion ist die Verwendung eines Virtuellen Dokumentobjektmodell, oder virtueller Dom. React erzeugt eine in Erinnerung Datenstruktur-Cache, berechnet die resultierenden Unterschiede und aktualisiert dann die DOM des Browsers effizient.[11] Dieser Prozess wird genannt Versöhnung. Auf diese Weise kann der Programmierer Code schreiben, als ob die gesamte Seite bei jeder Änderung gerendert wird, während die React -Bibliotheken nur Unterkomponenten rendern, die sich tatsächlich ändern. Dieses selektive Rendering bietet einen großen Leistungssteiger.[12] Es spart den Aufwand, den CSS -Stil, das Layout für die Seite neu zu berechnen und für die gesamte Seite zu rendern.[12]

Lebenszyklusmethoden

Lebenszyklusmethoden für klassenbasierte Komponenten verwenden eine Form von Haken Dies ermöglicht die Ausführung von Code an Sollwertpunkten während der Lebensdauer einer Komponente.

  • Sollte Componentupdate Ermöglicht dem Entwickler, unnötige Wiederausfälle einer Komponente zu verhindern, indem ein Falsch zurückgegeben wird, wenn kein Render erforderlich ist.
  • componentDidmount wird aufgerufen, sobald die Komponente "montiert" hat (die Komponente wurde in der Benutzeroberfläche erstellt, häufig durch Zusammenarbeit mit a Dom Knoten). Dies wird üblicherweise verwendet, um das Laden von Daten von einer Remotequelle über eine auszulösen API.
  • Komponentierung wird unmittelbar bevor die Komponente abgerissen oder "unmontiert" ist. Dies wird üblicherweise verwendet, um ressourcenansiedelnde Abhängigkeiten von der Komponente zu löschen, die nicht einfach mit der Unkombination der Komponente entfernt werden (z. B. Entfernen eines jeden setInterval () Instanzen, die mit der Komponente oder einer "zusammenhängen"EventListener"Auf dem" Dokument "einstellen, weil die Komponente vorhanden ist)
  • machen ist die wichtigste Lebenszyklusmethode und die einzige in jeder Komponente erforderlich. Es wird normalerweise jedes Mal aufgerufen, wenn der Status der Komponente aktualisiert wird, was sich in der Benutzeroberfläche widerspiegeln sollte.

JSX

Hauptartikel: JSX

JSXoder JavaScript -Syntaxerweiterung ist eine Erweiterung der JavaScript -Sprachsyntax.[13] Ähnlich wie im Erscheinungsbild von HTML bietet JSX eine Möglichkeit, Komponenten -Rendering mithilfe von Syntax zu strukturieren, die vielen Entwicklern bekannt ist. React -Komponenten werden typischerweise mit JSX geschrieben, obwohl sie nicht sein müssen (Komponenten können auch in reinem JavaScript geschrieben werden). JSX ähnelt einer anderen Erweiterungssyntax für Facebook für Php genannt XHP.

Ein Beispiel für JSX -Code:

Klasse App erweitert Reagieren.Komponente {  machen() {  Rückkehr (  <div>  <p>Headerp>  <p>Inhaltp>  <p>Fusszeilep>  div>  );  } }

Architektur jenseits von HTML

Die grundlegende Architektur von React gilt über das Rendern von HTML im Browser hinaus. Zum Beispiel hat Facebook dynamische Diagramme Stichworte,[14] und Netflix und Paypal Verwenden Sie universelle Laden, um sowohl auf dem Server als auch auf dem Client identische HTML zu rendern.[15][16]

Reagieren Haken

Hooks sind Funktionen, mit denen Entwickler den Reaktionszustand und Lebenszyklus -Merkmalen von Funktionskomponenten "anschließen können.[17] Haken funktionieren nicht in Klassen - sie können reagieren ohne Klassen verwenden.[18]

React bietet ein paar eingebaute Haken wie ussten,[19] Usecontext, Usereducer , Usememo und Verwendungseffekt.[20] Andere sind in der Hooks -API -Referenz dokumentiert.[21] ussten und VerwendungseffektDie am häufigsten verwendeten dienen zur Kontrolle des Zustands bzw. Nebenwirkungen.

Regeln von Haken

Es gibt Regeln von Haken[22] die das charakteristische Codemuster beschreiben, auf das sich Haken verlassen. Es ist die moderne Art, den Zustand mit React zu bewältigen.

  1. Haken sollten nur auf der oberen Ebene aufgerufen werden (nicht in Schleifen oder wenn Anweisungen).
  2. Hooks sollten nur aus React -Funktionskomponenten und benutzerdefinierten Hooks aufgerufen werden, nicht aus normalen Funktionen oder Klassenkomponenten.

Obwohl diese Regeln zur Laufzeit nicht durchgesetzt werden können, können Code -Analyse -Tools wie z. Linter Kann konfiguriert werden, um viele Fehler während der Entwicklung zu erkennen. Die Regeln gelten sowohl für die Verwendung von Hooks als auch für die Implementierung von benutzerdefinierten Hooks.[23] die andere Haken nennen können.

Gemeinsame Redewendungen

React versucht nicht, eine vollständige "Anwendungsbibliothek" bereitzustellen. Es wurde speziell zum Erstellen von Benutzeroberflächen entwickelt[3] und enthalten daher nicht viele der Tools, die einige Entwickler möglicherweise für den Aufbau einer Anwendung für notwendig halten. Dies ermöglicht die Auswahl der Bibliotheken, die der Entwickler bevorzugt, um Aufgaben wie die Durchführung von Netzwerkzugriff oder lokale Datenspeicherung zu erledigen. Häufige Verwendungsmuster haben sich als die Bibliothek entstanden.

Unidirektionaler Datenfluss

Um Reacts Konzept des unidirektionalen Datenflusss zu unterstützen (was möglicherweise im Gegensatz zu werden kann AngularjsDie bidirektionale Fluss), die Flussarchitektur wurde als Alternative zum beliebten entwickelt Model View Controller die Architektur. Flux -Funktionen Aktionen die durch einen Zentral geschickt werden Dispatcher zu einem Ladenund Änderungen am Geschäft werden wieder in die Ansicht propagiert.[24] Bei Verwendung mit React wird diese Ausbreitung durch Komponenteneigenschaften erreicht. Seit seiner Konzeption wurde der Fluss von Bibliotheken wie ersetzt wie Redux und Mobx.[25]

Fluss kann als Variante der Beobachtermuster.[26]

Eine React -Komponente unter der Flussarchitektur sollte keine an sie übergebenen Requisiten ändern, sondern sollten Rückruffunktionen übergeben werden, die erstellen Aktionen die vom Dispatcher gesendet werden, um den Laden zu ändern. Die Aktion ist ein Objekt, dessen Verantwortung es darin besteht User_foled_another_user.[27] Die Läden, die als Modelle angesehen werden können, können sich als Reaktion auf Aktionen des Dispatcher ändern.

Dieses Muster wird manchmal ausgedrückt, wenn "Eigenschaften nach unten fließen, Aktionen nach oben fließen". Seit seiner Gründung wurden viele Implementierungen des Flusses geschaffen, vielleicht das bekannteste Wesen Redux, der ein einzelnes Geschäft enthält, oft als a genannt einzelne Quelle der Wahrheit.[28]

Zukünftige Entwicklung

Der Projektstatus kann über das Core -Team -Diskussionsforum nachverfolgt werden.[29] Wichtige Änderungen an React durchlaufen jedoch die Zukunft von React -Repository -Problemen und Anfragen ziehen.[30][31] Dies ermöglicht es der React -Community, Feedback zu neuen potenziellen Merkmalen, experimentellen APIs und JavaScript -Syntaxverbesserungen zu geben.

Geschichte

React wurde von Jordan Walke, einem Software -Ingenieur bei Facebook, erstellt, der einen frühen Prototyp von React namens "Faxjs" veröffentlichte.[32][33] Er wurde von beeinflusst von XHP, ein Html Komponentenbibliothek für Php. Es wurde zuerst auf Facebooks eingesetzt Neuigkeiten im Jahr 2011 und später Instagram in 2012.[34] Es wurde im Mai 2013 bei JSConf US Open-Soured.[33]

Reagieren nativdas ermöglicht native Android, iOS, und UWP Entwicklung mit React wurde im Februar 2015 auf Facebooks React Conf angekündigt und im März 2015 Open-Sourcing.

Am 18. April 2017 kündigte Facebook React Fiber an, einen neuen Satz interner Algorithmen für das Rendering, im Gegensatz zu Reacts alten Rendering -Algorithmus Stack.[35] React Fiber sollte die Grundlage für zukünftige Verbesserungen und die Entwicklung der React -Bibliothek werden.[36][Benötigt Update] Die tatsächliche Syntax für die Programmierung mit React ändert sich nicht. Nur die Art und Weise, wie die Syntax ausgeführt wird, hat sich geändert.[37] Das alte Rendering -System von React, Stack, wurde zu einer Zeit entwickelt, als der Fokus des Systems auf dynamischer Veränderung nicht verstanden wurde. Stack zeichnete beispielsweise nur langsam komplexe Animationen und versuchte, alles in einem Stück zu erreichen. Faser unterteilt die Animation in Segmente, die über mehrere Rahmen verteilt werden können. Ebenso kann die Struktur einer Seite in Segmente unterteilt werden, die separat aufrechterhalten und aktualisiert werden können. JavaScript -Funktionen und virtuell Dom Objekte werden als "Fasern" bezeichnet, und jedes kann separat betrieben und aktualisiert werden, wodurch ein reibungsloseres Rendering auf dem Bildschirm ermöglicht wird.[38]

Am 26. September 2017 wurde React 16.0 an die Öffentlichkeit veröffentlicht.[39]

Am 16. Februar 2019 wurde React 16.8 an die Öffentlichkeit veröffentlicht.[40] Die Veröffentlichung führte React -Hooks ein.[41]

Am 10. August 2020 kündigte das React-Team den ersten Veröffentlichungskandidaten für React v17.0 an, der als erste große Veröffentlichung ohne wesentliche Änderungen an der API von React Decessententern bekannt ist.[42]

Versionen
Ausführung Veröffentlichungsdatum Änderungen
0.3.0 29. Mai 2013 Erste Veröffentlichung
0.4.0 20. Juli 2013 Unterstützung für Kommentarknoten
{/ * */}
, Verbesserte serverseitige Rendering-APIs, entfernen React.autobind, Unterstützung für die wichtigsten Requisite, Verbesserungen der Formulare, feste Fehler.
0.5.0 20. Oktober 2013 Verbesserung des Speicherverbrauchs, Unterstützung für Auswahl- und Kompositionsereignisse, Unterstützung für GetInitialState und getDefaultProps in Mixins, hinzugefügte React.version und React.isvalidClass, Verbesserte Kompatibilität für Windows.
0,8,0 20. Dezember 2013 Unterstützung für Reihen & Cols, Defer & Async, Schleife für & , Autocorrect -Attribute. OncontextMenu-Ereignisse, aktualisierte JStransform- und Esprima-FB-Tools hinzugefügt, das Browserify aufgerüstet.
0.9.0 20. Februar 2014 Unterstützung für Crossorigin, Download und Hreflang, MediaGroup und Stummel, Sandbox, nahtlos und srcdoc, Scope -Attribute, hinzugefügt, addiert, Arrayof, Komponente, OneOfType, Renderable, Form zu reagieren. für Onload und OnError auf Elemente.
0,10.0 21. März 2014 Unterstützung für SRCSET- und Textanchor -Attribute hinzugefügt, fügen Sie die Aktualisierungsfunktion für unveränderliche Daten hinzu, stellen Sie sicher, dass alle Hohlraumelemente kein Schluss -Tag einfügen.
0.11.0 17. Juli 2014 Verbesserter SVG-Support, normalisiertes E-View-Ereignis, Aktualisierung von $ Apply-Befehl, Support für Namespaces, hinzugefügte neue TransformationWithDetails-API, enthält vorgefertigte Pakete unter Dist/, MyComponent () gibt nun einen Deskriptor zurück, keine Instanz.
0,12.0 21. November 2014 Neue Funktionen Spread Operator ({...}) hinzugefügt, um dies zu verabreichen. mit CSS -Übergängen.
0,13.0 10. März 2015 Veraltete Muster, die in 0.12 nicht mehr funktionieren, die Ref-Auflösungsreihenfolge hat sich geändert, Eigenschaften dieses._PendingState und this._rootnodeId, unterstützt ES6-Klassen, hinzugefügte API React.finddomnode (Komponente), Unterstützung für Iteratoren und unempfindliche Js-Sequenzen, Neue neue hinzugefügt Merkmale React.addons.CreateFragment, veraltete React.addons.ClassSet.
0,14.1 29. Oktober 2015 Unterstützung für Srclang, Standard-, Art-Attribute und Farbattribut, das Legacy-Zugriff auf Dom-Knoten, feste scryRendereddomComponentswithClass, hinzugefügt, reag-dom.js gewährleistet.
15.0.0 7. April 2016 Das erste Render verwendet jetzt document.createelement anstatt HTML zu generieren, nicht mehr zusätzlich s, verbesserte SVG -Unterstützung, ReactPerf.getLastMeasurements() ist undurchsichtig, neue Abschreibungen, die mit einer Warnung eingeführt werden, fixierte mehrere kleine Speicherlecks, React Dom unterstützt nun die HTML -Attribute von CITE und Profil und CSSFloat-, Gridrow- und GridColumn CSS -Eigenschaften.
15.1.0 20. Mai 2016 Beheben Sie einen Batching-Fehler, stellen Sie sicher, dass Sie die neueste Objektabteilung verwenden, die Regression beheben, die Verwendung des Merge-Dienstprogramms entfernen und einige Module umbenannt haben.
15.2.0 1. Juli 2016 Fügen Sie Informationen zu Komponentenstapel hinzu, validieren Sie die Requisiten zum Mountspflicht, fügen Sie React.proptypes.symbol hinzu, fügen Sie die Onload -Handhabung hinzu zu und OnError -Handling zu Element, hinzufügen isRunning() API, Leistungsregression beheben.
15.3.0 30. Juli 2016 Fügen Sie React.PureComponent hinzu, beheben Sie das Problem mit dem verschachtelten Server-Rendering, fügen Sie XMLNs, XMLNSXLink hinzu, um SVG-Attribute und ReferrerPolicy-to-HTML-Attribute zu unterstützen, Aktualisierungen von React Perf Add-On, behoben Problem mit Ref.
15.3.1 19. August 2016 Verbesserung der Leistung von Entwicklungsbauten, Reinigung interner Hooks, Upgrade von FBJs, Verbesserung der Startzeit des React, beheben Speicher -Leck beim Server -Rendering, Fix React -Test -Renderer, Änderung von TrackedTouchCount Invariante in eine Konsole.
15.4.0 16. November 2016 React -Paket und Browser Build beinhalten nicht mehr React DOM, verbesserte Entwicklungsleistung, festgelegte Testausfälle, Update BatchedUpdates API, React Perf und ReactTestRenderer.create().
15.4.1 23. November 2016 Umstrukturierung der variablen Zuordnung, fester Ereignisbehandlungen, feste Kompatibilität des Browseraufbaus mit AMD -Umgebungen.
15.4.2 6. Januar 2017 Problem mit Problemen behoben, fehlende Paketabhängigkeiten hinzugefügt, verbesserte Fehlermeldungen.
15.5.0 7. April 2017 React-DOM/Test-Utils hinzugefügt, PeerDependenzen entfernt, das Problem mit dem Verschluss Compiler behoben, fügte eine Abschaltwarnung für React.CreateClass und React.Proptypes, fester Chromfehler hinzu.
15.5.4 11. April 2017 Korrekturkompatibilität mit Enzym, indem Sie BatchedUpdates auf flachem Renderer enthüllen, Version von Prop-Typen aktualisieren, React-Addons-Create-Fragment-Paket fixieren, um die transformierte Lose-Anbieter zu enthalten.
15.6.0 13. Juni 2017 Fügen Sie Unterstützung für CSS -Variablen in Style Attribut- und Gitterstil -Eigenschaften hinzu, beheben Sie die AMD -Unterstützung für Addons abhängig von React, entfernen Sie unnötige Abhängigkeiten, fügen Sie eine Abschaltwarnung für React.CreateClass und React.Dom Factory -Helfer hinzu.
16.0.0 26. September 2017 Verbesserte Fehlerbehandlung mit Einführung von "Fehlergrenzen", React DOM ermöglicht das Übergeben von nicht standardmäßigen Attributen, geringfügigen Änderungen zum SetState-Verhalten, entfernen Sie React-with-addons.js Build, add react.createclass als Erstellung der React.Proptypes als Prop-Type, reagieren Sie als React-Dom-Factory, Änderungen des Verhaltens der Planungs- und Lebenszyklusmethoden.
16.1.0 9. November 2017 Einstellen von Bower Releases, eine zufällige zusätzliche globale Variable in den UMD -Builds, fixieren Sie Onmouseger- und OnmousEleave -Feuer, Fix <TextArea> Platzhalter, entfernen Sie unbenutzten Code, fügen Sie eine fehlende Paket hinzu.
16.3.0 29. März 2018 Fügen Sie eine neue offiziell unterstützte Kontext -API hinzu, fügen Sie ein neues Paketprevent eine unendliche Schleife hinzu, wenn Sie versuchen, Portale mit SSR zu rendern, und beheben Sie ein Problem damit. State beheben Sie ein IE/Edge -Problem.
16.3.1 3. April 2018 Präfix private API, Fix Performance Regression und Fehlerbehandlungsfehler im Entwicklungsmodus, fügen Sie Peer -Abhängigkeit hinzu, beheben Sie eine falsche positive Warnung in IE11, wenn Sie Fragment verwenden.
16.3.2 16. April 2018 Beheben Sie einen IE -Absturz, kennzeichnen Sie Etiketten in den Benutzer -Timing -Messungen, fügen Sie einen UMD -Build hinzu, verbessern Sie die Leistung von instabile_obserdbits -API mit Nesting.
16.4.0 24. Mai 2018 Fügen Sie Unterstützung für die Spezifikation für Zeiger -Ereignisse hinzu, fügen Sie die Möglichkeit hinzu, ProfTypes anzugeben, Lesenkontext zu reparieren, das Problem zu beheben getDerivedStateFromProps() Unterstützung, korrigieren Sie einen Testinstanz. Parenter Absturz, add react.unstable_profiler -Komponente zur Messung der Leistung, ändern Sie interne Ereignisnamen.
16.5.0 5. September 2018 Fügen Sie Unterstützung für React Devtools-Profiler hinzu, verarbeiten Sie Fehler in mehr Kantenfällen, fügen Sie React-DOM/Profiling hinzu, fügen Sie das Onauxclick-Ereignis für Browser hinzu, fügen Sie Movementx- und Bewegungsfelder für Mausereignisse hinzu, fügen Sie Tangententialpressure und Twist-Felder zum Zeiger-Ereignis hinzu.
16.6.0 23. Oktober 2018 Fügen Sie Unterstützung für contextType hinzu, unterstützen Sie Prioritätsniveaus, Kontinuationen und verpackte Rückrufe, verbessern Sie den Fallback -Mechanismus, fixieren Sie graue Überlagerung auf iOS -Safari, addieren React.lazy() Für Codespaltkomponenten.
16.7.0 20. Dezember 2018 Behebung der Leistung von React.
16.8.0 6. Februar 2019 Haken hinzufügen, hinzufügen ReactTestRenderer.act() und ReactTestUtils.act() Für Batching -Updates unterstützt die Synchronen, die an React.lazy () übergeben wurden, die API des USereducer -Hooks Lazy Initialisierungs -API.
16.8.6 27. März 2019 Beheben Sie einen falschen Rettungspaket in Usereducer (), beheben Sie Iframe -Warnungen in Safari Devtools, warnen Sie, ob ContextType auf Context.consumer anstelle von Kontext gesetzt ist, warnen, ob contextType auf ungültige Werte eingestellt ist.
16.9.0 9. August 2019 Hinzufügen React.Profiler API zum Sammeln von Leistungsmessungen programmatisch. Entfernen Sie instable_concurrentMode zugunsten von instable_createroot
16.10.0 27. September 2019 Fix Edge -Fall, in dem ein Hook -Update nicht memoisiert wurde. Beheben Sie die Heuristik, um zu bestimmen, wann Sie hydratisiert werden sollen, damit wir während eines Updates nicht falsch feuchten. Löschen Sie während des Unmottes zusätzliche Faserfelder, um Speicher zu speichern. Beheben Sie den Fehler mit den erforderlichen Textfeldern in Firefox. Bevorzugen Sie Objekt.is anstelle von Inline -Polyfill, sofern verfügbar. Beheben Sie den Fehler beim Mischen von Spannung und Fehlerbehandlung.
16.10.1 28. September 2019 Beheben Sie die Regression in Next.js -Apps, indem Sie das Suspense -Missverhältnis während der Flüssigkeitszufuhr zulassen
16.10.2 3. Oktober 2019 Beheben Sie die Regression in React-Native-Web, indem Sie die Reihenfolge der Argumente in Ereignis-Plugin-Extraktoren wiederherstellen
16.11.0 22. Oktober 2019 Fixieren Sie Mausenteller -Handler daran, zweimal in verschachtelten React -Behältern zu schießen. Entfernen Sie instabile_createroot und instabil_createSyncroot experimentelle APIs. (Diese sind im experimentellen Kanal als Createroot erhältlich und erzeugt.)
16.12.0 14. November 2019 Reagieren dom - Passive Effekte reparieren (Verwendungseffekt) Nicht in eine Multi-Root-App abgefeuert werden.

React ist - Fix faul und Memo Typen betrachteten Elemente anstelle von Komponenten
16.13.0 26. Februar 2020 Merkmale im reag -gleichzeitigen Modus hinzugefügt.

Beheben Sie Regressionen in der React -Kernbibliothek und React DOM.
16.13.1 19. März 2020 Beheben Sie den Fehler in der Spannung des Legacy -Modus.

WARNUNG für Cross-Component-Updates zurückkehren, die innerhalb der Klassen-Render-Lebenszyklen stattfinden
16.14.0 14. Oktober 2020 Fügen Sie Unterstützung für die neue JSX -Transformation hinzu.
17.0.0 20. Oktober 2020 "Keine neuen Funktionen" ermöglicht allmähliche Reakt -Updates aus älteren Versionen.

Fügen Sie neue JSX -Transformationen hinzu, Änderungen in der Ereignisdelegation
17.0.1 22. Oktober 2020 Reagieren dom - behebt einen Absturz in IE11
17.0.2 22. März 2021 Reagieren dom - entfernen Sie eine ungenutzte Abhängigkeit, um die anzugehen SharedArrayBuffer Cross-Origin-Isolationswarnung.
18.0.0 29. März 2022 Gleichzeitige Reaktionen, automatische Chargen, neue Suspense -Funktionen, Übergänge, APIs und Server -Rendering -APIs, neue strenge Modusverhalten, neue Hooks [43]
18.1.0 26. April 2022 Viele Korrekturen und Leistungsverbesserungen
18.1.2 14. Juni 2022 Viele weitere Korrekturen und Leistungsverbesserungen

Lizenzierung

Die erste Veröffentlichung von React im Mai 2013 verwendete die Apache -Lizenz 2.0. Im Oktober 2014 ersetzte React 0,12.0 dies durch die 3-Klausel BSD-Lizenz und fügte eine separate Patent -Textdatei hinzu, die die Verwendung von Facebook -Patents im Zusammenhang mit der Software ermöglicht:[44]

Die hierunter erteilte Lizenz endet automatisch und ohne Vorankündigung für alle, die Anspruch geltend machen (einschließlich einer Klage, Behauptung oder anderer Klage), in der (a) direkte, indirekte oder beitragende Verletzungen oder Verstöße zur Verletzung eines Patents: (i ) von Facebook oder einer seiner Tochtergesellschaften oder verbundenen Unternehmen, ob eine solche Behauptung mit der Software zusammenhängt oder nicht, (ii) von einer Partei, wenn eine solche Behauptung ganz oder teilweise aus einer Software, einem Produkt oder einer Dienstleistung von Facebook oder einem seiner Its zurückzuführen ist Tochtergesellschaften oder Partner, ob eine solche Behauptung mit der Software oder (iii) von einer Partei, die sich auf die Software bezieht, zusammenhängt oder nicht; oder (b) dass ein Recht in einem Patentanspruch von Facebook ungültig oder nicht durchsetzbar ist.

Diese unkonventionelle Klausel führte zu Kontroversen und Debatten in der React -Benutzergemeinschaft, da sie interpretiert werden konnte, um Facebook zu befähigen in einem Blog oder anderswo. Viele äußerten Bedenken, dass Facebook die Beendigungklausel zu Unrecht ausnutzen könnte oder dass die Integration von Reaktionen in ein Produkt die zukünftige Akquisition eines Startup -Unternehmens erschweren könnte.[45]

Basierend auf dem Feedback von Communitys hat Facebook das Patentzuschuss im April 2015 aktualisiert, um weniger mehrdeutig und freizügiger zu sein:[46]

Die hierunter gewährte Lizenz endet automatisch und ohne Vorankündigung, wenn Sie (oder eine Ihrer Tochtergesellschaften, Unternehmensunternehmen oder Agenten) direkt oder indirekt initiieren oder ein direktes finanzielles Interesse an einer Patentbehauptung aufnehmen: (i) gegen Facebook oder irgendwelche seiner Tochtergesellschaften oder Unternehmensmitglieder, (ii) gegen eine Partei, wenn eine solche Patentbehandlung ganz oder teilweise aus einer Software, Technologie, Produkt oder Dienstleistung von Facebook oder einer seiner Tochterunternehmen oder Unternehmensunternehmen oder (iii) gegen eine Partei ergibt in Bezug auf die Software. [...] Eine "Patentbehandlung" ist eine Klage oder andere Maßnahmen, in denen direkt, indirekte oder beitragende Verletzungen oder Verstöße oder Anreize zur Verletzung eines Patents, einschließlich einer Gegenklage oder Gegenklage, verstoßen wird.[47]

Das Apache Software Foundation betrachtete diese Lizenzvereinbarung als unvereinbar mit ihren Lizenzrichtlinien, da sie "das Risiko für nachgelagerte Verbraucher unserer Software zugunsten des Lizenzgeberers, nicht des Lizenznehmers, weitergeht, wodurch unsere legale Richtlinie der APACHE, ein universeller Spender zu sein", und "und" und "und" und " sind keine Teilmenge derjenigen, die in der [Apache -Lizenz 2.0] gefunden wurden, und sie können nicht als [Apache -Lizenz 2.0] sublizieren werden. "[48] Im August 2017 wies Facebook die nachgelagerten Bedenken der Apache Foundation ab und lehnte es ab, ihre Lizenz zu überdenken.[49][50] Der folgende Monat, WordPress beschloss, seine Gutenberg- und Calypso -Projekte von React zu wechseln.[51]

Am 23. September 2017 gab Facebook bekannt, dass es in der folgenden Woche den Fluss erneut lizenzieren würde. Scherz, Reagieren und unveränderlich.js unter einem Standard MIT -Lizenz; Das Unternehmen gab an, dass React "die Grundlage eines breiten Ökosystems der Open -Source -Software für das Web" sei und dass sie nicht "aus nichttechnischen Gründen den Fortschritt zurückhalten wollten".[52]

Am 26. September 2017 wurde React 16.0.0 mit der MIT -Lizenz veröffentlicht.[53] Die MIT -Lizenzänderung wurde auch mit React 15.6.2 in die Release -Leitung von 15.x zurückgebracht.[54]

Siehe auch

Verweise

  1. ^ Occhino, Tom; Walke, Jordanien. "JS -Apps bei Facebook". Youtube. Abgerufen 22. Oktober 2018.
  2. ^ "18.2.0 (14. Juni 2022)". Abgerufen 23. Juni 2022.
  3. ^ a b "React - Eine JavaScript -Bibliothek zum Erstellen von Benutzeroberflächen". reactjs.org. Abgerufen 7. April 2018.{{}}: CS1 Wartung: URL-Status (Link)
  4. ^ Krill, Paul (15. Mai 2014). "React: Schnellere, glattere Benutzeroberfläche für datengesteuerte Web-Apps machen". InfoWorld. Abgerufen 2021-02-23.{{}}: CS1 Wartung: URL-Status (Link)
  5. ^ Hemel, ZEF (3. Juni 2013). "Der React JavaScript -Benutzer -Interfaces -Bibliothek von Facebook erhält gemischte Bewertungen". infoq.com. Abgerufen 2022-01-11.{{}}: CS1 Wartung: URL-Status (Link)
  6. ^ Dawson, Chris (25. Juli 2014). "Javascripts Geschichte und wie sie zu Reactjs führte". Der neue Stapel. Abgerufen 2020-07-19.{{}}: CS1 Wartung: URL-Status (Link)
  7. ^ Dere, Mohan (2018-02-19). "So integrieren Sie das Erstellen von React-Apps mit allen Bibliotheken, die Sie benötigen, um eine großartige App zu erstellen.". Freecodecamp. Abgerufen 2018-06-14.{{}}: CS1 Wartung: URL-Status (Link)
  8. ^ Panchal, Krunal (2018-02-19). "Angular vs React detaillierter Vergleich". Groovy Web. Abgerufen 2022-04-25.{{}}: CS1 Wartung: URL-Status (Link)
  9. ^ Schwarzmüller, Max (2018-05-01). "React - Die vollständige Anleitung". O'Reilly. Packt Publishing. Abgerufen 19. Februar 2022.{{}}: CS1 Wartung: URL-Status (Link)
  10. ^ "Komponenten und Requisiten". Reagieren. Facebook. Abgerufen 7. April 2018.{{}}: CS1 Wartung: URL-Status (Link)
  11. ^ "Refs und der Dom". React Blog. Abgerufen 2021-07-19.{{}}: CS1 Wartung: URL-Status (Link)
  12. ^ a b "React: Das virtuelle Dom". Codecademy. Abgerufen 2021-10-14.{{}}: CS1 Wartung: URL-Status (Link)
  13. ^ "Entwurf: JSX -Spezifikation". JSX. Facebook. 2022-03-08. Abgerufen 7. April 2018.{{}}: CS1 Wartung: URL-Status (Link)
  14. ^ Hunt, Pete (2013-06-05). "Warum haben wir React aufgebaut? - React Blog". reactjs.org. Abgerufen 2022-02-17.{{}}: CS1 Wartung: URL-Status (Link)
  15. ^ "Paypal isomorphes Reagieren". Medium.com. 2015-04-27. Archiviert vom Original am 2019-02-08. Abgerufen 2019-02-08.
  16. ^ "Netflix isomorphisch reagieren". netflixtechblog.com. 2015-01-28. Abgerufen 2022-02-14.{{}}: CS1 Wartung: URL-Status (Link)
  17. ^ "Haken auf einen Blick - reagieren". reactjs.org. Abgerufen 2019-08-08.
  18. ^ "Was zum Teufel ist React Hooks?". Soshace. 2020-01-16. Abgerufen 2020-01-24.
  19. ^ "Verwenden des Zustandshakens - reagieren". reactjs.org. Abgerufen 2020-01-24.
  20. ^ "Verwenden des Effect -Hooks - reagieren". reactjs.org. Abgerufen 2020-01-24.
  21. ^ "Hooks API Referenz - reagieren". reactjs.org. Abgerufen 2020-01-24.
  22. ^ "Regeln der Haken - reagieren". reactjs.org. Abgerufen 2020-01-24.
  23. ^ "Bauen Sie Ihre eigenen Haken - reagieren Sie". reactjs.org. Abgerufen 2020-01-24.
  24. ^ "Tiefe Übersicht". Fluss. Facebook. Abgerufen 7. April 2018.
  25. ^ "Flux Release 4.0". Github. Abgerufen 26. Februar 2021.
  26. ^ Johnson, Nicholas. "Einführung in den Fluss - reagieren Sie Übung". Nicholas Johnson. Abgerufen 7. April 2018.
  27. ^ Abramov, Dan. "Die Geschichte von React und Fluss mit Dan Abramov". Drei Entwickler und eine vielleicht. Abgerufen 7. April 2018.
  28. ^ "State Management Tools - Ergebnisse". Der Zustand von JavaScript. Abgerufen 29. Oktober 2021.
  29. ^ "Notizen der Besprechung". React diskutieren. Abgerufen 2015-12-13.
  30. ^ "Reactjs/React -Future - Die Zukunft des Reaktierens". GitHub. Abgerufen 2015-12-13.
  31. ^ "Facebook/React - Feature -Anfrageprobleme". GitHub. Abgerufen 2015-12-13.
  32. ^ Walke, Jordanien. "Faxjs". Abgerufen 11. Juli 2019.
  33. ^ a b Papp, Andrea (4. April 2018). "Die Geschichte von React.js auf einer Zeitleiste". Risingstack. Abgerufen 11. Juli 2019.
  34. ^ "Pete Hunt bei TXJS".
  35. ^ Lardinois, Frederic (18. April 2017). "Facebook kündigt React Fiber an, ein Umschreiben seiner React -Bibliothek". Techcrunch. Abgerufen 19. April 2017.
  36. ^ "Faserarchitektur reagieren". Github. Abgerufen 19. April 2017.
  37. ^ "Facebook kündigt React Fiber an, ein Umschreiben seines React -Frameworks". Techcrunch. Abgerufen 2018-10-19.
  38. ^ "Github-ACDLITE/React-Faser-Architektur: Eine Beschreibung des neuen Kernalgorithmus von React, React Fiber". github.com. Abgerufen 2018-10-19.
  39. ^ "React v16.0". react.js. 2017-09-26. Abgerufen 2019-05-20.
  40. ^ "React v16.8". react.js. 2019-02-16. Abgerufen 2019-05-20.
  41. ^ "Haken einführen". react.js. Abgerufen 2019-05-20.
  42. ^ URL =https://reactjs.org/blog/2020/08/10/react-v17-rc.html
  43. ^ "React v18.0". reactjs.org. Abgerufen 2022-04-12.
  44. ^ "React Changelog.md". GitHub.
  45. ^ Liu, Austin. "Ein zwingender Grund, Reactjs nicht zu verwenden". Mittel.
  46. ^ "Aktualisierung unseres Open -Source -Patentstipendiums".
  47. ^ "Zusätzliche Gewährung von Patentrechtsversion 2". GitHub.
  48. ^ "ASF legal zuvor gestellte Fragen". Apache Software Foundation. Abgerufen 2017-07-16.
  49. ^ "Erklären Sie die Lizenz von React". Facebook. Abgerufen 2017-08-18.
  50. ^ "Erwägen Sie die Neulizenz nach Al v2.0, wie es Rocksdb gerade getan hat.". Github. Abgerufen 2017-08-18.
  51. ^ "WordPress, um die Reaktionsbibliothek über Facebook Patentklausel Risiko zu verlassen". Techcrunch. Abgerufen 2017-09-16.
  52. ^ "Relicensing React, Scherz, Fluss und unveränderliche.js". Facebook -Code. 2017-09-23.
  53. ^ Clark, Andrew (26. September 2017). "React v16.0§mitimit lizenziert". React Blog.
  54. ^ Hunzaker, Nathan (25. September 2017). "React v15.6.2". React Blog.

55.Grund zur Auswahl von ReactJs für Ihr nächstes Projekt

Externe Links