Vergleich von React Mutative und React Immer

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.

Überblick über React Mutative

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:

• Prägnanz: Code wird besser lesbar und einfacher zu schreiben.
• Leistung: Dies kann schneller sein als manuelle unveränderliche Aktualisierungen, insbesondere bei großen Datenstrukturen.
• Fehlerreduzierung: Hilft, versehentliche Mutationen des Statusobjekts zu vermeiden.

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.

Übersicht über React Immer

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“.

Vorteile von React Immer

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.

  Codebeispiele

  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

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"})

Mit Immer

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.

Kernfunktionalität

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:

1. Draft State: Both libraries create a draft version of the original state object. This draft behaves mostly like the original state, allowing you to write updates as if you were mutating it directly.
2. Immutability Behind the Scenes: When you make changes to the draft state, these libraries aren't modifying the original object. Instead, they track the changes you make.
3. Generating a New State: Once you're done with your updates in the draft state, Mutative, and Immer use different approaches to create a new, immutable state object reflecting the changes:
4. Mutative: It leverages a high-performance algorithm to efficiently create a new data structure with the modifications from the draft. This approach prioritizes speed.
5. Immer: It employs a proxy object that intercepts mutations on the draft and uses that information to construct a completely new, immutable state object. This approach offers more flexibility but can have some performance overhead. ## Performance Comparison When it comes to raw performance, Mutative reigns supreme over Immer, especially for updates involving large data structures. Here's why:
6. Speed Demon: Benchmarks show Mutative can be a staggering 2-6 times faster than writing state updates with traditional reducers and a whopping over 10 times faster than Immer in its default settings.

• 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.

  The Ease of Use Comparison

  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

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.

Conclusion

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!