Entwerfen Sie React-Komponenten angemessen, um den Code schöner zu machen! !

Der Zweck von React besteht darin, die Front-End-Seite in Komponenten zu zerlegen und das State-Machine-Denkmodell zur Steuerung der Komponenten zu verwenden. Es besteht definitiv eine Beziehung zwischen den Komponenten. Durch angemessenes Komponentendesign und die Festlegung geeigneter Grenzen für jede Komponente können wir die Auswirkungen auf andere Komponenten bei der Rekonstruktion der Seite effektiv reduzieren. Gleichzeitig kann es unseren Code auch schöner machen.

1. Hohe Kopplung und geringe Kohäsion.

Hohe Kopplung: Fügen Sie die eng verwandten Funktionsteile in eine Containerkomponente ein, um index.js der Außenwelt zugänglich zu machen. Die Verzeichnisstruktur ist wie folgt:

├── components
│   └── App
└── index.js

Geringe Kohäsion: Wenn diese Komponente direkt auf der aufrufenden Seite gelöscht wird, nein Auswirkungen werden ausgelöst. Reduzieren Sie unnötiges wiederholtes Rendern.

2. Anzeigekomponenten und Containerkomponenten

Der Fokus liegt hier auf this.props.children. Durch this.props.children können wir unsere Komponenten leicht kohäsionsarm machen. In der tatsächlichen Entwicklung stoßen wir häufig auf Anzeigekomponenten, die mit reinen Komponenten geschrieben wurden, und auf Containerkomponenten, die weiterhin Daten verarbeiten. Verwenden Sie hier einfach this.props.children, um diese Containerkomponenten abzudecken. Anschließend kann die eingeschlossene Containerkomponente gemäß den oben genannten Regeln weiterhin einen neuen Ordner erstellen und index.js verfügbar machen.
Der größte Vorteil dieser Schreibweise besteht darin, dass Sie schnell herausfinden können, wo sich die von Ihnen geschriebene Komponente befindet, was sie bewirkt und welche Auswirkungen sie hat.

3. Einweg-Datenfluss von oben nach unten

Wenn wir entwerfen müssen, um die oben genannten Bedingungen zu erfüllen, können wir durch die Verwendung eines Einweg-Datenflusses von oben nach unten derzeit einige Statusverwaltungstools wie Redux verwenden , der Einflussbereich ist besser kontrollierbar und ShouldComponentUpdate wird verwendet, um unnötiges Rendern zu reduzieren. (Aber es ist wirklich mühsam, auf diese Weise zu schreiben, aber React verwendet ab Version 16.3 die neue Lebenszyklusfunktion getDerivedStateFromProps, um Entwickler zu zwingen, diesen Schritt zu optimieren.)

4. Kontrollierte Komponenten und unkontrollierte Komponenten

Es gibt viele Webkomponenten durch Benutzerinteraktion geändert werden, wie zum Beispiel: , . Diese Komponenten können den Wert der Komponente ändern, indem sie Inhalte eingeben oder das Wertattribut des Elements festlegen. Da React jedoch an einen einseitigen Datenfluss gebunden ist, können diese Komponenten außer Kontrolle geraten:
1. Eine -Komponente, die den Wert in ihrem eigenen Zustand beibehält, kann nicht von außen geändert werden
2. Eine ;Eingabe> Die zum Festlegen des Werts verwendete Komponente kann nur durch externe Steuerung aktualisiert werden.

Kontrollierte Komponente:

Eine kontrollierte sollte ein Wertattribut haben. Beim Rendern einer gesteuerten Komponente wird der Wert des Wertattributs angezeigt.
Eine kontrollierte Komponente behält ihren eigenen internen Zustand nicht bei und die Darstellung der Komponente hängt ausschließlich von Requisiten ab. Mit anderen Worten: Wenn wir eine -Komponente haben, die den Wert über Requisiten festlegt, wird unabhängig von der Eingabe nur props.value angezeigt. Mit anderen Worten: Ihre Komponente ist schreibgeschützt.
Wenn Sie mit einer gesteuerten Komponente arbeiten, sollten Sie immer ein Wertattribut übergeben und eine onChange-Rückruffunktion registrieren, um die Komponente variabel zu machen.

Unkontrollierte Komponente:

Eine ist eine unkontrollierte Komponente. Durch gerenderte Elemente wird jede Benutzereingabe sofort wiedergegeben. Unkontrollierte kann nur die obere Ebene über vom Benutzer eingegebene Änderungen über die OnChange-Funktion benachrichtigen.
#### Hybridkomponente:
Behalten Sie die Werte von props.value und state.value gleichzeitig bei. props.value hat bei der Anzeige eine höhere Priorität und state.value repräsentiert den tatsächlichen Wert der Komponente.

5. Verwenden Sie Komponenten höherer Ordnung (HOC)

Einfache Definition: eine Funktion, die eine Reaktionskomponente als Parameter empfängt und eine andere Komponente zurückgibt.
Was kann getan werden: Code-Wiederverwendung, Code-Modularisierung, Hinzufügen, Löschen und Ändern von Requisiten.
Anwendungsfälle: Wenn das Unternehmen beispielsweise plötzlich verschiedene Klickpunkte im Front-End-Code vergraben möchte, kann es hoc verwenden, um einen davon zu packen Ohne den ursprünglichen Code zu ändern, muss der gesamte Code gleichzeitig vorgenommen werden.

6. Standardprozess zum Hinzufügen, Löschen, Ändern und Überprüfen

Hinzufügen: Daten eingeben, Daten überprüfen, Daten einfügen und die Datenliste erneut abfragen.
Löschen: Bestätigen Sie das Löschen und fragen Sie die Datenliste erneut ab.
Überprüfen: Datenliste abfragen, im Paging anzeigen
Ändern: Daten eingeben, Daten überprüfen, Daten ändern, Datenliste erneut abfragen

Tatsächlich ist beim Entwerfen von Komponenten keine vorzeitige Komponentisierung erforderlich. Wir können zunächst schnell eine Version schreiben und diese dann entsprechend dem tatsächlichen Entwurf aufteilen, um schnelle Änderungen der Anforderungen in den frühen Phasen des Projekts bewältigen zu können. Dann ändern wir unser Projekt Stück für Stück entsprechend dem Designmuster. Solange das Designmuster einigermaßen aufgeteilt ist, ist es eigentlich eine sehr glatte und natürliche Sache.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Anzeigekomponenten	Containerkomponenten
Konzentrieren Sie sich auf die Anzeige von Dingen. und im Allgemeinen gibt es DOM-Tags und CSS-Stile	, die Präsentations- und Containerkomponenten enthalten können, und es wird keine DOM-Tags und CSS-Stile
geben, die oft über this.props.children	weitergeleitet werden dürfen, um Daten bereitzustellen und Verhalten gegenüber Containerkomponenten oder Präsentationskomponenten
Es besteht keine Abhängigkeit von Dritten, wie Store- oder Flux-Aktionen geladen und geändert	Als Datenquelle haben in der Regel übergeordnete Komponenten, anstatt sie selbst zu schreiben, wie connect() von React Redux, createContainer() von Relay, Container.create() von Flux Utils
selten einen eigenen Status , selbst wenn sie es tun, ist es ihr eigener UI-Status

Das obige ist der detaillierte Inhalt vonEntwerfen Sie React-Komponenten angemessen, um den Code schöner zu machen! !. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!