Einführung in React

Kleiner Fall reagieren

Zwei Möglichkeiten, einen virtuellen Dom zu erstellen

Virtuelles DOM und echtes DOM

jsx-Syntaxregeln

jsx kleine Übungen

Installation der Entwicklertools

Komponenten und Module

Funktionskomponenten

Überprüfen Sie relevantes Wissen

Klassenkomponente

Staatsverständnis

Status 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

Event-Handling

unkontrollierte Komponenten

gesteuerte Komponenten

Funktionen höherer Ordnung und Funktionscurrying

Schreiben ohne Curry

Lebenszyklus führen

Lebenszyklus (alt)_Komponentenmontageprozess

Lebenszyklus (alt)_setState-Prozess

Lebenszyklus (alt)_forceUpdate-Prozess

Renderprozess der übergeordneten Komponente

Zusammenfassung Lebenszyklus (alt)

Vergleichen Sie den alten und den neuen Lebenszyklus

getDerivedStateFromProps

getSnapshotBeforeUpdate

10 getSnapshotBeforeUpdate-Fall

Zusammenfassung Lebenszyklus (neu)

DOM-Differenzalgorithmus

Reaktionsgerüst initialisieren

Gerüstdateiintroduction_public

Gerüstdateiintroduction_src

Eine einfache Hello-Komponente

Modularität des Stils

Tastenkombinationen in WebStorm

Komponentenkodierungsprozess

TodoList case_static-Komponente

Dynamische Initialisierungsliste

Aufgaben hinzufügen

Mausbewegungseffekt

Aktivieren und deaktivieren Sie die Option

Beschränken Sie die Requisiten

Eine Aufgabe löschen

Implementieren Sie die untere Funktion

Zusammenfassung des TodoList-Falls

Scaffolding-Konfigurationsagent 1

Scaffolding-Konfigurationsagent 2

Douban-Filmsuche case_static Komponente

Douban-Filmsuche case_axios Anfrage senden

Douban-Filmsuche case_display data

Douban-Filmsuche case_completed case

Douban-Filmsuche, case_message-Abonnement und Veröffentlichung_pubsub

Douban-Filmsuche case_fetch Anfrage senden

Douban-Filmsuche case_summary

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 den Statusparameter an die Routing-Komponente

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

Summieren der case_pure-Reaktionsversion

Summieren der optimierten Version von case_redux

Summieren der Vollversion von case_redux

Summierende case_asynchronous-Aktionsversion

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 2_Provider-Komponente

Optimierung 3_Integrieren Sie UI-Komponenten und Containerkomponenten

Komponente „Datenfreigabe_Schreibende Person“.

Datenfreigabe_Schreiben des Reduzierers der Personenkomponente

Datenfreigabe_Vollständige Datenfreigabe

reine Funktion

Redux-Entwicklertools

endgültige Version

Projekt packen und ausführen

Erweiterung 1_setState

Erweiterung 2_lazyLoad

Erweiterung 3_stateHook

Erweiterung 4_EffectHook

Erweiterung 5_RefHook

Erweiterung 6_Fragment

Erweiterung 7_Context

Erweiterung 8_PureComponent

Erweiterung 9_renderProps

Erweiterung 10_ErrorBoundary

Zusammenfassung der Kommunikationsmethoden zwischen Komponenten