Clever Geek Handbook

Eine Einführung in React fehlte uns

React ist die weltweit beliebteste JavaScript-Bibliothek. Aber diese Bibliothek ist nicht gut, weil sie beliebt ist, sondern weil sie beliebt ist, weil sie gut ist. Die meisten der vorhandenen Einführungs-Tutorials zu React beginnen mit Beispielen für die Verwendung der Bibliothek. Diese Anleitungen sagen jedoch nichts darüber aus, warum React die richtige Wahl ist.



Dieser Ansatz hat seine Stärken. Wenn jemand sofort zum Üben kommen möchte, während er React beherrscht, muss er sich nur die offizielle Dokumentation ansehen und zur Sache kommen . Dieses Material ( hier , wenn Sie interessiert sind, seine Videoversion) wurde für diejenigen geschrieben, die eine Antwort auf die folgenden Fragen finden möchten: „Warum reagieren? Warum funktioniert React so? Warum sind React-APIs so konzipiert, wie sie sind? "











Warum reagieren?



Das Leben wird einfacher, wenn die Komponenten die Netzwerkkommunikation, die Geschäftslogik einer Anwendung oder ihren Status nicht kennen. Solche Komponenten, die dieselben Eingabeparameter empfangen, bilden immer dieselben visuellen Elemente.



Als die React-Bibliothek auf den Markt kam, änderte sich die Funktionsweise von JavaScript-Frameworks und -Bibliotheken grundlegend. Während andere ähnliche Projekte die Ideen von MVC, MVVM und dergleichen förderten, verfolgte React einen anderen Ansatz. Hier wurde nämlich das Rendern der visuellen Komponente der Anwendung von der Präsentation des Modells isoliert. Dank React ist im JavaScript-Frontend-Ökosystem eine völlig neue Architektur erschienen - Flux.



Warum hat das React-Team das getan? Warum ist dieser Ansatz besser als die vorherigen, wie die MVC-Architektur und der in jQuery geschriebene Spaghetti-Code? Wenn Sie an diesen Fragen interessiert sind, können Sie diesen Vortrag 2013 über die Entwicklung von JavaScript-Anwendungen auf Facebook sehen.



Im Jahr 2013 hat Facebook gerade einige ernsthafte Integrationsarbeiten in seine Chat-Plattform abgeschlossen. Diese neue Funktion wurde in fast jede Seite des Projekts integriert, wobei der Chat die üblichen Szenarien für die Arbeit mit der Plattform beeinflusst. Es war eine komplexe Anwendung, die in eine andere Anwendung eingebettet war, die zuvor nicht einfach gewesen war. Das Facebook-Team musste sich mit nicht trivialen Aufgaben befassen, mit unkontrollierten DOM-Mutationen und der Notwendigkeit, eine parallele asynchrone Benutzererfahrung in der neuen Umgebung bereitzustellen.



Woher wissen Sie beispielsweise im Voraus, was in einer Situation auf dem Bildschirm angezeigt wird, in der zu jeder Zeit und aus jedem Grund etwas auf das DOM zugreifen und dort Änderungen vornehmen kann? Wie kann sichergestellt werden, dass das, was der Benutzer sieht, korrekt dargestellt wird?



Mit gängigen Front-End-Tools, die vor React existierten, konnte nichts dergleichen garantiert werden. In frühen Webanwendungen war "Race Condition" im DOM eines der häufigsten Probleme.



Mangel an Determinismus = paralleles Rechnen + veränderlicher Zustand.



Martin Oderski



Die Hauptaufgabe des React-Entwicklungsteams bestand darin, dieses Problem zu lösen. Sie befassten sich mit zwei innovativen Hauptansätzen:



  • Unidirektionale Datenbindung mithilfe der Flux-Architektur.
  • Unveränderlichkeit des Komponentenzustands. Sobald der Status einer Komponente festgelegt ist, kann er nicht mehr geändert werden. Statusänderungen wirken sich nicht auf gerenderte Komponenten aus. Stattdessen führen solche Änderungen zur Ausgabe einer neuen Ansicht mit einem neuen Status.


Der einfachste Weg, Komponenten aus konzeptioneller Sicht zu strukturieren und zu rendern, bestand darin, einfach überhaupt keine Mutation anzustreben.



Tom Ochchino, JSConfUS 2013



Die React-Bibliothek konnte das Problem unkontrollierter Mutationen mithilfe der Flux-Architektur drastisch reduzieren. Anstatt Ereignishandler anzuhängen, um DOM-Aktualisierungen für eine beliebige Anzahl beliebiger Objekte (Modelle) auszulösen, bot die React-Bibliothek Entwicklern eine einzige Möglichkeit, den Komponentenstatus zu verwalten. Dies ist das Versenden von Aktionen, die sich auf das Data Warehouse auswirken. Wenn sich der Status des Speichers ändert, fordert das System die zu rendernde Komponente auf.





Die Flussarchitektur



Wenn ich gefragt werde, warum ich auf React achten soll, gebe ich eine einfache Antwort: "Der Punkt ist, wir müssen deterministisch Ansichten rendern, und React erleichtert diese Aufgabe erheblich."



Beachten Sie, dass das Lesen von Daten aus dem DOM zur Implementierung einer Logik ein Anti-Pattern ist. Wer dies tut, widerspricht dem Zweck, React zu verwenden. Stattdessen müssen die Daten aus dem Speicher gelesen und Entscheidungen basierend auf diesen Daten getroffen werden, bevor die entsprechenden Komponenten gerendert werden.



Wenn das deterministische Rendern von Komponenten das einzige an React wäre, wäre dies allein eine große Innovation. Aber das React-Entwicklungsteam hat hier nicht aufgehört. Dieses Team präsentierte der Welt eine Bibliothek mit anderen interessanten, einzigartigen Funktionen. Und als sich das Projekt weiterentwickelte, fügte React noch nützlichere Dinge hinzu.



JSX



JSX ist eine JavaScript-Erweiterung, mit der Sie deklarativ Benutzeroberflächenkomponenten erstellen können. JSX verfügt über die folgenden bemerkenswerten Funktionen:





Wenn vor dem Aufkommen von JSX Schnittstellen deklarativ beschrieben werden mussten, war es unmöglich, auf die Verwendung von HTML-Vorlagen zu verzichten. In jenen Tagen gab es keinen allgemein akzeptierten Standard für die Erstellung solcher Vorlagen. Jedes Framework verwendete seine eigene Syntax. Diese Syntax musste von jemandem gelernt werden, der beispielsweise einige Daten durchlaufen, Werte aus Variablen in eine Textvorlage einbetten oder entscheiden musste, welche Schnittstellenkomponente angezeigt werden soll und welche nicht.



Wenn Sie sich heutzutage verschiedene Front-End-Tools ansehen, werden Sie feststellen, dass Sie *ngFornicht auf eine spezielle Syntax wie die Direktive von Angular verzichten können. Da JSX jedoch als Obermenge von JavaScript bezeichnet werden kann, kann das Erstellen von JSX-Markups die vorhandenen JS-Funktionen nutzen.



Mit der Methode können Sie beispielsweise eine Reihe von Elementen durchlaufen Array.prototype.map. Sie können logische Operatoren verwenden und das bedingte Rendern mit dem ternären Operator organisieren. Sie können reine Funktionen verwenden , Sie können Zeichenfolgen mithilfe von Vorlagenliteralen erstellen . Im Allgemeinen stehen alle JavaScript-Funktionen denjenigen zur Verfügung, die Schnittstellen in JSX beschreiben. Ich denke, dies ist ein großer Vorteil von React gegenüber anderen Frameworks und Bibliotheken.



Hier ist ein Beispiel für einen JSX-Code: 



const ItemList = ({ items }) => (
  <ul>
    {items.map((item) => (
      <li key={item.id}>
        <div>{item.name}</div>
      </li>
    ))}
  </ul>
);


Richtig, wenn Sie mit JSX arbeiten, müssen Sie einige Funktionen berücksichtigen, die auf den ersten Blick ungewöhnlich erscheinen.



  • , , HTML. , class className. camelCase.
  • , , , JSX- key. . id, key.


React zwingt dem Entwickler nicht die einzig richtige Art, mit CSS zu arbeiten. Sie können beispielsweise ein JavaScript-Objekt mit Stilen an eine Komponente übergeben, indem Sie es in eine Eigenschaft schreiben style. Bei diesem Ansatz werden die meisten bekannten Stilnamen durch ihre camelCase-Entsprechungen ersetzt. Die Möglichkeiten zur Arbeit mit Stilen sind jedoch nicht darauf beschränkt. In der Praxis verwende ich gleichzeitig verschiedene Ansätze, um React-Anwendungen zu gestalten. Welchen Ansatz Sie wählen, hängt davon ab, was Sie stylen möchten. Zum Beispiel verwende ich globale Stile, um App-Themen und Seitenlayouts zu gestalten, und lokale Stile, um das Aussehen einer bestimmten Komponente anzupassen.



Hier sind meine bevorzugten Styling-Funktionen von React:



  • CSS-, . , . — , .
  • CSS- — CSS- . JavaScript-. CSS-, . Next.js, , .
  • Das styled-jsx-Paket , mit dem Sie Stile direkt in Ihrem React-Komponentencode deklarieren können. Dies ähnelt der Verwendung eines Tags <style>in HTML. Der Umfang solcher Stile kann als "hyperlokal" bezeichnet werden. Der Punkt ist, dass Stile nur die Elemente betreffen, auf die sie angewendet werden, und ihre untergeordneten Elemente. Bei Verwendung von Next.js kann das Paket styled-jsx verwendet werden, ohne dass Sie selbst eine Verbindung herstellen und etwas konfigurieren müssen.


Synthetische Ereignisse



React bietet uns einen browserübergreifenden Wrapper SyntheticEvents, der synthetische Ereignisse darstellt und die Arbeit mit DOM-Ereignissen vereinheitlichen soll. Synthetische Ereignisse sind aus mehreren Gründen nützlich:



  1. , . .
  2. . , , , JavaScript HTML, . . , , React- .
  3. . . , , . , , , . . , . , JavaScript, .


Beachten Sie, dass aufgrund der Verwendung des Ereignispools nicht über eine asynchrone Funktion auf die Eigenschaften eines synthetischen Ereignisses zugegriffen werden kann. Um ein solches Arbeitsschema zu implementieren, müssen Sie Daten aus dem Ereignisobjekt in eine Variable schreiben, auf die die asynchrone Funktion zugreifen kann.



Komponentenlebenszyklus



Das Lebenszykluskonzept von React-Komponenten konzentriert sich auf den Schutz des Zustands der Komponente. Der Status der Komponente sollte sich während der Anzeige nicht ändern. Dies wird durch das folgende Arbeitsschema erreicht: Die Komponente befindet sich in einem bestimmten Zustand und wird gerendert. Dank Lebenszyklusereignissen wird es dann möglich, Effekte darauf anzuwenden, Sie können seinen Zustand beeinflussen und mit Ereignissen arbeiten.



Das Verständnis des Lebenszyklus von React-Komponenten ist äußerst wichtig, um Schnittstellen zu entwickeln und gleichzeitig nicht mit React zu kämpfen, sondern diese Bibliothek wie von den Entwicklern vorgesehen zu verwenden. "Battles" mit React, z. B. das falsche Ändern des Status von Komponenten oder das Lesen von Daten aus dem DOM, negieren die Stärken dieser Bibliothek.



In React gab es ab Version 0.14 eine klassenbasierte Komponentenbeschreibungssyntax, mit der Sie Komponentenlebenszyklusereignisse verarbeiten können. Es gibt drei kritische Phasen im Lebenszyklus von React-Komponenten: Bereitstellen, Aktualisieren und Aufheben der Bereitstellung.





Komponentenlebenszyklus



Die Aktualisierungsphase kann in drei Teile unterteilt werden: Rendern (Rendern), Precommit (Vorbereiten von Änderungen am DOM-Baum), Commit (Vornehmen von Änderungen am DOM-Baum).





Die Struktur der Aktualisierungsphase



Lassen Sie uns diese Phasen des Komponentenlebenszyklus genauer betrachten:



  • Render — . render() , . , JSX.
  • Precommit — DOM, getSnapShotBeforeUpdate. , , .
  • Festschreiben - Während dieser Phase des Lebenszyklus der Komponente aktualisiert React das DOM und die Refs . Hier können Sie eine Methode componentDidUpdateoder einen Hook verwenden useEffect. Hier können Sie Effekte ausführen, Aktualisierungen planen, das DOM verwenden und andere ähnliche Aufgaben ausführen.


Dan Abramov hat ein hervorragendes Diagramm erstellt , das zeigt, wie die Lebenszyklusmechanismen von Komponenten funktionieren.





Der Lebenszyklus von Reaktionskomponenten



Meiner Meinung nach ist die Darstellung von Komponenten als langlebige Klassen nicht das beste Reaktionsmodell. Denken Sie daran, dass der Status der React-Komponenten nicht mutieren darf. Der veraltete Zustand muss durch einen neuen ersetzt werden. Bei jedem solchen Austausch wird die Komponente neu gerendert. Dies gibt React das wohl wichtigste und wertvollste Merkmal: Unterstützung für einen deterministischen Ansatz zum Rendern von Komponentenvisualisierungen.



Dieses Verhalten lässt sich am besten folgendermaßen betrachten: Jedes Mal, wenn die Komponente gerendert wird, ruft die Bibliothek eine deterministische Funktion auf, die JSX zurückgibt. Diese Funktion sollte keine eigenen Nebenwirkungen hervorrufen. Aber sie kann, wenn sie es braucht, Anfragen an React weiterleiten, um solche Effekte auszuführen.



Mit anderen Worten, es ist sinnvoll, sich die meisten React-Komponenten als reine Funktionen vorzustellen, die Eingabeparameter verwenden und JSX zurückgeben. Reine Funktionen haben folgende Eigenschaften:



  • Wenn sie dieselbe Eingabe erhalten, geben sie immer dieselbe Ausgabe zurück (sie sind deterministisch).
  • Sie haben keine Nebenwirkungen (dh sie arbeiten nicht mit Netzwerkressourcen, geben nichts an die Konsole aus, schreiben nichts darauf localStorageusw.).


Beachten Sie, dass Sie, wenn Nebenwirkungen erforderlich sind, damit eine Komponente funktioniert, diese ausführen können, useEffectindem Sie den Aktionsersteller verwenden oder auf ihn verweisen, der über Requisiten an die Komponente übergeben wurde, und die Behandlung von Nebenwirkungen außerhalb der Komponente ermöglichen .



Haken reagieren



In React 16.8 wird ein neues Konzept namens React Hooks eingeführt. Dies sind Funktionen, mit denen Sie eine Verbindung zu Komponentenlebenszyklusereignissen herstellen können, ohne die Klassensyntax zu verwenden und ohne sich auf Komponentenlebenszyklusmethoden zu verlassen. Dadurch wurde es möglich, Komponenten nicht in Form von Klassen, sondern in Form von Funktionen zu erstellen.



Das Aufrufen eines Hooks bedeutet im Allgemeinen einen Nebeneffekt, der es der Komponente ermöglicht, mit ihrem Status und dem E / A-Subsystem zu arbeiten. Ein Nebeneffekt ist jede Zustandsänderung, die außerhalb der Funktion sichtbar ist, mit Ausnahme einer Änderung des von der Funktion zurückgegebenen Werts.



Hook useEffectErmöglicht es Ihnen, Nebenwirkungen für die spätere Ausführung in die Warteschlange zu stellen. Sie werden zu gegebener Zeit im Lebenszyklus der Komponente aufgerufen. Diese Zeit kann unmittelbar nach dem Mounten der Komponente (z. B. wenn die Lifecycle-Methode componentDidMount aufgerufen wird ) während der Commit-Phase ( componentDidUpdate- Methode ) unmittelbar vor dem Aufheben der Bereitstellung der Komponente ( componentWillUnmount ) auftreten.



Beachten Sie, dass einem Hook drei Komponentenlebenszyklusmethoden zugeordnet sind. Der Punkt hier ist, dass Hooks es Ihnen ermöglichen, verwandte Logik zu kombinieren und sie nicht wie zuvor nach verschiedenen Methoden des Komponentenlebenszyklus "auszulegen".



Viele Komponenten müssen während des Bereitstellens eine Aktion ausführen, jedes Mal, wenn die Komponente neu gezeichnet wird, muss etwas aktualisiert werden, und Ressourcen müssen unmittelbar vor dem Aushängen der Komponente freigegeben werden, um Speicherverluste zu vermeiden. Dank der Verwendung können useEffectalle diese Aufgaben in einer Funktion gelöst werden, ohne ihre Lösung in drei verschiedene Methoden aufzuteilen, ohne ihren Code mit dem Code anderer Aufgaben zu mischen, die nicht mit ihnen zusammenhängen, aber auch diese Methoden benötigen.



Folgendes geben uns React Hooks:



  • Mit ihnen können Sie Komponenten erstellen, die als Funktionen und nicht als Klassen dargestellt werden.
  • Sie helfen Ihnen dabei, Ihren Code besser zu organisieren.
  • Sie erleichtern die gemeinsame Nutzung derselben Logik für verschiedene Komponenten.
  • Neue Hooks können erstellt werden, indem vorhandene Hooks erstellt werden (Aufruf von anderen Hooks).


Im Allgemeinen empfehlen wir die Verwendung von Funktionskomponenten und Hooks anstelle von klassenbasierten Komponenten. Funktionskomponenten sind normalerweise kompakter als klassenbasierte Komponenten. Ihr Code ist besser organisiert, lesbarer, wiederverwendbarer und einfacher zu testen.



Containerkomponenten und Präsentationskomponenten



Um die Modularität von Komponenten und ihre Wiederverwendbarkeit zu verbessern, konzentriere ich mich auf die Entwicklung von zwei Arten von Komponenten:



  • Containerkomponenten sind Komponenten, die mit Datenquellen verbunden sind und Nebenwirkungen haben können.
  • Presentation Beans sind größtenteils reine Beans, die bei gleichen Requisiten und Kontexten immer dieselbe JSX zurückgeben.


Reine Komponenten sollten nicht mit der Basisklasse React.PureComponent verwechselt werden , die so genannt wird, weil es nicht sicher ist, Komponenten zu erstellen, die nicht rein sind.



▍Präsentationskomponenten



Berücksichtigen Sie die Funktionen von Präsentationskomponenten:



  • Sie interagieren nicht mit Netzwerkressourcen.
  • Sie speichern keine Daten dort localStorageoder laden sie von dort.
  • Sie geben keine unvorhersehbaren Daten weiter.
  • Sie beziehen sich nicht direkt auf die aktuelle Systemzeit (z. B. durch Aufrufen einer Methode Date.now()).
  • Sie interagieren nicht direkt mit dem Anwendungsstatusspeicher.
  • - , , , .


Aufgrund des letzten Punktes in dieser Liste, den ich bei Präsentationskomponenten erwähnt habe, handelt es sich meistens um reine Komponenten. Diese Komponenten lesen ihren Status aus dem globalen Status von React. Daher sind die Hooks wie die Hooks useStateund die useReducerBereitstellung bestimmter impliziter Daten (dh Daten, die nicht in der Signaturfunktion beschrieben sind), die aus technischer Sicht nicht als solche Komponenten bezeichnet werden können, "sauber". Wenn Sie möchten, dass sie wirklich sauber sind, können Sie alle Aufgaben zum Verwalten des Status an die Containerkomponente delegieren. Ich nehme jedoch an, dass Sie dies nicht tun sollten, zumindest bis der korrekte Betrieb der Komponente mithilfe von Modular überprüft werden kann Tests.



Am besten der Feind des Guten.



Voltaire



▍Container-Komponenten



Containerkomponenten sind diejenigen Komponenten, die für die Verwaltung des Status, die Ausführung von E / A-Vorgängen oder andere Aufgaben verantwortlich sind, die möglicherweise ein Nebeneffekt sind. Sie müssen kein Markup selbst rendern. Stattdessen delegieren sie die Rendering-Aufgabe an Präsentationskomponenten und dienen selbst als Wrapper für solche Komponenten. In der Regel ruft eine Containerkomponente in einer React + Redux-Anwendung einfach die entsprechenden Daten auf mapStateToProps()und mapDispatchToProps()übergibt sie an die Präsentationskomponenten. Container können auch für einige allgemeine Aufgaben verwendet werden, die im Folgenden erläutert werden.



Komponenten höherer Ordnung



Eine Komponente höherer Ordnung (Higher Order Component, HOC) ist eine Komponente, die andere Komponenten übernimmt und eine neue Komponente zurückgibt, die neue Funktionen basierend auf den ursprünglichen Komponenten implementiert.



Komponenten höherer Ordnung funktionieren, indem einige Komponenten mit anderen umbrochen werden. Eine Wrapper-Komponente kann eine Logik implementieren und DOM-Elemente erstellen. Es kann zusätzliche Requisiten an die verpackte Komponente weitergeben oder nicht.



Im Gegensatz zu React Hooks und Render RequisitenKomponenten höherer Ordnung eignen sich für die Zusammensetzung unter Verwendung des Standardansatzes für die Funktionszusammensetzung. Auf diese Weise können Sie die Ergebnisse der Zusammensetzung der Funktionen, die für die Verwendung an verschiedenen Stellen der Anwendung vorgesehen sind, deklarativ beschreiben. Gleichzeitig sollten vorgefertigte Komponenten nicht über das Vorhandensein bestimmter Möglichkeiten informiert sein. Hier ist ein Beispiel-HOC von EricElliottJS.com : 



import { compose } from 'lodash/fp';
import withFeatures from './with-features';
import withEnv from './with-env';
import withLoader from './with-loader';
import withCoupon from './with-coupon';
import withLayout from './with-layout';
import withAuth from './with-auth';
import { withRouter } from 'next/router';
import withMagicLink from '../features/ethereum-authentication/with-magic-link';

export default compose(
  withEnv,
  withAuth,
  withLoader,
  withLayout({ showFooter: true }),
  withFeatures,
  withRouter,
  withCoupon,
  withMagicLink,
);


Hier sehen Sie eine Mischung aus vielen Funktionen, die auf allen Seiten der Website gemeinsam genutzt werden. Es withEnvliest nämlich Einstellungen aus Umgebungsvariablen, withAuthimplementiert den GitHub-Authentifizierungsmechanismus, withLoaderzeigt eine Animation beim Laden von Benutzerdaten an, , withLayout({ showFooter: true })zeigt ein Standardlayout mit einer Fußzeile an, withFeaturezeigt Einstellungen an, withRouterlädt den Router, withCouponist für die Arbeit mit Gutscheinen verantwortlich und withMagicLingunterstützt die Benutzerauthentifizierung ohne Kennwort Magie .



Angesichts der Tatsache , dass die Kennwortauthentifizierung veraltet und eine gefährliche Praxis ist, lohnt es sich heutzutage, andere Methoden der Benutzerauthentifizierung zu verwenden.



Fast alle Seiten der oben genannten Website nutzen alle diese Funktionen. Da sie aus einer Komponente höherer Ordnung bestehen, können Sie sie alle in eine Containerkomponente mit nur einer Codezeile aufnehmen. So würde beispielsweise die Tutorial-Seite aussehen: 



import LessonPage from '../features/lesson-pages/lesson-page.js';
import pageHOC from '../hocs/page-hoc.js';
export default pageHOC(LessonPage);


Diese Komponenten höherer Ordnung haben eine Alternative, aber dies ist eine zweifelhafte Konstruktion, die als "Pyramide des Untergangs" bezeichnet wird und am besten nicht verwendet wird. So sieht es aus: 



import FeatureProvider from '../providers/feature-provider';
import EnvProvider from '../providers/env-provider';
import LoaderProvider from '../providers/loader-provider';
import CouponProvider from '../providers/coupon-provider';
import LayoutProvider from '../providers/layout-provider';
import AuthProvider from '../providers/auth-provider';
import RouterProvider from '../providers/RouterProvider';
import MagicLinkProvider from '../providers/magic-link-provider';
import PageComponent from './page-container';

const WrappedComponent = (...props) => (
  <EnvProvider { ...props }>
    <AuthProvider>
      <LoaderProvider>
        <LayoutProvider showFooter={ true }>
          <FeatureProvider>
            <RouterProvider>
              <CouponProvider>
                <MagicLinkProvider>
                  <YourPageComponent />
                </MagicLinkProvider>
              </CouponProvider>
            </RouterProvider>
          </FeatureProvider>
        </LayoutProvider>
      </LoaderProvider>
    </AuthProvider>
  </EnvProvider>
);


Und das muss auf jeder Seite wiederholt werden. Und wenn etwas in dieser Struktur geändert werden muss, müssen Änderungen daran vorgenommen werden, wo immer es vorhanden ist. Ich denke, die Nachteile dieses Ansatzes liegen auf der Hand.



Die Verwendung von Komposition zur Lösung allgemeiner Probleme ist eine der besten Möglichkeiten, um die Komplexität Ihres Anwendungscodes zu verringern. Die Komposition ist so wichtig, dass ich sogar ein Buch darüber geschrieben habe .



Ergebnis



  • Warum reagieren? React gibt uns eine deterministische Darstellung der visuellen Darstellungen von Komponenten, die auf der unidirektionalen Datenbindung und dem unveränderlichen Zustand von Komponenten basiert.
  • Mit JSX können wir Schnittstellen in JavaScript-Code einfach deklarativ beschreiben.
  • - .
  • . , . , DOM DOM.
  • React , . , , .
  • - . - .
  • , . ( , ).


?



In diesem React-Artikel haben wir viele funktionale Programmierkonzepte behandelt. Wenn Sie ein tiefes Verständnis der Prinzipien der Entwicklung von React-Anwendungen anstreben, ist es hilfreich, Ihr Wissen über reine Funktionen , über Unveränderlichkeit , über das Currying und die teilweise Anwendung von Funktionen sowie über die Funktionszusammensetzung aufzufrischen. Verwandte Materialien finden Sie unter EricElliottJS.com .



Ich empfehle die Verwendung von React in Verbindung mit Redux , Redux-Saga und RITEway . Redux wird für die Verwendung mit Autodux und Immer empfohlen... Um komplexe Zustandsschemata zu organisieren, können Sie versuchen, Redux-DSM zu verwenden .



Wenn Sie die Grundlagen verstanden haben und bereit sind, echte React-Apps zu erstellen, schauen Sie sich Next.js und Vercel an . Mithilfe dieser Tools können Sie die Konfiguration des Projekterstellungssystems und der CI / CD-Pipeline automatisieren. Mithilfe dieser Tools können Sie das Projekt für eine optimierte Bereitstellung auf dem Server vorbereiten. Sie haben den gleichen Effekt wie ein ganzes DevOps-Team, können jedoch kostenlos verwendet werden.



Welche Hilfstools verwenden Sie bei der Entwicklung von React-Apps?









More articles:


All Articles