Die Verwaltung des Status in React-Apps ist ein wichtiger Teil der Erstellung dynamischer und reaktionsfähiger Benutzeroberflächen. Traditionell waren Entwickler auf unveränderliche Updates angewiesen, die eine neue Kopie des Status mit den erforderlichen Änderungen erstellen. Diese Methode bietet zwar Vorhersagbarkeit und erleichtert das Debuggen, kann jedoch zu Leistungseinbußen führen, insbesondere beim Umgang mit großen oder komplizierten Datenstrukturen.
Dieser Artikel behandelt zwei beliebte React-Frameworks für den Umgang mit Zuständen; Reagieren Sie mutativ und immer. Beide Bibliotheken fördern die Unveränderlichkeit, wenn auch auf unterschiedliche Weise.
Die Implementierung von Mutative ist sehr vergleichbar mit der von Immer, wenn auch robuster. Mutative verarbeitet Daten effizienter als Immer und native Reduzierer. Laut dem Mutative-Team erleichtert diese Zustandsverwaltungslösung unveränderliche Aktualisierungen. Es ist etwa zwei- bis sechsmal schneller als ein durchschnittlicher handgefertigter Reduzierer und mehr als zehnmal schneller als Immer.
Hier sind einige Vorteile von Mutative.js:
Angenommen, es gibt ein Statusobjekt, das eine Liste enthält. Wir beabsichtigen, den letzten Punkt auf der Liste als erledigt zu markieren und dann einen neuen Punkt hinzuzufügen:
const state = {
list: [
{ text: 'Learn JavaScript', done: true },
{ text: 'Learn React', done: true },
{ text: 'Learn Redux', done: false },
],
};
Wenn wir regelmäßige unveränderliche Datenaktualisierungen verwenden würden, könnten wir es wie folgt schreiben:
const nextState = {
...state,
list: [
...state.list.slice(0, 2),
{
...state.list[2],
done: true,
},
{ text: 'Learn Mutative', done: true },
],
};
Aber während wir den Mutativ verwenden, können wir es so schreiben:
import { create } from 'mutative';
const nextState = create(state, (draft) => {
draft.list[2].done = true;
draft.list.push({ text: 'Learn Mutative', done: true });
});
Dies ist die grundlegende Verwendung von Mutative, die es uns ermöglicht, unveränderliche Aktualisierungen einfacher zu implementieren.
Immer, was auf Deutsch immer bedeutet, ist ein kleines Paket, das die Arbeit mit einem unveränderlichen Zustand komfortabler macht. Gewinner des JavaScript Open Source Award 2019 für den „einflussreichsten Beitrag“.
Diese Vorteile werden in der Regel dadurch erreicht, dass Sie immer eine bearbeitete Kopie eines Objekts, Arrays oder einer Karte erstellen, anstatt dessen Eigenschaften zu ändern. Dies kann das Schreiben von Code sehr erschweren und es ist leicht, solche Einschränkungen unbeabsichtigt zu durchbrechen. Durch die Lösung dieser Probleme unterstützt Sie Immer dabei, den Ansatz der unveränderlichen Daten einzuhalten. Hier sind einige Vorteile von React Immer:
Immer meldet einen Fehler, wenn es eine unbeabsichtigte Mutation erkennt.
Immer macht den üblichen Boilerplate-Code überflüssig, der beim Erstellen tiefgreifender Änderungen an unveränderlichen Objekten erforderlich ist. Ohne Immer müssen Objektduplikate auf allen Ebenen von Hand erstellt werden. Typischerweise durch die Durchführung einer großen Anzahl von... Spread-Operationen. Bei Verwendung von Immer werden Änderungen an einem Entwurfsobjekt vorgenommen, das diese aufzeichnet und die entsprechenden Duplikate erstellt, ohne das Originalobjekt zu ändern.
Immer erfordert nicht, dass Sie bestimmte APIs oder Datenstrukturen beherrschen, um von dem Paradigma zu profitieren. Immer ermöglicht Ihnen den Zugriff auf einfache JavaScript-Datenstrukturen sowie die bekannten veränderlichen JavaScript-APIs und bleibt dabei sicher.
unten finden Sie ein einfaches Beispiel für einen schnellen Vergleich:
const baseState = [
{
title: "Learn JavaScript",
done: true
},
{
title: "Try Immer",
done: false
}
]
Angenommen, wir haben den vorherigen Basiszustand und müssen die zweite Aufgabe aktualisieren und eine dritte hinzufügen. Wir möchten jedoch den ursprünglichen BaseState nicht ändern und ein tiefes Klonen vermeiden (um die erste Aufgabe beizubehalten).
Ohne Immer müssen wir zur Aufrechterhaltung der Unveränderlichkeit jede betroffene Ebene des Zustandsobjekts kopieren.
const nextState = baseState.slice() // shallow clone the array
nextState[1] = {
// replace element 1...
...nextState[1], // with a shallow clone of element 1
done: true // ...combined with the desired update
}
//Since nextState was freshly cloned, using push is safe here,
// but doing the same thing at any arbitrary time in the future would
// violate the immutability principles and introduce a bug!
nextState.push({title: "Tweet about it"})
Immer vereinfacht diesen Prozess. Wir können die Funktion „Generieren“ verwenden, deren erstes Argument der Zustand ist, in dem wir beginnen möchten, und als zweiter Parameter eine Funktion namens „Rezept“, der ein Entwurf übergeben wird, an dem wir einfache Änderungen vornehmen können. Sobald das Rezept fertig ist, werden die Mutationen aufgezeichnet und zur Erstellung des nächsten Zustands verwendet. Generate übernimmt alle notwendigen Kopiervorgänge und schützt die Daten gleichzeitig vor zukünftigen unbeabsichtigten Änderungen, indem es sie einfriert.
import {produce} from "immer"
const nextState = produce(baseState, draft => {
draft[1].done = true
draft.push({title: "Tweet about it"})
})
Suchen Sie ein Immer mit React? Gerne können Sie direkt auf die Website von React + Immer gehen.
Sowohl Mutative als auch Immer erreichen unveränderliche Aktualisierungen auf konzeptionell ähnliche Weise, jedoch mit wesentlichen Implementierungsunterschieden, die sich auf die Leistung auswirken. Hier ist eine Aufschlüsselung:
Secret Sauce: This speed advantage boils down to how each library creates the final immutable state object. Mutative employs a highly optimized algorithm that efficiently builds a new data structure reflecting the changes you made in the draft, prioritizing raw speed.
Immer's Overhead: Immer, on the other hand, utilizes a proxy object to track mutations on the draft state. This approach offers more flexibility but comes with an overhead that can significantly slow things down, particularly when dealing with large datasets. It's like adding an extra step in the process.
Auto-Freeze and the Tradeoff: Immer offers an optional feature called auto-freeze, which helps prevent accidental modifications to the original state. This is great for safety, but it comes at a performance cost. Disabling auto-freeze can bring Immer closer to Mutative's speed, but then you lose the safety net.
Both Mutative and Immer offer an intuitive way to write state updates that appear to mutate the state but ultimately result in immutable updates. However, there are some differences in syntax and potential for errors:
Syntax Mutative: Leverages familiar syntax that resembles traditional mutations. You write code as if you're directly modifying the state object.
Example:
const draft = createDraft(currentState);
draft.todos.push({ text: 'Buy milk' });
const newState = commit(draft);
Immer Syntax: Requires using specific Immer functions like produce to wrap your update logic.
Example:
const newState = produce(currentState, draft => {
draft.todos.push({ text: 'Buy milk' });
});
Draft escapes occur when you unintentionally modify the original state object instead of the draft copy in libraries like Mutative and Immer.
Mutative: While Mutative's syntax might feel familiar, there's a higher risk of accidentally modifying the original state object (draft escapes). This can happen if you forget to use the commit function to finalize the changes and create the new state. It requires stricter discipline to ensure all modifications go through the draft.
Immer: Immer's syntax explicitly forces you to work within the draft state using functions like produce. This reduces the chance of accidentally modifying the original state, making it inherently safer.
Ultimately, the best choice depends on your specific project requirements and team preferences. Consider trying both libraries on a small project to see which one feels more comfortable for your developers.
Das obige ist der detaillierte Inhalt vonVergleich von React Mutative und React Immer. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
