Einführung zum Reagieren

HalloReact-Fall

Zwei Möglichkeiten zum Erstellen eines virtuellen DOM

Virtuelles DOM und echtes DOM

jsx-Syntaxregeln

jsx kleine Übungen

Komponenten und Module

Installation von Entwicklertools

Funktionskomponenten

Überprüfen Sie relevantes Wissen

Klassenkomponente

Staatsverständnis

Zustand initialisieren

Ereignisbindung in React

Dies in der Methode in der Klasse

Lösen Sie das Problem dieses Zeigens in der Klasse

Verwendung von setState

Abkürzung für Staat

Zustand zusammenfassen

Grundlegende Verwendung von Requisiten

Übergeben Sie Requisiten stapelweise

Beschränken Sie die Requisiten

Abkürzung für Requisiten

Konstruktoren und Requisiten in Klassenkomponenten

Funktionskomponenten verwenden Requisiten

Zusammenfassung Requisiten

ref in String-Form

ref im Rückrufformular

Problem mit der Anzahl der Anrufe in der Rückrufreferenz

Verwendung von createRef

Zusammenfassungref

Ereignisbehandlung in React

unkontrollierte Komponenten

gesteuerte Komponenten

Funktionscurrying von Funktionen höherer Ordnung

Schreiben ohne Curry

Lebenszyklus führen

Lebenszyklus (alter) Komponentenmontageprozess

Lebenszyklus (alter) setState-Prozess

Lebenszyklus (alter) ForceUpdate-Prozess

Lebenszyklus (alter) Renderprozess der übergeordneten Komponente

Zusammenfassung Lebenszyklus (alt)

Vergleichen Sie den alten und den neuen Lebenszyklus

getDerivedStateFromProps

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate-Beispiel

Zusammenfassung Lebenszyklus (neu)

DOM-Differenzalgorithmus

Reaktionsgerüst initialisieren

Einführung in die Scaffolding-Datei öffentlich

Einführung in die Scaffolding-Datei src

Eine einfache Hello-Komponente

Modularität des Stils

Installation des React-Plug-Ins in vscode

Komponentenkodierungsprozess

Statische TodoList-Fallkomponente

Dynamische Initialisierungsliste für TodoList-Fälle

TodoList-Fall fügt Todo hinzu

TodoList-Fall-Mausbewegung wird wirksam

Der TodoList-Fall fügt eine Todo hinzu

Der TodoList-Fall begrenzt die Requisiten

Der TodoList-Fall löscht eine Todo

Der TodoList-Fall implementiert die untere Funktion

TodoList-Fallzusammenfassung TodoList-Fall

Scaffolding-Konfigurationsagent-Methode 1

Scaffolding-Konfigurationsagent-Methode 2

Github-Suchfall statische Komponenten

Github-Suche, Fall, Axios, Anfrage senden

Github-Suchfallanzeigedaten

Github-Suchfall-Abschlussfall

Nachrichtenabonnement- und Veröffentlichungstechnologie pubsub

fetch sendet Anfrage

Zusammenfassung der Github-Suchfälle

Verständnis von SPA-Anwendungen

Verständnis für Routing

Front-End-Routing-Prinzip

Grundlegende Verwendung des Routings

Routing-Komponenten und allgemeine Komponenten

Verwendung von NavLink

Kapselung von NavLink-Komponenten

Verwendung von Switch

Lösen Sie das Problem des Stilverlusts

Fuzzy-Matching und striktes Matching von Routen

Verwendung von Redirect

Verschachteltes Routing

Übergeben Sie params-Parameter an Routing-Komponenten

Übergeben Sie Suchparameter an Routing-Komponenten

Übergeben Sie Statusparameter an Routing-Komponenten

Zusammenfassung der Routing-Parameter

drücken und antworten

Programmatische Routennavigation

Verwendung von withRouter

BrowserRouter与HashRouter

Grundlegende Verwendung von antd

On-Demand-Einführung des Antd-Stils

benutzerdefiniertes AntD-Theme

Einführung in Redux

Redux-Workflow

Reine Reaktionsversion des Summationsfalls

Sum Case Redux Lite-Version

Sum Case Redux Vollversion

Asynchrone Aktionsversion des Summationsfalls

Verständnis von React-Redux

Verbinden Sie Containerkomponenten und UI-Komponenten

Grundlegende Verwendung von React-Redux

Optimierung 1 Abkürzung mapDispatch

Optimieren Sie die Verwendung der 2Provider-Komponente

Optimierung 3 Integrieren Sie UI-Komponenten und Containerkomponenten

Datenaustausch und Schreiben von Personenkomponenten

Datenfreigabe und Schreiben des Reduzierers der Personenkomponente

Der Datenaustausch vervollständigt den Datenaustausch

reine Funktion

Redux-Entwicklertools

endgültige Version

Projekt packen und ausführen

Erweitern Sie 1setState

Erweiterung 2lazyLoad

3stateHook erweitern

Erweitern Sie 4EffectHook

5RefHook verlängern

Erweitern Sie 6Fragment

Erweitern Sie 7Context

Erweitern Sie 8PureComponent

Erweitern Sie 9renderProps

Erweitern Sie 10ErrorBoundary

Zusammenfassung der Kommunikationsmethoden zwischen Komponenten