REAGIEREN
Übersetzt von
ScribdTranslationsREAGIEREN
Übersetzt von
ScribdTranslationsREAGIEREN
EINLEITUNG
React ist eine JavaScript-Bibliothek, die entwickelt wurde, um die Lösung für Frontend-Entwickler und mobile Apps zu werden, die auf
[Link] ist eine deklarative Bibliothek, die auf Komponenten basiert.
Erklärt, warum React das Entwickeln von Benutzeroberflächen (UI) erleichtert, indem es den Code lesbarer und einfacher macht.
da debuggare, progetare interfacce für jeden Zustand der Anwendung, so dass bei jeder Zustandsänderung React
wird nur die Teile der Benutzeroberfläche aktualisieren, die von diesen Daten abhängen.
I Komponenten sind ähnlich wie HTML-Tags, sie können Einzelkomponenten oder zusammengesetzt mit einer Baumstruktur erstellt werden.
Durch komplexe Benutzeroberflächen. Die Interaktionen und die Logik für die Komponenten sind in JavaScript implementiert, und das ermöglicht uns
leicht zu durchlaufen und auf komplexe Datenstrukturen an verschiedenen Punkten der Anwendung zuzugreifen, ohne sie speichern zu müssen
Informationen zum DOM.
WIE MAN REACT ZU EINER WEBSITE HINZUFÜGT
Um eine React-Komponente zu einer bestehenden HTML-Seite hinzuzufügen, sind keine Installationsanforderungen erforderlich.
Schritt 1: Fügen Sie einen DOM-Container zum HTML hinzu (root)
Zunächst muss man der HTML-Seite einen leeren <div>-Tag hinzufügen, um den Punkt anzugeben, an dem angezeigt werden soll.
etwas mit React.
content
Es muss diesem <div> ein eindeutiges Attribut zugewiesen werden. Dies wird es ermöglichen, ihn mit dem JavaScript-Code zu finden und zu
einen React-Komponente darin visualisieren.
Sie können ein <div> "Container" überall innerhalb des <body>-Tags positionieren und alle DOM-Container einfügen.
Unabhängigkeit, die Sie auf einer Seite benötigen
Schritt 2: Fügen Sie die Script-Tags hinzu
Anschließend müssen drei <script>-Tags zur HTML-Seite hinzugefügt werden, unmittelbar vor dem schließenden </body>-Tag:
<!-- Carica React. -->
<scriptsrc="htps://[Link]/react@16/umd/[Link]" crossorigin></script>
<scriptsrc="htps://[Link]/react-dom@16/umd/[Link]" crossorigin></script>
<!-- Lade unsere React-Komponente. -->
<script src="[Link]"></script>
</body>
Die ersten beiden Tags laden React. Das dritte lädt den Code der Komponente.
Die obigen Versionen sind nur für Entwicklungsumgebungen gedacht und sind nicht für Produktionsumgebungen geeignet.
Minifizierte und optimierte Versionen von Produktions-Reacts sind:
<script crossorigin src="htps://[Link]/react@16/umd/[Link]"></script>
<script crossorigin src="htps://[Link]/react-dom@16/umd/[Link]"></script>
Stellen Sie sicher, dass das CDN, das Sie verwenden, den HTTP-Header Access-Control-Allow-Origin: * gesetzt hat:
Schritt 3: Erstelle eine React-Komponente
Erstellen Sie eine Javascript-Datei, die eine React-Komponente definiert und sie über die ID des divs in das HTML einfügt.
EIN NEUES REACT-PROJEKT ERSTELLEN
Wann man hingegen ein neues React-Projekt beginnen muss und die Anwendung nach und nach wächst, entsteht der Bedarf zu
Ein integrierteres Tool. Es gibt verschiedene JavaScript-Toolchains, die für die Entwicklung von Anwendungen geeignet sind.
Komplexe, um alle Vorteile von React zu nutzen. Die Toolchains in React helfen dabei, zu erstellen:
Verwenden Sie Drittanbieterbibliotheken, die von npm importiert wurden.
Umgehend häufige Fehler identifizieren.
Visualisieren Sie in Echtzeit die Auswirkungen von Änderungen am JavaScript- und CSS-Code während der Entwicklung.
Die Ausgabe für die Produktion optimieren.
Letoolchains benötigen keine Konfiguration, um verwendet zu werden.
React empfiehlt diese Lösungen:
Wenn Sie React lernen, erstellen Sie eine neue [Link] ReactApp.
Wenn Sie eine serverseitig gerenderte Website mit [Link] erstellen, verwenden [Link].
Wenn Sie eine auf statischem Inhalt ausgerichtete Website erstellen, verwenden SieGatsby.
Wenn Sie eine Komponentenbibliothek erstellen, indem Sie eine bestehende Codebasis integrieren,
benutzenFlexiblere Toolchains.
Erstelle React-App
Erstelle React-AppEs ist eine komfortable Umgebung, um React zu lernen, und es ist der beste Weg, um anzufangen, eine zu bauen.
neue Anwendungeinseitigein React.
Esso konfiguriert die Entwicklungsumgebung so, dass die neuesten Funktionen von JavaScript genutzt werden können, und bietet
Eine Erfahrung in der Entwicklung und Optimierung der Anwendung für die Produktion.
Es wurde um die Installation von ... gebetenNode >= 8.10 und npm >= 5.6.
Um ein Projekt zu erstellen, führen Sie aus:
npx create-react-app mia-app
cdmia-app
npm starten
npx ist ein Paketexecutortincluso in npm.
Create React App verwaltet nicht die Backend-Logik oder Datenbanken; es erstellt nur eine Build-Kette für das Frontend, also
kann mit jedem Backend verwendet werden.
Wenn es in Produktion freigegeben werden soll, führe den Befehl aus
npm run build
Es wird eine optimierte Build der Anwendung im Verzeichnis build erstellt.
[Link]
[Link] ist ein beliebtes und leichtes Framework für statische und serverseitig gerenderte Anwendungen.
Reagieren. Enthält Lösungen für das Routing und die Anwendung von Stilen, erfordert die Nutzung [Link] Serverumgebung.
Gatsby
Gatsbyes ist der beste Weg, statische Seiten mit React zu erstellen, es ermöglicht die Verwendung von React-Komponenten, aber seine Ausgabe ist
besteht vollständig aus vorgerendertem HTML- und CSS-Code, um schnelle Ladezeiten zu gewährleisten.
Flexiblere Toolchains
Die folgenden Toolchains bieten mehr Auswahl und Flexibilität und werden für erfahrene Benutzer empfohlen:
NeutRinoeinschließlich eines Presets für dieReact-Anwendungene per iKomponentetReagieren.
Nxermöglicht die Entwicklung von Full-Stack-Monorepos mit integrierter Unterstützung für React, [Link],Ausdrücken, und anderes.
PaketEs ist ein schneller und konfigurationsfreier Anwendungsbauer, derfunktioniert mit React.
RazzleServer-Seitiges Renderierungs-Framework, das keine Konfigurationen benötigt und mehr Flexibilität bietet als
[Link].
STRUKTURDATEI PROJEKT MIT CREATE-REACT-APP
Sobald das Projekt mit create-react-app erstellt wurde, werden Dateien und Ordner erstellt.
Die Datei [Link]
Der Projektordner enthält ein Set von bereits installierten Paketen, die dazugehö[Link], Inhalt innerhalb der
verzeichnisnode_modules.
Ein Teil der Pakete ist erforderlich, damit die Anwendung ausgeführt werden kann und damit sie funktioniert.
Es gibt dann weitere Pakete, die stattdessen Werkzeuge zur Unterstützung bei der Überprüfung des Codes, dem Start eines Servers bereitstellen.
Web für das Debugging, die Ausführung automatisierter Tests, das Zusammenstellen von Dateien und Ressourcen für die Produktionsfreigabe
und noch mehr. Sie sind daher nicht unbedingt für die Laufzeit erforderlich, sondern nur in der Entwicklungsphase.
Die Datei [Link]: Es handelt sich um eine Datei, die in Anwendungen und Paketen geschrieben für [Link] vorhanden ist, sie enthält ein
GegenstandJSONder die wesentlichen Informationen des Pakets zusammenfasst, wie den Namen (name) und die Version (version), die
notwendige Abhängigkeiten zur Laufzeit (dependencies) und solche nur für die Entwicklung (devDependencies), sowie eine Reihe von
Befehle, die über npm, den Paketmanager von [Link], ausgeführt werden können, definiert in der Eigenschaft scripts.
Ich befehlige reagiere-Skripte
create-react-app umfasst das Paket react-scripts, das eine Reihe von bereits bereitgestellten Skripten enthält, die in der Lage sind, verschiedene
Operationen über die Eingabeaufforderung.
Ich lerne den Prompt und mich im Projektordner zu bewegen, ist es möglich, die Skripte mit
npm-Befehl.
Die verfügbaren Befehle sind:
- npm start führt die Transpilierung des Quellcodes der Anwendung durch und zeigt eventuelle Fehler an. Al
Termin des Prozesses, der Webserver für das Debugging aktiviert und der Browser geöffnet, um die Anzeige zu sehen.
Startseite der Anwendung unter der Adresse localhost an dem vordefinierten Port (3000). Wenn der Browser nicht
Zeigen Sie den erwarteten Inhalt an, überprüfen Sie die möglichen Fehler im Konsolenblatt.
- npm build: führt den Build des Projekts aus, erstellt das gleichnamige Verzeichnis und generiert darin die Dateien.
assemblierung der anwendung, optimiert für die freigabe in der produktionsumgebung. Die Bundling-Tools bündeln
und packen die notwendigen Dateien für den Betrieb der Anwendung ein und starten den Minimierungsprozess für
Die Größe der Dateien reduzieren, die der Browser herunterladen muss, um die Leistung zu maximieren.
- npmtest:bereitet die Test-Suite für die Ausführung vor. In der Regel bleibt das Tool aktiv und in Bereitschaft zum Lauschen für
Tests erneut durchführen aufgrund von Änderungen an den Anwendungsquellen.
- npm eject: irreversibler Befehl, der ausgeführt wird, wenn man auf die Unterstützung von create-react-app verzichten möchte.
Der Befehl entfernt die Abhängigkeit vom Tool aus dem Projekt und extrahiert die Konfigurationsdateien für Webpack, Babel und
die anderen Tools, auf die es sich stützt, wobei die volle Kontrolle in den Händen des Entwicklers bleibt.
Datei sorgent src
Der Ordner src des Projekts enthält die eigentlichen Quellfiles, die die "Bausteine" der Anwendung darstellen: sie
Sie umfassen JavaScript-Dateien mit dem Code der Komponenten, DateienCSSmit den Stylesheets, gegebenenfalls "Assets" (Bilder,
Icone, Schriftart, usw.)
Im Ordner finden wir die Datei [Link], die die Hauptkomponente der Anwendung (root DOM) darstellt und die
wird alle Komponenten "Kinder" beherbergen, die die Benutzeroberfläche bilden werden.
Die Komponente, die als Container fungiert, befindet sich in der Datei [Link] im öffentlichen Ordner, der als "Einstiegspunkt" dient.
der Anwendung.
JSX: COMPONENTEN UND ELEMENTE
JSX ist eine Syntax, die HTML ähnlich sein kann, aber eine Erweiterung der JavaScript-Syntax ist, die es ermöglicht, zu erstellen
Elemente, die die Komponenten bilden. Die Komponenten werden im DOM umgeleitet.
der Anwendung. Du kannst an die Elemente als Beschreibungen dessen denken, was du auf dem Bildschirm sehen möchtest. Reagieren
Er verwendet diese Eingaben, um das DOM zu erstellen und aktuell zu halten.
Also hat die gesamte Anwendung eine DOM-Baumstruktur, es wird empfohlen, die Einzelnen in .js-Dateien zu erstellen.
Komponente e sie dann an das DOM ([Link]) über die Datei [Link] umleiten.
In React müssen die Elemente einer Komponente ein einzelnes übergeordnetes Element haben, zum Beispiel:
<div> </div>
<h1> Hallo Welt</h1>
<div> </div>
<h2> Erstes Beispiel<h2>
In diesem Fall würde es einen Fehler geben. Wenn wir den vorherigen Code schreiben wollen, um mehr Elemente zurückzugeben,
korrekt und ohne das zweite Element im Elternelement div einzufügen oder ein anderes div zu erstellen, ist es möglich
avvolgerliin <[Link]>...</[Link]>che consente di restituire elementi multipli come
Ergebnis einer metodorender(), ohne ein zusätzliches DOM-Element erstellen zu müssen, um sie zu enthalten.
In pratica ist es möglich, die Elemente der Komponenten direkt in Javascript zu schreiben, denn JSX ist optional.
und nicht erforderlich, um React zu verwenden, da es dann in Javascript umgewandelt wird, aber es ist viel mehr
komfortabel, einfach und lesbar. Das Tool Babel konvertiert tatsächlich den JSX-Code in JavaScript, in Aufrufe zu
[Link], zum Beispiel:
<h1 className="saluto">Hallo, Welt!</h1>
wird umgewandelt in:
const element = [Link](
h1
saluto
Hallo, Welt!
);
Javascript-Code in JSX
Innerhalb von elementJSX ist es möglich, Javascript-Code (Ausdrücke, Variablen, Funktionen usw.) einzufügen
in Klammern {} beispielsweise fügen wir das Ergebnis des Aufrufs einer JavaScript-Funktion ein, in einem
elemento<h1>.
<h1> Hallo, {formatName(user)} </h1>
const user = {
Giuseppe
Verdi
};
funktion formatName(benutzer) {
return [Link] + ' ' + [Link];
}
[Link](element, [Link]('root'));
Wir sehen in diesem Beispiel, dass es möglich ist, Elemente zu erstellen und sie Variablen zuzuweisen;
Im Element wird in den geschweiften Klammern {} ein Aufruf einer JavaScript-Funktion ausgeführt, die die Daten von einem
Benutzerobjekt. Und schließlich wird das Element schließlich über den Namen der Variablen an das DOM weitergeleitet.
Es ist möglich, JSX innerhalb von if-Anweisungen, while-Schleifen, for-Schleifen zu verwenden, es Variablen zuzuweisen und es als Argument zu verwenden.
eine Funktion und es als Ergebnis einer Funktion zurückgeben.
Fügen Sie keine Anführungszeichen um die geschweiften Klammern hinzu, wenn Sie einen JavaScript-Ausdruck in ein Attribut einfügen.
Sie sollten entweder Hochkommata (für Zeichenfolgen) oder geschweifte Klammern (für Ausdrücke) verwenden, aber niemals beides gleichzeitig.
das gleiche Attribut.
React DOM verwendet die KonventioncamelCasebei der Zuweisung des Namens zu den Attributen anstelle der verwendeten
Normalerweise ändert sich im HTML der Name einiger Attribute, zum Beispiel wird das Attribut class zuKlassennamein
JSX etabindex wirdtabIndex.
Die React-Komponenten implementieren unmetodorender(), das Eingabedaten erhält und zurückgibt, was angezeigt werden soll.
PRIMA APP REACT: Hallo Welt
Beispiel einer React-App, die eine Klasse zur Erstellung einer HelloMessage-Komponente verwendet.
class HelloMessage extends [Link] {
render() {
return (
<div>
<h1>Hallo {[Link]}</h1>
</div>
);
}
}
[Link](<HelloMessage name="Welt" />, [Link]('root'));
PROJEKT REACT UHR
Konkretes Beispiel einer React-Anwendung einer Uhr, die die aktuelle Uhrzeit anzeigt und die Reaktivität von React demonstriert:
Die Anwendung besteht aus 4 Dateien:
datei [Link]
<div id="root"></div>
Datei html, die das Root-Tag enthält und das übergeordnete Element des DOM darstellt, wird in c0u65Zzzi umgeleitet.
Die gesamte Anwendung angezeigt.
Datei [Link]
Diese Datei enthält die Komponente Uhr
import React von 'react';
funktion Orologio() {
const oraMillisecondi = [Link]();
const ora = new Date(oraMillisekunden);
Rückgabe (
<p>{[Link]()}</p>
)
}
exportiere standard Orologio;
Die React-Bibliothek wird importiert, danach wird die Komponente Uhr durch eine Funktion erstellt.
[Link]() gibt die aktuelle Uhrzeit in Millisekunden zurück, danach wird ein Date-Objekt erstellt. Die Komponente gibt ein zurück.
Element p, in dem die Methode toLocaleTimeString() das Ergebnis im Format Stunden/Minuten/Sekunden anzeigt. Schließlich wird
der Komponent exportiert.
Datei [Link]
import React von 'react';
import Orologio von './Orologio';
Funktion App() {
zurückgeben (
<div className ="App">
<h1>Aktuelle Uhrzeit</h1>
Uhr
</div>
)
}
exportiere standard App;
Es ist die Elternkomponente der gesamten Anwendung, die alle Kindkomponenten importiert, in diesem Fall nur die Komponente.
Uhr und kehrt zur Struktur aller Komponenten der Anwendung zurück.
Wir sehen, dass die Komponente Uhr importiert wurde, diese kann in die Anwendung eingefügt werden durch eine
einfache Tag <Orologio/>.
Die Namen der Komponenten müssen immer mit einem Großbuchstaben beginnen, im Gegensatz zu JSX-Tags.
Datei [Link]
import React von 'react';
import ReactDOM von 'react-dom';
importiere App von './App';
funktion orario() {
[Link](<App/>, [Link]('root'));
}
setInterval(orario, 1000)
Dies importiert React, ReactDOM, die Datei der übergeordneten Komponente App.
[Link](component, wo umleiten)
Leitet die Komponente <App/> in die Wurzel des DOM im HTML um. Diese Komponente zeigt die aktuelle Uhrzeit an.
Statco, man muss die Seite aktualisieren, um die Updates zu sehen, deshalb wird die Weiterleitung eingefügt.
innerhalb einer Funktion, die mit setInterval() jede Sekunde aufgerufen wird. Bei jedem Aufruf der Funktion,
Der Komponenten wird jede Sekunde umgeleitet, und eine Eigenschaft von React ist, dass bei jeder Umleitung, wird
Der DOM wird mit dem vorherigen verglichen und es werden nur die Elemente geändert, die Modifikationen erfahren haben. In diesem
Der Fall wird sich nur in jedem <p></p> Element ändern, jede Sekunde, der Rest nicht.
Von Klasse zu Funktion und umgekehrt wechseln
Bevor Hooks zur Verwaltung von State in React eingeführt wurden, wurde der Code mit Klassen geschrieben. Einführung von
Hooks sind von Klassen zu Funktionen übergegangen und es kommt oft vor, dass man noch Code mit Klassen findet, aber der Unterschied zwischen
Klassen und Funktionen sind minimal und man kann leicht von einer Klasse zu einer Funktion und umgekehrt wechseln.
Daten zur Funktion:
functon App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Prima App React </p>
</header>
</div>
);
}
Um sie in eine Klasse umzuwandeln:
Klasse App erweitert Komponente {
render() {
zurückgeben (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p> Prima App React </p>
</header>
</div>
);
}
}
Importiere importReact, { Component} von 'react';
Man verwendet das Schlüsselwort class, gefolgt vom Namen, und erweitert Component und fügt den gesamten Codeblock in die Methode ein.
render(), das standardmäßig automatisch aufgerufen und ausgeführt wird.
KOMPONENTEN UND PROPS
Komponenten ermöglichen es, die Benutzeroberfläche in unabhängige, wiederverwendbare Teile zu unterteilen. Konzeptuell sind die Komponenten ...
Sie sind wie JavaScript-Funktionen: Sie akzeptieren Eingaben, die den Namen 'props' haben, und geben Elemente zurück, die beschreiben.
Was auf dem Bildschirm erscheinen sollte.
Props stellt ein Objekt dar, das die Eigenschaften einer Komponente enthält.
Nehmen wir das vorherige Beispiel der Uhr und fügen wir neben der aktuellen Ortszeit eine weitere Uhrenkomponente hinzu.
Die durch die entsprechenden Zeitzonen geht, zeigt die Uhr 6 Stunden voraus.
Die Datei [Link] wird zu:
Funktion App() {
zurückgeben (
<div className="App">
<h1>Aktuelle Uhrzeit</h1>
<Orologio fusoorario = "0"/>
<Orologio fusoorario = "6"/>
</div>
)
}
Wir sehen, dass die Eigenschaft fusoorario als ein Attribut deltag an die Komponente übergeben wird.
Die Datei [Link] wird:
importiere React von 'react';
Funktion Orologio(props) {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisecondi);
return (
<p> {[Link]()}</p>
)
}
exportiere Standard Orologio;
Die Funktionskomponente erhält die Parameter-Props. Zur aktuellen Zeit in Millisekunden wird die Zeitzone hinzugefügt.
von Props aufgerufen und in Millisekunden konvertiert (* 3600 * 1000).
In untag Komponenten können beliebig viele Props angegeben und dann im komponenten aufgerufen werden.
komm als Parameter immer nur Props) durch [Link].
Das Props-Objekt ist nur lesbar, es kann nicht geändert werden.
KLASSEN UND REQUISITEN
Um in einer Klasse auf die Eigenschaften props zuzugreifen und sie zu nutzen, nehmen wir das Beispiel der Uhr, die in eine Klasse umgewandelt wurde:
Datei [Link]
importiere React aus 'react';
classOrologio erweitert [Link] {
Konstruktor(Props) {
super(props);
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisekunden);
zurückgeben (
<p> {[Link]()}</p>
)
}
}
exportiere standardmäßig Orologio;
Wir können die Klasse entweder mit Component erweitern, indem wir es in React importieren, oder einfach mit
[Link]
Um die Props in der Klasse aufzurufen: wird die Methode constructor() definiert, vor der Methode render(), und darin wird
passaprops, die dann im metodosuper() definiert wird.
Um die Props in der Klasse (im render()-Methode) zu verwenden, verweist man auf sie mit:
[Link]
LO STATUS DER KOMPONENTEN
Nun, um die UI zu aktualisieren, rufen wir [Link]() auf, um die gerenderte Ausgabe zu ändern.
Der Zustand (oder State) ist ein Objekt, in dem die Werte gespeichert werden, die zum Komponente gehören, und jedes Mal, wenn
Der Zustand ändert sich, die Komponente wird neu gerendert (render() wird automatisch aufgerufen).
Der Zustand ist ähnlich wie die Props, aber er ist privat und wird vollständig vom Komponenten kontrolliert.
Um Zustände zu verwalten, sind sie notwendige Komponenten einer Klasse, sodass sie im Komponenten gekapselt werden.
Der Zustand wird mit dem Schlüsselwort state definiert und im Konstruktor() der Klasse initialisiert:
Konstruktor() {
super();
{ ... }
}
Lass uns das Beispiel der Uhr wieder aufgreifen, es fehlt ein grundlegendes Kriterium: dass die Komponente Uhr eingestellt wird
tmer ed aktualisiert seine Benutzeroberfläche jede Sekunde in seinem Inneren. Und dann haben:
[Link](<Uhr/>, [Link]('root'));
Um dies umzusetzen, müssen wir dem Uhrenkomponenten einen „Zustand“ hinzufügen, der wird:
import React von 'react';
klasse Orologio erstreckt sich von [Link] {
Konstruktor(props) {
super(props);
{
neues Datum()
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisecondi);
zurückgeben (
<p> {[Link]()}</p>
)
}
}
exportiere standard Orologio;
Die Methode getTime() ist eine Methode des Date-Objekts, ähnlich wie now(), die die aktuelle Zeit in Millisekunden zurückgibt.
Diese Klasse wird umgeleitet mit
[Link](<App/>, [Link]('root'));
Also kehrt die Uhr momentan statisch zurück (die Sekunden laufen nicht).
LEBENSZYKLUS DER KOMPONENTEN EINER KLASSE
Jede React-Komponente ist durch einen Lebenszyklus gekennzeichnet, in dem wir drei Phasen unterscheiden können:
Initialisierung der Komponente (Mounting)
Aktualisierung der Komponente (Render) über setState() oder den Empfang neuer Props (Aktualisierung)
Entfernung der Komponente (Unmounting)
Eine Komponente führt in ihrem Lebenszyklus einige Methoden in der Reihenfolge aus. Diese Methoden haben die Aufgabe, den Zyklus zu verwalten.
die Lebensdauer einer React-Komponente und beginnen mit 'will', wenn sie ein Ereignis vorangehen, und 'did', wenn sie ihm folgen.
Ereignis.
Wir haben Zugang zu diesen Methoden, die wir verwenden können, um bestimmte Aktionen auszuführen, wenn eine Komponente...
erstellt, aktualisiert oder gelöscht oder sogar entscheiden, ob eine Komponente nachträglich geändert werden muss
Änderung von mindestens einer der Eigenschaften, die in ihrem Objekt State enthalten sind, oder beim Erhalt neuer Props.
Initialisierung einer Komponente (MONTAGE)
- Der Konstruktor ist die erste Methode, die für eine korrekte Initialisierung aufgerufen wird, Werte werden zugewiesen.
Standardmäßig werden alle Eigenschaften über das Objekt defaultProps definiert und das Objekt state wird somit initialisiert.
- Die zweite Methode, die aufgerufen wird, ist componentWillMount(), die aufgerufen wird, bevor die Komponente
werden umgeleitet (Render-Methode).
React empfiehlt, den Konstruktor anstelle dieser Methode für jede Initialisierung zu verwenden.
- render() ist die einzige obligatorische Methode, wenn man eine Komponente definieren möchte. Sie muss mindestens ein React zurückgeben.
Element oder null oder false, wenn wir nichts auf dem Bildschirm für diese Komponente anzeigen wollen. Es muss eine
reine Funktion, darf das Objektpropsostate nicht direkt ändern.
- ComponentDidMount() ist die Methode, die nach der Ausführung von render() aufgerufen wird. Dies ist die Methode, die verwendet werden sollte für
das DOM zu manipulieren oder um Daten von einem Server abzurufen.
Aktualisierung der Komponente (AKTUALISIEREN)
Aktualisierung des Objekts Status
Wenn das Update des Objekts State durchgeführt wird, wird eine Reihe von Methoden in Folge aufgerufen.
-Die erste ist shouldComponentUpdate(), die die Argumente nextProps und nextState erhält.
repräsentieren den nächsten Wert des objektsPropse des objektsState und geben einen booleschen Wert zurück. Wenn falsch, i
Nachfolgende Methoden werden nicht aufgerufen, standardmäßig gibt es true zurück, was die Aktualisierung der Komponente ermöglicht.
Bei jeder Änderung von objStateeProps. Aus diesem Grund kann es verwendet werden, um festzustellen, ob die Komponente muss
Auf dem neuesten Stand mit den kommenden Werten von PropseState bleiben. Innerhalb dieser Methode ist es möglich, die Werte zu vergleichen.
der aktuellen State- und Props-Objekte mit denen von nextState und nextProps, wodurch entschieden werden kann, ob durchgeführt wird
Die Aktualisierung der Komponente.
-SeshouldComponentUpdate() stellt ein true resttuiscetrue dar, wird componentWillUpdate() aufgerufen. In dieser Methode ist es nicht
Einwilligung zur Änderung des Objekts State über [Link](), kann verwendet werden, um die Komponente vorzubereiten
bevor das Update des State-Objekts oder des Props-Objekts erfolgt.
-Nach der Methode render() wird componentDidUpdate() aufgerufen, das verwendet werden kann, um aktualisierte Daten herunterzuladen.
von einem Server oder um im DOM zu arbeiten.
Erhalt neuer Requisiten
Auch im Falle, dass eine Komponente neue Props erhält, werden nahezu die gleichen Methoden aufgerufen.
des Objekts Zustand.
In diesem Fall haben wir eine zusätzliche Methode: ComponentWillReceiveProps(), die während der Phase nicht aufgerufen wird.
Initialisierung einer Komponente, aber später, wenn neue Props an ein
Komponente. Es kann verwendet werden, um das State-Objekt innerhalb einer Komponente zu aktualisieren und zu ändern, wenn die
Die neuen Props, die empfangen wurden, unterscheiden sich von den Eigenschaften des aktuellen Props-Objekts.
Zerstörung einer Komponente (UNMOUNTING)
In der Demontagephase einer Komponente wird die einzige Methode componentWillUnmount() aufgerufen, die ...
wird verwendet, um Operationen wie das Ungültigmachen von möglichen Ereignissen, die in der Funktion componentDidMount() gestartet wurden, durchzuführen und andere
Wartungsarbeiten, die Speicherlecks verhindern.
LIFECYCLE-METHODEN ZU EINER KLASSE HINZUFÜGEN
In unserem Beispiel wollen wireine einstellentmerJedes Mal, wenn die Uhr zum ersten Mal im DOM gerendert wird
(montage). Wir wollen auchstornieren Sie dastmerJedes Mal, wenn das DOM, das von Orologio erzeugt wurde, entfernt wird
(Außermounten).
Die Methode componentDidMount() wird ausgeführt, nachdem die Ausgabe der Komponente im DOM gerendert wurde. Es ist
Ein guter Punkt, um einen Timer einzustellen, und wir implementieren eine Methode namens aktualisiereTemperatur, die aufgerufen wird.
vom KomponentenUhr jede Sekunde:
componentDidMount() {
[Link] = setInterval([Link], 1000);
}
Die Methode aktualisiereZeit wird sein:
() => {
[Link]({
neues Datum()
});
}
Um ein Update des States durchzuführen, verwendet man die Methode setState(), die die Eigenschaften des States erhält, die aktualisiert werden müssen.
aktualisiert. In diesem Fall haben wir die Eigenschaft Zeit, aber wenn es weitere im Objekt [Link] gegeben hätte.
würden nicht in Betracht gezogen werden.
setState() vergleicht die Eigenschaften des Objekts, das es erhält, mit denen von [Link] und wenn sie geändert wurden,
Es wird überschrieben. In unserem Fall wird die Eigenschaft "orario" einfach mit einem neuen, aktuelleren Date() neu definiert.
setState() vergleicht mit dem, was in [Link] ist, und überschreibt es.
Auf diese Weise wird die Uhr jede Sekunde ausgelöst.
Lassen Sie uns zusammenfassen, was passiert und in welcher Reihenfolge die Methoden aufgerufen werden:
1 Wenn<Orologio/>an [Link]() übergeben wird, ruft React den Konstruktor der Komponente auf, die
Initialisieren Sie diesen Zustand mit einem Objekt, das die aktuelle Uhrzeit enthält. Danach wird dieser Zustand aktualisiert.
2 React ruft die Methode render() des Komponenten Orologio auf und erfährt, was angezeigt werden soll.
React kümmert sich um die Aktualisierung des DOM, sodass es mit der Renderausgabe übereinstimmt.
3 Wenn die Ausgabe der Renderisierung von Uhr in den DOM eingefügt wird, ruft React die Methode auf.
componentDidMount(). Darin wird ein Timer eingerichtet, der aktualisiereTempouna einmal pro Sekunde aufruft.
4 Jede Sekunde aktualisiert die Komponente Uhren die Benutzeroberfläche.
invocandosetState() mit einem Objekt, das die neue aktuelle Uhrzeit enthält. Mit dem Aufruf von asetState() wird React
Informiere dich darüber, dass sich der Zustand geändert hat und rufe erneut die Methode render() auf, um zu erfahren, was zu tun ist.
auf dem Bildschirm angezeigt. Diesmal wird [Link] in der Methode render() einen anderen Wert haben und die Ausgabe von
Die Renderisierung wird die aktualisierte Uhrzeit enthalten. React aktualisiert den DOM entsprechend.
Wenn die Komponente Uhr aus dem DOM entfernt werden sollte (UNMOUNTED), würde React die Methode aufrufen
componentWillUnmount()ed ist hier, wo wir den Timer abbrechen müssen, um die Operationen zu befreien.
Komponente, die im DOM demontiert wurde:
componentWillUnmount() {
clearInterval([Link]);
}
VERWENDUNG VON REQUISITEN UND STAAT
Zusammenfassend können wir sagen, dass:
Lostate: ist eine Reihe von Daten, die modifiziert werden und zu einem Update der Komponente führen.
selbst.
Props: stellen unveränderliche Werte dar, für die keine Änderung vorgesehen ist, nützlich für
Das Komponente konfigurieren oder Standardwerte für den Zustand angeben.
VERANSTALTUNGSVERWALTUNG
Die eventReact werden wie für das HTML deklariert, mit dem Unterschied, dass sie eine Syntax haben müssen:
{[Link]}
Nehmen wir das Beispiel der Uhr und fügen einen Knopf hinzu, der die Zeit stoppt und wieder startet.
Es ist notwendig, den Zustand der Komponente zu verwalten, und darin initialisieren wir eine Eigenschaft start: true:
[Link]
neues Datum()
start: true
}
Daher fügen wir im Rückgabewert von render() einen Button-Tag ein:
<button>Stop</button>
Um diesen Button zu nutzen, muss ein Ereignis eingefügt werden, das eine Funktion aufruft:
<button onClick={[Link]}>Stop</button>
Bis jetzt haben wir die Uhr so implementiert, dass sie startet, sobald die Komponente im DOM montiert ist.
den Intervall jede Sekunde in componentDidMount() und wir entfernen ihn in componentWillUnmount().
In diesem Fall muss mit dem Ereignis und der Funktion umgegangen werden, die aufgerufen wird, wenn:
- Die Uhr ist stehen geblieben, sie muss wieder in Gang gesetzt werden;
- Die Uhr ist NICHT angehalten, man muss sie anhalten, indem man sie auseinanderbaut.
Lass uns eine Methode start() erstellen, mit setInterval(), und rufen wir [Link]() in componentDidMount() auf.
Erstellen wir eine Methode stop(), mit clearInterval(), und rufen wir [Link]() in componentWillUnmount() auf.
Wenn man eine Klassenkomponente definiert, ist es üblich, eine Klassenmethode als Ereignis-Handler zu verwenden:
gestTime() {
[Link]((Zustand) => {
[Link] ? [Link]() : [Link]();
![Link] //staat entgegen
})
}
setState() empfängt eine Funktion, die den vorherigen Zustand als Parameter erhält und den entgegengesetzten Zustand zurückgibt. Zuerst
Überprüfen Sie, ob der Status 'start' ist, und rufen Sie die Methode stop() auf, um die Uhr anzuhalten, andernfalls rufen Sie die Methode start() auf, um sie zu starten.
Uhr zurücksetzen.
Bindung
Die vorherige Methode führt jedoch in dieser Form zu einem FEHLER, da setState() nicht gelesen werden kann. Das liegt daran, dass
In JavaScript sind die Methoden der Klassen nichtassoziierendi default. Im Methode gestTime gehört this zu der Methode
Dasselbe, aber es wird nicht auf die Klasse verwiesen, also muss das Binding erfolgen, das heißt, die Methode muss mit der Klasse verbunden werden.
Die Bindung erfolgt über den Konstruktor() mit:
[Link] = [Link](this)
In unserem Fall:
[Link] = [Link](this);
Wenn wir jedoch viele Methoden haben, müssen wir dies für jede Methode im constructor() schreiben. Eine andere gleichwertige Möglichkeit.
steht darin, die Methode als Pfeilfunktion zu deklarieren:
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
Das liegt daran, dass Arrow-Funktionen nicht das this implementieren, sodass in diesem Fall das this auf die Klasse verweist.
Wenn wir einen dynamischen Button wollen, der sich basierend auf dem Zustand ändert:
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
Die Klasse Uhr wird letztendlich sein:
importiere React aus 'react';
class Orologio extends [Link] {
Konstruktor(props) {
super(props);
[Link]
neues Datum()
start: true
}
}
render() {
const oraMillisecondi = [Link]() + [Link] * 3600 * 1000;
const ora = new Date(oraMillisekunden);
zurückgeben (
<p>In {[Link]} {[Link]()} </p>
<button onClick = {[Link]}>{[Link] ? 'STOP' : 'START'}</button>
</p>
)
}
() => {
[Link]( {
neues Datum()
});
}
() => {
[Link]((state) => {
[Link] ? [Link]() : [Link]();
![Link]
})
}
start(){
[Link] = setInterval([Link], 1000);
}
stop(){
clearInterval([Link]);
}
componentDidMount() {
[Link]();
}
componentWillUnmount() {
[Link]();
}
exportiere standard Orologio;
ARRAY VON ELEMENTEN
Angesichts des Beispiels von [Link]:
. . .
<Orologio paese = 'Italia' fusoorario = '0'/>
<Orologio paese = 'Usa' fusoorario = '-6'/>
. . .
Wir sehen, dass es nur zwei Elemente<Orologio> enthält, aber es kann vorkommen, dass in einer Komponente viele Elemente sind.
dello stessotpo e per questo possono essere gesttin array di elemented essere implementatdinamicamente.
In der Klasse oder außerhalb davon deklarieren wir eine konstante Array-Variable und fügen darin so viele Elemente ein, wie nötig.
Es sind die Elemente, die die Eigenschaften der Elemente enthalten werden. Für unser Beispiel:
const clocks = [
{
Italien
0
},
{
USA
-6
}
]
Um die Daten aus dem Array abzurufen und die Elemente <Orologio> dynamisch zu implementieren, erstellen wir im Komponenten
Klassifiziere eine Methode, die es verwaltet und die Anzahl der Elemente <Orologio> zurückgibt, wie viele Elemente vorhanden sind.
getUhren(){
return [Link]((uhr) => {
return <Orologio land = {[Link]} zeitzone = {[Link]}/>
})
}
Wir verwenden die Methode map(), die eine Funktion auf jedes Element anwendet, das sie vom Array erhält, das sie aufruft (clocks).
Dann rufen wir die Methode an dem Punkt auf, an dem die Elemente aufgezählt werden müssen, mit:
[Link]()
Auf diese Weise gibt die Methode getOrologi() einen Fehler zurück, da in React für jedes Element eines Arrays etwas erwartet wird.
ein einzigartiger Wert Schlüssel. So etwas wie eine ID, die React verwendet, um die Elemente zu unterscheiden, also können wir einen ID-Wert hinzufügen.
einzigartig oder einen Wert verwenden, von dem wir sicher sind, dass er für jedes Element einzigartig ist. In unserem Beispiel können wir verwenden
land
getOrologi(){
return [Link]((Uhr) => {
return <Orologiokey = {[Link]}paese = {[Link]} fusoorario = {[Link]}/>
})
}
Die Datei [Link] wird am Ende sein:
importiere React von 'react';
import Orologio von './Orologio';
const clocks = [
{
Italien
0
},
{
USA
fusoorario: -6
}
]
Klasse App erstreckt sich über [Link] {
getUhren(){
return [Link]((uhr) => {
return <Orologio key = {[Link]} paese = {[Link]} fusoorario = {[Link]}/>
})
}
render() {
Rückgabe (
<div className="App">
<h1>Aktuelle Uhrzeit</h1>
{[Link]()}
</div>
)
}
}
exportiere standardmäßig App;
REACT ROUTER
React Router ist eine Bibliothek, die es ermöglicht, React-Anwendungen mit mehreren Seiten zu erstellen, in denen der Übergang von einer
Die Seite und die andere geschieht dynamisch über Javascript, ohne die Seite jedes Mal neu laden zu müssen.
In React ist der Router nichts anderes als eine Komponente, die andere Komponenten routet.
npm install --save react-router-dom
Nelfile [Link] importiamo due Komponenten: BrowserRouter, den wir zur Vereinfachung Router nennen, und Route.
import {BrowserRouter as Router, Route} von 'react-router-dom';
Wir umhüllen die gesamte Komponente mit dem Element <Router> und einer Reihe von <Route>-Elementen, die in einem <div> eingeschlossen sind.
Die Glielemente <Route> haben ein Attribut path, das angibt, für welche URL eine bestimmte Komponente angezeigt werden soll.
<Router>
<div>
<Route exact path="/" component={Home} />
<Route strict path="/team/" render={() => <h1>Team</h1>} />
</div>
</Router>
In der Pratca-Route wird die URL gelesen und basierend darauf wird die Komponente umgeleitet.
Im ersten Element <Route> haben wir die Eigenschaft exact verwendet, um anzugeben, dass die Komponente angezeigt werden soll.
Zuhause nur, wenn der Wert des Attributs path gleich dem Wert der Eigenschaft [Link] ist. Wenn wir nicht hätten
react-router hätte das Home-Komponente auch für den Pfad "/team" angezeigt.
Im zweiten Element <Route> haben wir stattdessen das Attribut 'strict' verwendet, das sicherstellt, dass es nur einen Treffer gibt, wenn
[Link] ist genau gleich "\/team\/", nämlich nur wenn der abschließende Schrägstrich vorhanden ist.
<Route> kann auch andere Attribute empfangen: component, render, children. In allen drei Fällen werden sie an das
Komponente oder bei den Funktionen (render und children) die Eigenschaften history, location und match, die Objekte sind.
Die Eigenschaft 'components' gibt an, welche Komponente angezeigt werden soll, wenn ein Match vorliegt.
(Komponente, die für einen bestimmten Wert von [Link] angezeigt werden soll).
Wir können stattdessen die Proprenderse verwenden, wenn wir möchten, dass eine bestimmte Funktion aufgerufen wird.
Die Propchildren erhält auch eine Funktion, die jedoch immer ausgeführt wird.
Die Komponenten <Link> und <NavLink>
Definiere die Routen mit Route, lassen Sie uns sehen, wie man Links innerhalb der Anwendung hinzufügt, um von einer Seite zur anderen zu wechseln.
Um die Seite ohne Refresh des Browsers zu aktualisieren, verwenden Sie stattdessen die Tags <a href=""> (die Aufrufe durchführen.
AL-Server, die Seite neu ladend), des HTML, verwenden wir zwei Komponenten, Link und NavLink.
Die Komponente Link akzeptiert zwei Attribute: toche kann eine Zeichenfolge oder ein Objekt sein. Um zu verstehen wie
Das letzte funktioniert, wir müssen berücksichtigen, dass React Router den Verlauf der Seiten im Speicher behält.
visualisieren. Stellen wir uns die Chronologie wie einen Stapel vor, jedes Mal, wenn man eine Seite besucht, wird eine neue hinzugefügt.
Element zur Stapel. Wenn das Attribut replacedel des Link-Komponenten gleich true ist, wird das letzte Element des
pila anstelle von einem neuen hinzuzufügen.
importieren React, {Komponente} von 'react';
import {Link} from 'react-router-dom';
Klasse Team erweitert Komponente {
render() {
return (
<div>
Team
<Link to="/stagione">Saison 2017</Link>
</div>
);
}
}
Team exportieren
Innerhalb der Komponente Team fügen wir einen Link ein, der zur Adresse localhost:3000/stagionee führt und nicht entfernt wird.
Die Seite des Browsers neu laden.
NavLink ist eine besondere Version von Link. Es kann Eigenschaften wie activeClassName und activeStyle empfangen.
actveClassName="nomeClasse" da uno stile quando ein Link aktiv ist.
ConactveStyle können wir ein Objekt übergeben, durch das wir den Stil spezifizieren können, der angewendet wird.
alle NavLink-Elemente, wenn die aktuelle URL dem Wert des Attributs 'to' entspricht, d. h. wenn [Link] ist
gleich dem im Attribut 'to' angegebenen Pfad.
importiere React von 'react';
import {NavLink} von 'react-router-dom';
const Nav = () => (
<nav>
<NavLink exact activeClassName="current" to="/">Startseite</NavLink>
<NavLink activeClassName="current" to="/team/">Team</NavLink>
<NavLink activeStyle={{color: 'green'}} to="/stagione/">Saison</NavLink>
</nav>
);
exportiere standard Nav;
REDUX
React ist eine Ansichtsbibliothek, und es ist nicht die Aufgabe von React, den Zustand speziell zu verwalten.
Redux ist ein Container für vorhersehbaren Zustand für JavaScript-Anwendungen. In der Praxis ist es eine Architektur für die
Eine klare und gut definierte Vorgehensweise zur Verwaltung des Status. Redux kann mit jeder Bibliothek verbunden werden.
JavaScript und nicht nur React. Redux ermöglicht es, den Zustand der Anwendung von React zu trennen.
STATUS EINER ANWENDUNG
Der Zustand ist die Gesamtheit der inneren Bedingungen oder Informationen in einem bestimmten Moment, die das Ergebnis der
Interaktionen mit der Außenwelt. Die Anwendung hat einen Anfangszustand, und jede Benutzerinteraktion löst aus
Eine Aktion, die den Status aktualisiert. Wenn der Status aktualisiert wird, wird die Seite angezeigt.
Die Speicherung der Anwendungsdaten im Zustand einer Komponente ist in Ordnung, wenn man über ...
eine grundlegende React-Anwendung mit wenigen Komponenten, aber die meisten realen Anwendungen werden viele mehr haben
Merkmale und Komponenten. Wenn die Anzahl der Ebenen in der Hierarchie der Komponenten steigt, die Verwaltung des
Der Zustand wird problematisch und deshalb wird Redux verwendet.
Häufig muss eine Anwendung verwalten:
dataprovenientdal Server e memorizzatin una Cache locale;
datgeneratdall’applicazione stessa che devono essere inviatal server;
Datensätze müssen lokal bleiben, um beispielsweise die aktuelle Situation darzustellen.
der Benutzeroberfläche oder den vom Benutzer äußerten Präferenzen.
Das Management dieser Daten ist komplex aufgrund der Menge und der Tatsache, dass diese Daten aus verschiedenen Gründen variieren können.
Wenn wir dann berücksichtigen, dass diese Änderungen asynchron erfolgen können, wird es noch komplexer und ist
Es ist einfach, die Kontrolle über die Entwicklung des Staates zu verlieren.
REINE FUNKTION
Eine reine Funktion ist eine normale Funktion mit zwei Eigenschaften:
1 Gegeben einer Menge von Eingaben muss die Funktion immer dasselbe Ausgabe zurückgeben.
2 Keine Nebenwirkungen.
Zum Beispiel ist eine Funktion die, die die Summe von zwei Zahlen zurückgibt.
Reine Funktionen geben eine stabile Ausgabe und sind deterministisch. Eine Funktion wird unrein, wenn sie ausführt
etwas anderes als seinen Rückgabewert zu berechnen.
DIE DREI PRINZIPIEN
Die Komplexität im Umgang mit dem Zustand einer Anwendung liegt in der Änderbarkeit und Asynchronität. Die Lösung von
Redux zielt darauf ab, diese beiden Aspekte zu beseitigen, basierend auf drei grundlegenden Prinzipien:
1 Es gibt eine einzige Quelle der Wahrheit
Der Zustand der gesamten Anwendung wird in einem einzigen Objekt gespeichert.
2 Der Status ist schreibgeschützt.
Es ist nicht möglich, die im Anwendungszustand gespeicherten Informationen direkt zu ändern; nur
durch ausdrückliche Maßnahmen
3 Änderungen am Zustand sollten mit reinen Funktionen vorgenommen werden.
Der aktuelle Zustand wird durch einen neuen Zustand ersetzt, der ausschließlich auf Funktionen basiert.
Aktion und zum vorherigen Zustand
Die Anwendung dieser Prinzipien definiert die Architektur von Redux und die Einschränkungen, die eine Anwendung einhalten muss.
intende gestre lo stato secondo questo approccio.
VORTEILE
Mit Redux sind die Änderungen des Zustands einer Anwendung analysierbar und reproduzierbar, und es ist einfacher.
verstehen, wie man zu einer bestimmten Situation gekommen ist
Redux zwingt dazu, den Code gemäß einem spezifischen Muster zu organisieren, was indirekt eine definiert.
Standard der Codierung.
Es ist möglich, einen Anfangszustand zu definieren und die Anwendung von diesem Zustand aus zu starten, um dies zu erleichtern.
Rendering von JavaScript-Anwendungen vom Server aus
Es ist möglich, den Statusübergang sowohl für Debugging-Zwecke als auch zur Implementierung von Aktionen nachverfolgen.
INSTALLATION
Wenn wir [Link] verwenden, können wir Redux einfach mit dem folgenden Befehl installieren:
npm install --save redux
Der npm-Paketmanager lädt das Reduxe-Paket herunter und macht es verfügbar, um in der Anwendung importiert zu werden.
Wenn wir keine [Link]-Entwicklungsumgebung nutzen, können wir die Bibliothek immer [Link] von
distFordernvom npm-Paket und das Einfügen eines Verweises innerhalb der HTML-Seite der Anwendung
<script src="[Link]"></script>
In diesem Fall wird Redux als eine globale Variable [Link] zugänglich sein.
KOMPONENTEN DES BEHÄLTERS UND PRÄSENTATIONSKOMPONENTEN
Es ist nützlich, die Architektur der Komponenten in zwei Kategorien für React-Anwendungen zu unterteilen: Container-Komponenten
(smart) e Komponenten der Präsentation(dumb).
Die Container-Komponente kümmert sich darum, wie die Dinge funktionieren, während sich die Präsentationskomponenten darum kümmern.
Wie die Dinge erscheinen.
Icomponent smartgestscono lo stato e poi lo passano ai componentdumb. Si prendono cura di effetuare le
API-Aufrufe tätigen, Daten aus der Datensquelle abrufen, die Daten verarbeiten und dann den Status setzen.
Icomponent empfangen die Props und geben die Darstellung der Benutzeroberfläche zurück.
Wenn Sie ein neues Component schreiben, ist es nicht immer klar, wo Sie den Zustand platzieren sollen. Sie könnten lassen
dass der Zustand Teil eines Containers ist, der ein unmittelbarer Elternteil der Präsentationskomponente ist. Besser
Könnt ihr den Status weiter oben in der Hierarchie verschieben, damit der Status für die Komponenten zugänglich ist?
präsentation multipl.
Wenn die App wächst, ist der Zustand überall verstreut. Wenn eine Komponente auf den Zustand zugreifen muss, den
hat nicht sofort Zugriff, versuchen Sie, den Status bis zum nächstgelegenen übergeordneten Element zu erhöhen.
Es ist eine gute Idee, einen Komponente ganz oben das globale Zustand zu verwalten und dann weiterzugeben.
Abwärts tut. Alle anderen Komponenten können die benötigten Props abonnieren und den Rest ignorieren.
Potetetrataretuti-Komponente von React, die dumm ist, damit sie sich nur auf die Sichtseite der Dinge konzentrieren kann.
ALLGEMEINE ARCHITEKTUR VON REDUX
das architektonische Schema, das durch das Redux-Modell vorgeschlagen wird
Der allgemeine Ablauf zur Änderung des aktuellen Status einer Anwendung folgt den folgenden Schritten:
1 wird eine Aktion identifiziert, möglicherweise erstellt durch einen Aktionsgenerator
2 taleActon wird an das Store über einen Dispatch gesendet
3 Innerhalb des Stores ersetzt ein Reducer den aktuellen Zustand durch den eventuell neu identifizierten Zustand.
basierend auf der Analyse von Acton
Geschäft
Der Store ist ein großes JavaScript-Objekt, das den aktuellen Zustand der Anwendung darstellt, und jedes Mal, wenn der Zustand
es wird aktualisiert, die Ansicht wird neu angezeigt.
Der gesamte Zustand der Anwendung befindet sich im Objektstore.
Der Store hat drei Methoden, um mit dem Rest der Architektur zu kommunizieren. Diese sind:
[Link]() um auf den aktuellen Zustand des Anwendungsbaums zuzugreifen.
[Link](action) um eine Statusänderung basierend auf einer Aktion auszulösen.
[Link](listener), um Änderungen im Zustand zu hören. Es wird jedes Mal aufgerufen, wenn
Eine Aktion wird gesendet.
Einen Shop erstellen.
Redux hat eine Methode createStore, um ein neues Store zu erstellen.
Er erhält als Parameter einen Reducer und optional den anfänglichen Zustand des Stores.
[Link]
import { createStore } from "redux";
const initialState = 0 //initialState (optional).
const store = createStore(reducer, initialState);
Jetzt werden wir Änderungen im Store anhören und dann mit [Link]() den aktuellen Zustand des Stores ausgeben.
[Link]( () => {
[Link]("Der Zustand hat sich geändert" + [Link]());
})
Um den Redux-Store zu aktualisieren, werden Aktionen verwendet.
Acton/Acton Creators
Leacton sono semplici oggetti JavaScript che inviano informazioni dall'applicazione allo Store. Wenn Sie einen
Ein einfacher Zähler mit einer Erhöhungstaste, durch Drücken wird eine Aktion ausgelöst, die ähnlich ist
das hier:
{
INCREMENT
1
}
Der Zustand des Stores ändert sich nur als Reaktion auf eine Aktion. Jede Aktion muss eine Eigenschaft vom Typ (type) haben.
Beschreiben Sie, was die Aktion beabsichtigt zu tun.
Es wird empfohlen, die Aktion klein zu halten, da sie die Mindestmenge an Informationen darstellt, die erforderlich sind, um
Den Zustand der Anwendung verändern.
Im vorherigen Beispiel ist die Eigenschaft type auf "INCREMENT" eingestellt, und eine weitere Eigenschaft ist enthalten.
Payload, die in etwas Bedeutungsvolleres umbenannt werden könnte.
Um die Aktion an den Store zu senden, verwenden Sie [Link](acton):
[Link]({type: "ERHÖHEN", payload: 1});
Während des Schreibens von Redux-Code werden normalerweise die Aktionen nicht direkt verwendet, sondern sie werden aufgerufen.
Funktionen, die die als Action Creator bezeichneten Aktionen zurückgeben.
Der Aktionscreator der vorherigen Increment-Aktion wird sein:
const incrementCount = (count) => {
rückgabe {
INCREMENT
Zählung
}
}
Um den Status des Zählers zu aktualisieren, müssen Sie die Aktion incrementCount wie folgt senden:
[Link](incrementCount(1));
Jetzt benötigen wir die Reducer, um die von der Aktion bereitgestellten Informationen zu konvertieren und den Zustand des Stores zu transformieren.
Reducer
Der Reducer (Regler) verwendet die Informationen der Aktionen, um den Zustand effektiv zu aktualisieren.
Ein Reducer sollte eine reine Funktion sein. Gegeben einen Satz von Eingaben, muss er immer die gleiche Ausgabe liefern.
Außerdem sollte er nichts weiter tun.
der Reduzierer für unseren Zähler.
const reducer = (state = initialState, action) => {
switch ([Link]) {
Fall "INCREMENT":
return state + [Link]
Standard
Rückgabe des Zustands
}
}
Der Reducer erhält zwei Argumente: den Zustand und die Aktion, und gibt einen neuen Zustand zurück.
(vorherigerZustand, aktion) => neuerZustand
Der Zustand akzeptiert einen vordefinierten Wert, initialState, der nur verwendet wird, wenn der Wert des Zustands ist
undefiniert. Andernfalls wird der tatsächliche Wert des Staates einbehalten.
Wir verwenden den Schalter, um die richtige Aktion auszuwählen.
Fügen wir einen Fall für DECREMENT hinzu:
const reducer = (zustand = anfangszustand, aktion) => {
switch ([Link]) {
Fall "INCREMENT":
return state + [Link]
Fall "DECREMENT":
Gib den Zustand - Aktionspayload zurück
standardmäßig
Rückgabestatus
}
}
Hier ist der Action Creator
const decrementCount = (count) => {
zurückgeben {
DEKREMENT
Zähler
}
}
Schließlich wird es an den Store gesendet.
[Link](incrementCount(4)); //4
[Link](decrementCount(2)); //2
REDUX UND REACT
Wir haben gesehen, dass wir mit Redux die Aktionen senden und den neuen Zustand mit [Link]() abrufen.
[Link]().
Jetzt werden wir lernen, wie man einen Redux-Store mit React verbindet, mit der Bibliothek react-redux werden wir sehen
kommen:
1 die Containerkomponenten und die Präsentationskomponenten organisieren
Wie man React und Redux mit connect() verbindet
3Wie man Aktionen mit mapDispatchToProps versendet
Wie man den Zustand mit mapStateToProps wiederherstellt
1) Smarte Komponenten und dumme Komponenten
Ein bereits früher angesprochenes Konzept, die Komponenten in zwei separate Ordner zu unterteilen, einen
denominatocontainerse l'altrocomponents. Der Vorteil dieses Ansatzes besteht darin, dass die Logik getrennt ist.
vom Blickwinkel.
Die Smart-Komponenten behandeln den logischen Teil und übermitteln die erforderlichen Daten für das Rendering der
komponenten dumm wie props.
Als erster Schritt in einem Projekt können wir beginnen, den gesamten grafischen Teil von React zu erstellen, das heißt die
dumb Komponenten und anschließend daraus die smart Komponenten erstellen, um die Logik zu verwalten.
2) Die Bibliothek react-redux
Um React mit Redux zu verbinden, ist es notwendig, eine zusätzliche Bibliothek namens react-redux zu installieren.
npm installieren --save react-redux
Die Bibliothek exportiert nur zwei APIs, die man sich merken muss: eine Komponente <Provider/> und eine Funktion von
höhere Ordnung verbinden().
3) Die Komponente Provider
Die gesamte Anwendung muss auf den Store zugreifen können. Redux muss den Store zugänglich machen.
Geben Sie den gesamten Baum der React-Komponente vom Hauptkomponenten aus an. Der Provider ermöglicht es, dass
Die Daten von oben nach unten übergeben und den Status zu allen Komponenten hinzufügen.
import { Provider } von 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provider>,
[Link]('root')
)
Wir wickeln den Anbieter um die Komponente der App, damit die Nachkommen der Komponente Zugriff haben.
ai dati.
4) Die Methode connect()
Das Store für die Anwendung bereitgestellt, müssen wir React mit dem Store verbinden. Der einzige
Die Art und Weise, wie man mit dem Store kommunizieren kann, besteht darin, Aktionen zu senden und den Status abzurufen.
connect() ermöglicht es, React mit dem Store zu verbinden, und dies geschieht mit Hilfe von zwei Methoden:
mapDispatchToProps, mapStateToProps, um nur die Dispatchs und den Teil des Stores zu mappen und zu übergeben.
interessati al componente dumb React come props.
const mapStateToProps = state => { const mapDispatchToProps = dispatch => {
return { return {
[Link] () => dispatch(actionCreator())
} }
} }
exportiere standardmäßig verbinden(
mapStateToProps
mapDispatchToProps
)(KomponentenDump)
mapStateToProps und mapDispatchToProps geben beide ein Objekt zurück und der Schlüssel dieses Objekts
wird ein Prop des verbundenen Komponenten.
- MapStateToProps: verbindet einen Teil des Redux-Zustands mit den Props einer Komponente
React. Auf diese Weise hat ein angeschlossenes React-Komponente Zugriff auf den genauen Teil des Stores.
dessen sie bedarf.
- mapDispatchToProps ist etwas Ähnliches, aber für die Aktionen: es verbindet die Redux-Aktionen mit den Props.
Reagieren. In diesem Modul wird das verbundene React-Komponente in der Lage sein, Nachrichten zu senden an
Laden.
Daher ist es möglich, connect() zu verwenden für:
1 das Store abonnieren und seinen Zustand an die Prop mappen
2 Aktionen senden und die Dispatch-Callbacks in den Props mappen
Sobald die Anwendung mit Redux verbunden ist, kann [Link] verwendet werden, um auf den aktuellen Zustand zuzugreifen.
und auch die Aktionen zu versenden.
BEISPIEL REACT-REDUX: RUBRIK
Lass uns nun ein konkretes Beispiel für eine Telefonbuchanwendung mit den folgenden Eigenschaften ansehen:
. Alle Kontakte anzeigen
. einen neuen Kontakt hinzufügen
. Kontakt löschen
1) Verzeichnisstruktur
Erstellen Sie ein neues Projekt mit Create React App, installieren Sie Redux, Redux hat keine Ahnung, wie man die strukturieren kann.
Anwendung, daher ist der nächste Schritt, einige leere Verzeichnisse hinzuzufügen, um Redux zu organisieren:
Komponenten: Container- und dumme Komponenten in React, die nicht davon abhängen, ob Redux verwendet wird oder nicht.
containers:conterrá und componentsmart in React, die Aktionen an den Redux-Store senden. Die Assoziation zwischen
Redux und React werden hier stattfinden.
actons: die Acton-Schöpfer enthalten.
reducers: Jeder Reducer hat eine einzelne Datei, dieses Verzeichnis wird die gesamte Logik der Reducer enthalten.
store: enthält die Logik zur Initialisierung des Zustands und zur Konfiguration des Stores.
Dieses Strukturmodell heißt detoRailse und wäre gut für kleine und mittlere Anwendungen geeignet. Wenn die Anwendung wächst, kann
Es wäre bequemer, das Modellschema zu betrachten, bei dem jede Funktionalität ein eigenes Verzeichnis hat, und alles
Was diese Funktionalität betrifft, wird es innerhalb davon sein.
2) Erstellen Sie den Teil der Ansicht mit den Komponenten-Dump
Wir können ein Projekt starten, indem wir den React-Teil der Ansicht mit den Component Dumps erstellen. Wir können verwenden
Bootstrap, um die Arbeit zu beschleunigen.
In diesem Projekt erstellen wir eine Anwendung mit einem Menü mit zwei Punkten, die mit React Router ohne Anzeige angezeigt wird.
Lade die Seiten der Kontaktliste neu, die mit dem Formular zum Hinzufügen eines neuen Kontakts.
3)Initialisierung des Stores
Es ist eine gute Praxis, sofort eine Skizze des Zustands, in einem einzigen Objekt, mit Stift und Papier zu entwerfen.
Eigenschaften, die benötigt werden.
Danach erstellen wir im Verzeichnis Store die Datei [Link] und initialisieren den Store:
const initialState = {
contactList: [],
newContact: {
name
email
tel
}
}
exportiere standardmäßig initialState;
Der Store hat zwei Eigenschaften: [Link] ist ein Array von Kontakten, während renewContact ein
Ein Objekt, das vorübergehend die Kontaktdaten enthalten wird, die über das Kontaktformular hinzugefügt werden.
4) Erstellung des Stores
Um den Store zu erstellen, importieren wir createStore aus redux in der Datei [Link]:
import { createStore } from 'redux'
dies erstellt den Speicher, der den Zustandbaum enthalten wird.
Lass uns den Store erstellen mit:
conststore = createStore(rootReducer, initaliState);
Wir stellen fest, dass es zwei Parameter erhält: den rootReducer und den anfänglichen Zustand initialState (optional)
Importiere das vorher erstellte initialState.
Reducer multipliziere combineReducers()
Es ist wichtig zu beachten, dass die Reducer-Funktionen das State-Objekt nicht ändern, sondern das State-Objekt als Eingabe erhalten.
Ein Reducer muss immer einen vordefinierten Wert für seinen Zustand haben.
stato, und dass es immer etwas zurückgeben muss (Standard; Rückgabestatus).
Es wird immer empfohlen, für jeden Teil des State-Objekts eine Reducer-Funktion zu erstellen und diese dann zu kombinieren.
Funktionen in einem einzigen Reducer zusammenfassen, sie statt in einem einzigen trennen, um die Lesbarkeit des Codes zu verbessern.
Redux hat aus diesem Grund eine Methode namenscombineReducers()die es ermöglicht, mehrere Reducer zu erstellen und sie dann zu kombinieren
in einer einzigen Funktion (rootReducer).
Esso erhält als Argument das Objekt, das die Eigenschaften der Reducer hat, die wir erstellen werden:
export default combineReducers(
{
Reducer
}
);
Die Reducer, die erstellt werden, müssen die Eigenschaften von combineReducers werden und müssen daher importiert werden.
fügen Sie denselben Namen der Eigenschaft des betreffenden Stücks des Staates ein
5) Erstellung des rootReducer
Dies wird der Haupt-Reducer sein, der alle Reducer der Anwendung in einem einzigen Reducer vereint.
Im Verzeichnis reducers erstellen wir eine Datei [Link] mit combineReducers, die leer ist und die Reducer vereint.
wir werden später erstellen.
import { combineReducers } from 'redux'
exportiere standardmäßig kombiniereReducer(
{
}
)
Und einmal erstellt, importieren wir es in die Datei [Link], um es an createStore zu übergeben.
6) Mache den globalen Store mit Provider verfügbar
Ein Geschäft wurde erstellt, es muss in der gesamten Anwendung und in allen Dateien verfügbar und zugänglich sein. Um dies zu tun und es zu ermöglichen,
globale Lager
Wir importieren die Komponente Provider von React Redux und wickeln die Komponente App damit ein, indem wir ihm das Store übergeben.
import { Provider } from 'react-redux'
[Link](
<Provider store={store}>
<App />
</Provider>,
[Link]('root')
)
7) Entfalten Sie die Logik und die Funktionsweise
An diesem Punkt analysieren wir die Anwendung, um die Logik und die Funktionsweise zu verstehen.
Komponentendumps benötigen einen Zugang zum Store, über den Componentsmart, und die entsprechenden Erstellungen.
Aktionen und Reducer.
Kontakte des Stores anzeigen
Um die Kontakte im Store anzuzeigen, erstellen wir einen Container namens contactListSmart, wo mit
mapStateToProps mappen wir den Teil des Zustands contactsList mit demselben Namen contactsList
const mapStateToProps = (zustand) => {
Rückgabe {
teilnehmerListe
}
}
nachdem mit
export default connect(mapStateToProps, null)(KontaktListe)
Wir übergeben contactsLists als Props an die dumme Komponente ContactList (importiert).
Der Container muss exportiert werden, da er dann importiert und in [Link] anstelle des verwendet werden muss.
dummes Komponent ContactsList, um angezeigt zu werden.
Auf diese Weise erhält die Komponente ContactsList als Props nur den Teil des States, den sie benötigt.
Neuen Kontakt hinzufügen
Erstelle die Komponente mit dem Formular zur Hinzufügung des neuen Kontakts.
localStorage und sessionStorage: DATEN IM BROWSER SPEICHERN
Ein Element, das es uns ermöglicht, im Browser relevante Informationen für das Surfen auf der Website zu speichern, ist
icookies. Aber das größte Problem mit den cookiesen ist, dass der Browser, um sich an die gespeicherten Informationen zu erinnern, muss
Statusnachrichten mit dem Server bei jeder neuen Seite, die der Benutzer besucht, austauschen; diese Funktion, insbesondere
Wenn es an Orten wie diesen möglich ist, Reisen oder Unterkünfte zu buchen, führt dies zu einer großen Verschwendung von Ressourcen, die hätten genutzt werden können.
verwendet, um die Reaktionszeit von Websites zu beschleunigen.
Dank des Aufkommens von HTML5 wurden zwei Objekte eingeführt, die es uns ermöglichen, die vom Benutzer übergebenen Daten zu speichern.
innerhalb ihrer Browser: sessionStorage und localStorage.
Beide teilen die gleichen Eigenschaften und Funktionen, die Unterschiede zwischen den beiden sind, dass: der sessionStorage alle verlieren wird.
datquando das Fenster des Browsers geschlossen wird.
Während alles, was wir innerhalb eines Objekts im localStorage speichern, im Browser gespeichert bleibt und
es wird auch beim Ausschalten des Computers bestehen bleiben.
Innerhalb dieses Objekts können wir nur Textzeichenfolgen speichern, genau wie bei Cookies, aber indem wir weitergehen
Die Nutzung von localStorage und sessionStorage erfüllt die Anforderungen, es ist keine Kommunikation erforderlich.
Server, da die Webseite direkt den Browser abfragen kann.
Wir betrachten spezifisch localStorage, aber es wird dasselbe für sessionStorage sein.
Um einen Datensatz zu speichern, verwenden Sie die Funktion setItem("index", "wert"):
setItem() akzeptiert zwei Parameter. Der erste ist der Index und ermöglicht es, später den Wert aufzurufen, der
Wir haben festgelegt, der zweite ist der tatsächliche Wert, den wir im Browser speichern möchten.
Questdaten können dann im Browser-Inspektor angezeigt werden.
Salvati dat, perrecuperarlisi usa la funzione getItem(“indice”):
Um einen gespeicherten Wert zu entfernen, verwendet man die Funktion removeItem(indice).
Weitere nützliche Parameter für die Arbeit mit diesem Objekttyp sind:
• Länge - wird es ermöglichen zu erfahren, wie viele Elemente darin enthalten sind, sein Index beginnt bei 0 wie
für die Arrays;
• key( index ) - durch Eingabe des numerischen Wertes des Index erhalten wir den in dieser Position gespeicherten Wert;
MIttelschicht
Bisher haben wir gesehen, dass ilcreateStorericeve zwei Parameter sind, die rootReducer und den anfänglichen Zustand sind. Es kann
andere Parameter erhalten, die es ermöglichen, die Aktionen des Stores (dispatch, subscribe) anzupassen oder zu ersetzen
getState).
Um das Verhalten eines Dispatchs anzupassen, verwendet man Middleware, die eine Funktion ist, die zwischen der
Dispatch ist eine Aktion und deren Verarbeitung durch den Reducer. Praktisch fängt es die Aktionen ab und nimmt einige ...
Entscheidungen basierend auf Parametern: Er kann die Aktionen ohne Änderungen an den Reducer weitergeben oder selbst eine Aktion dispatchen.
Wir sehen, dass die Aktion, die von [Link]() ausgelöst wird, durch eine Reihe von Middleware läuft. Um sicherzustellen, dass die Aktion ...
wird an das nächste Middleware oder an den Reducer im Fall des letzten Middleware weitergeleitet, muss die Funktion aufgerufen werden.
next(acton) die von Redux an jedes Middleware übergeben wird.
In Redux sind sie besonders wichtig, weil sie den Punkt der Anwendung darstellen, an dem man ...
asynchrone Aktionen wie: API-Aufrufe, Timeout usw.
Eine wichtige Eigenschaft, wie im Bild zu sehen ist, ist, dass mehrere Middleware in Reihe geschaltet werden können.
und führt die Reihenfolge nacheinander aus.
Bei einem gestapelten Middleware-Chain wird bei einer Dispatch praktisch die erste aufgerufen.
Middleware. Im Allgemeinen wird ein Middleware überprüfen, ob die Aktion vom spezifischen Typ ist, der sie interessiert, ähnlich wie
Würde einen Reducer machen. Wenn es vom richtigen Typ ist, könnte es eine benutzerdefinierte Logik ausführen, andernfalls wird die Aktion weitergeleitet.
nächster Middleware im Stapel.
Im Gegensatz zu einem Reducer kann ein Middleware Nebenwirkungen enthalten, einschließlich Pausen und anderer Logik.
asynchrone
Verwendung von Middleware
1) Definiere die Middleware-Funktion
Um Middleware in Redux zu verwenden, muss zunächst die Middleware-Funktion definiert werden, die eine bestimmte
Segnatura.
// Middleware definiert mit Arrow-Funktion
const mioMiddleware = store => next => action => {
// Körper der Middleware-Funktion
}
// oder auf äquivalente Weise
Funktion mioMiddleware(store) {
return function (next) {
geben Sie eine Funktion zurück (Aktion) {
// Körper der Middleware-Funktion
};
};
};
Innerhalb des Middleware haben wir Zugriff auf die Action, die durch [Link](action) ausgelöst wird. Wir können die Funktion verwenden.
nächste(acton) um das Acton entlang der Middleware-Kette auszuführen, wird den nächsten Middleware aufrufen, wenn nicht
Wenn die Funktion aufgerufen wird, wird die Aktion nicht an das nächste Middleware übergeben.
Innerhalb jedes Middleware haben wir auch Zugriff auf die Methoden [Link](), um das State-Objekt abzurufen.
corrente und [Link](), was die ursprüngliche Funktion dispatch() ist. Mit dieser Funktion können wir machen
Den gesamten bereits durchlaufenen Middleware-Chain bis zum aktuellen Middleware zurückverfolgen.
2) Die Funktion applyMiddleware() aufrufen
Nachdem wir eines oder mehrere Middleware-Module definiert haben, rufen wir die Funktion applyMiddleware(...middleware) auf, der wir übergeben werden.
komme Thema die erstellten Middleware.
import { applyMiddleware } from 'redux';
Wir werden die Funktion applyMiddleware an createStore übergeben.
const store = createStore(reducer, initialState, applyMiddleware(...middleware));
Zusammenfassend lassen sich die Parameter, die die Reaktion darstellen, jeweils als den aktuellen Zustand und die Handlung, über die wir sprechen, identifizieren.
Wird die Auftragsbearbeitung durchgeführt. Der Parameter next stellt die nächste Middleware in der Pipeline dar, bevor sie ankommt.
Alreducer. In pratica, all’interno di un Middleware können wir den aktuellen Store verwenden, um Aktionen auszuführen.
spezifische Bearbeitungen und dann den Ball an das nächste mögliche Middleware weitergeben.
Lass uns einen konkreten Fall sehen, wie ein Middleware implementiert werden kann, um die Aktion in die Konsole zu schreiben.
intercetata und der neue Status der Anwendung:
const logger = store => next => action => {
[Link]('Aktuelle Aktion: ', action)
let result = next(action)
[Link]('Nächster Zustand: ', [Link]())
returniere Ergebnis
}
In diesem spezifischen Fall warten wir die Ausführung möglicher nachfolgender Middleware ab, bevor wir auf die Konsole schreiben.
Neuer Zustand. Wenn wir das nicht tun würden, würden wir den aktuellen Zustand erhalten, anstatt den nächsten.
Sobald das Middleware definiert ist, machen wir es für Redux verfügbar mit
importiere { createStore, applyMiddleware } von 'redux'
lass speicher = erstelleSpeicher(rootReducer, anfänglicherZustand, wendeMiddleware(logger));
Dies sorgt dafür, dass jeder Statusübergang in der Konsole des Browsers protokolliert wird:
Falls wir mehr Middleware haben, die vor dem Reducer ausgeführt werden soll, können wir sie als Parameter übergeben.
funzioneapplyMiddleware():
lass Middleware= applyMiddleware(middl1, middl2, middl3);
Die Ausführungsreihenfolge der Middleware erfolgt in der Reihenfolge, in der die Funktionen als Parameter übergeben werden.
adapplyMiddleware().
ASYNCHRONE ANRUFE MIT REACT REDUX
Lass uns jetzt sehen, wie man asynchrone Anrufe an einen Server mit React Redux durchführt.
Wir können einen lokalen Server mit json-server simulieren, der von Npm heruntergeladen werden kann, mit den zu servierenden json-Daten. Einmal
installiert, es muss die JSON-Datei erstellt werden, die bereitgestellt werden soll ([Link]) den Server starten mit:
json-server --watch [Link] --port3005--nc
Jetzt müssen wir unsere App verbinden, um die Daten von diesem Server zu lesen.
Am Ende haben wir synchrone Aktionen gesehen, bei denen das Payload-Objekt mit den Daten in den Store ging, aber in diesem Fall die Daten
Sie werden auf dem Server gespeichert, daher muss ein asynchroner Aufruf an den Server getätigt werden, um die Daten abzurufen.
Um asynchrone Anrufe zu verwalten, verwendet React Middleware, um die Arbeit zu erleichtern, gibt es verschiedene Pakete, einschließlich
redux-promise-middleware. Dies ermöglicht die Verwaltung von asynchronen Action Creators, mit dem Unterschied, dass in diesem
Im Fall erhält die Payload ein Promise:
const asyncAction = () => ({
VERSprechen
neues Versprechen(…)
})
Gibt eine Aktion mit einer asynchronen Payload, wandelt die Middleware die Aktion in eine ausstehende Aktion oder eine Aktion um
erfüllt/abgelehnt, was den Status der asynchronen Aktion darstellt.
Nachdem das Paket heruntergeladen wurde, muss es im Index importiert und an den Store übergeben werden:
importpromise von 'redux-promise-middleware'
const store = createStore(rootReducer, initialState, applyMiddleware(promise));
Um mit dem Server zu kommunizieren, verwenden wir fetch() oder andere Pakete, die eine Verwaltung der Anfragen ermöglichen.
asynchrone basierend auf den Versprechungen
REACT-HOOKS
Sie wurden mit React 16.8 eingeführt und sind praktisch Funktionen, die es ermöglichen, einen Zustand in Komponenten einzufügen.
tpo Funktion, einfacher als die Klassenmethode.
useState()
Um einen Zustand zu einem Funktionskomponenten zu hinzufügen, verwenden Sie useState, das zuerst importiert werden muss von
React. useState ist eine Funktion, die definiert wird mit:
const[variabile, setVariabile] = useState(initalValue);
oder,Diese gibt ein Paar von Werten zurück: den aktuellen Statuswert und eine Funktion, die erlaubt zu
aktualisieren (dispatch)
Es ist ähnlich wie [Link] von einer Klasse.
Der einzige Parameter von useState ist sein anfänglicher Zustand.
useEffect()
Sagt React, dass die Komponente nach dem Rendering etwas tun soll. React wird die übergebene Funktion merken und die
Er wird später anrufen, nachdem er die Updates ausgeführt hat, bei jeder Änderung.
Er führt die gleichen Aufgaben aus: componentDidMount, componentDidUpdate und componentWillUnmount.