Vorwort
Nebenwirkungen beziehen sich auf externe Effekte in einer Funktion oder Komponente, die nicht auf den Rückgabewert oder das Rendering-Ergebnis zurückzuführen sind. Das heißt, andere verwandte Aktionen, die durch eine Aktion verursacht werden, wie z. B. das Ändern globaler Variablen, das Senden von Netzwerkanforderungen, das Betreiben von DOM, das Drucken von Protokollen usw., sind allesamt Nebenwirkungen.
Vue und React sind zwei beliebte Front-End-Frameworks, die beide virtuelles DOM verwenden, um die Rendering-Leistung zu verbessern, aber Nebenwirkungen unterschiedlich behandeln.
Die Idee von vue ist responsiv:
Es überwacht jedes Attribut durch die Einrichtung eines Watchers. Wenn sich das Attribut ändert, aktualisiert es das entsprechende virtuelle DOM als Reaktion darauf. Sein Datenfluss ist divergierend , das heißt, von der geänderten Position zu jedem zugeordneten Ort der untergeordneten und übergeordneten Komponenten; Vue bietet einige Lebenszyklus-Hooks (Hooks), mit denen Entwickler in verschiedenen Phasen Nebenwirkungen ausführen können. Beispielsweise kann der erstellte Hook zum Abrufen von Daten verwendet werden, der gemountete Hook kann zum Betreiben von DOM verwendet werden, der Destroy-Hook kann zum Bereinigen von Ressourcen usw. verwendet werden. Vue bietet außerdem Überwachungs- und Berechnungsattribute, sodass Entwickler Nebenwirkungen oder berechnete Werte basierend auf Änderungen in Abhängigkeiten ausführen können.
Vorteil :
- Einfach und benutzerfreundlich, automatisch optimiert, es ist keine spezielle Optimierung erforderlich, um eine gute Leistung zu erzielen.
- Geeignet für kleine und mittlere Anwendungen, geeignet für Anfänger und geringe Lernkosten.
- Es wird ein Vorlagensystem bereitgestellt, das normales HTML verwenden kann, was die Aktualisierung und Wartung erleichtert.
Mangel :
- Bei besonders vielen Zuständen gibt es viele Beobachter, was zu Verzögerungen führt.
- Nicht flexibel genug, um sich an komplexe Szenarien und Bedürfnisse anzupassen.
- Die Unterstützung für funktionale Programmierung und unveränderliche Daten ist nicht gut genug.
Die Idee der Reaktion ist funktional
Es befürwortet die Verwendung reiner Funktionen zum Erstellen von Komponenten. Eine reine Funktion ist eine Funktion ohne Nebenwirkungen und ihre Ausgabe hängt nur von der Eingabe ab. React verwendet einen unidirektionalen Datenfluss , dh einen unidirektionalen Datenfluss vom Elternteil zum Kind, kombiniert mit Unveränderlichkeit, um Datenunveränderlichkeit zu erreichen. React bietet außerdem einige Lebenszyklusmethoden, mit denen Entwickler in verschiedenen Phasen Nebenwirkungen ausführen können. Zum Beispiel,
- Die Methode „componentDidMount“ kann zum Abrufen von Daten verwendet werden.
- Mit der Methode „componentDidUpdate“ kann das DOM manipuliert werden.
- Die Methode „componentWillUnmount“ kann zum Bereinigen von Ressourcen usw. verwendet werden.
React stellt außerdem die setState-Methode bereit, mit der Entwickler den Status der Komponente aktualisieren und ein erneutes Rendern auslösen können. In den Funktionskomponenten von React können Sie auch benutzerdefinierte Hooks wie useEffect, useMemo und useCallback verwenden, um Nebenwirkungen auszuführen oder die Leistung zu optimieren.
Vorteil :
- Flexibilität und Reaktionsfähigkeit können sich an verschiedene komplexe Szenarien und Bedürfnisse anpassen.
- Geeignet für umfangreiche und leistungsstarke Anwendungen mit guter Unterstützung für funktionale Programmierung und unveränderliche Daten.
- Es gibt ein reichhaltiges Ökosystem und eine Community, die viele hervorragende Bibliotheken und Tools bereitstellt.
Mangel :
- Eine manuelle Optimierung ist erforderlich, da es sonst zu unnötigen Rendering- und Leistungseinbußen kommen kann.
- Für Anfänger ist es nicht freundlich genug und die Lernkosten sind hoch.
- Sie müssen die JSX-Syntax verwenden, nicht Standard-HTML, was manchen Leuten vielleicht nicht gefällt.
Im Allgemeinen haben sowohl Vue als auch React ihre eigenen Methoden zum Umgang mit Nebenwirkungen, und ihre Unterschiede liegen hauptsächlich in der Datenvariabilität und den Aktualisierungsmechanismen.