Maison > Article > interface Web > Comparaison de React Mutative et React Immer
La gestion de l'état dans les applications React est une partie importante de la création d'interfaces utilisateur dynamiques et réactives. Traditionnellement, les développeurs dépendaient de mises à jour immuables, qui produisaient une nouvelle copie de l'état avec les modifications nécessaires. Bien que cette méthode offre de la prévisibilité et facilite le débogage, elle peut avoir une incidence négative sur les performances, en particulier lorsqu'il s'agit de structures de données volumineuses ou complexes.
Cet article couvre deux frameworks React populaires pour la gestion de l'état ; Réagissez Mutatif et Immer. Les deux bibliothèques favorisent l'immuabilité, bien que par des moyens distincts.
L'implémentation de Mutative est très comparable à celle d'Immer, bien que plus robuste. Mutative gère les données plus efficacement que les réducteurs Immer et natifs. Selon l'équipe Mutative, cette solution de gestion d'état facilite les mises à jour immuables. Il est environ deux à six fois plus rapide qu’un réducteur artisanal moyen et plus de 10 fois plus rapide qu’Immer.
Voici quelques avantages de Mutative.js :
Par exemple, supposons qu'il existe un objet d'état qui contient une liste. Nous avons l'intention de marquer le dernier élément de la liste comme terminé, puis d'ajouter un nouvel élément :
const state = { list: [ { text: 'Learn JavaScript', done: true }, { text: 'Learn React', done: true }, { text: 'Learn Redux', done: false }, ], };
Si nous devions utiliser des mises à jour régulières de données immuables, nous pourrions l'écrire comme suit :
const nextState = { ...state, list: [ ...state.list.slice(0, 2), { ...state.list[2], done: true, }, { text: 'Learn Mutative', done: true }, ], };
Mais en utilisant le Mutatif, on peut l'écrire ainsi :
import { create } from 'mutative'; const nextState = create(state, (draft) => { draft.list[2].done = true; draft.list.push({ text: 'Learn Mutative', done: true }); });
C'est l'utilisation fondamentale de Mutative, qui nous permet de mettre en œuvre plus facilement des mises à jour immuables.
Immer, qui signifie toujours en allemand, est un petit package qui rend plus pratique le travail avec un état immuable. Lauréat du JavaScript Open Source Award 2019 pour la « contribution la plus percutante ».
Ces avantages sont généralement obtenus en vous assurant de toujours créer une copie modifiée d'un objet, d'un tableau ou d'une carte plutôt que de modifier l'une de ses propriétés. Cela peut rendre l’écriture de code très difficile et il est simple de briser ces restrictions involontairement. Grâce à la résolution de ces problèmes, Immer vous aidera à adhérer à l’approche des données immuables. Voici quelques avantages de React Immer :
Immer signalera une erreur s'il détecte une mutation involontaire.
Immer élimine l'exigence du code passe-partout habituel requis lors de la création de modifications profondes sur des objets immuables. Sans Immer, les duplications d’objets doivent être réalisées à la main à tous les niveaux. Généralement, en effectuant un grand nombre d'opérations de propagation. Lors de l'utilisation d'Immer, des modifications sont apportées à un brouillon d'objet, qui les enregistre et crée les doublons appropriés sans modifier l'objet d'origine.
Immer ne nécessite pas de maîtriser certaines API ou structures de données pour bénéficier du paradigme. Immer vous permet d'accéder à des structures de données JavaScript simples ainsi qu'aux API JavaScript mutables bien connues, tout en restant sécurisé.
Vous trouverez ci-dessous un exemple simple pour une comparaison rapide :
const baseState = [ { title: "Learn JavaScript", done: true }, { title: "Try Immer", done: false } ]
Supposons que nous ayons l'état de base précédent et que nous devions mettre à jour la deuxième tâche et en ajouter une troisième. Cependant, nous ne voulons pas changer le baseState d'origine et éviter le clonage profond (pour conserver la première tâche).
Sans Immer, le maintien de l'immuabilité nous oblige à copier chaque niveau impacté de l'objet d'état.
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 simplifie ce processus. Nous pouvons utiliser la fonction generate, qui prend comme premier argument l'état dans lequel nous souhaitons démarrer, et comme deuxième paramètre une fonction appelée recette, à laquelle nous remettons un brouillon auquel nous pouvons appliquer de simples modifications. Une fois la recette terminée, les mutations sont enregistrées et utilisées pour créer l’état suivant. generate gérera toutes les copies nécessaires tout en protégeant les données contre de futures altérations involontaires en les gelant.
import {produce} from "immer" const nextState = produce(baseState, draft => { draft[1].done = true draft.push({title: "Tweet about it"}) })
Vous recherchez un Immer avec React ? Vous êtes invités à accéder directement au site Web React + Immer.
Mutative et Immer réalisent des mises à jour immuables de manière conceptuellement similaire, mais avec des différences de mise en œuvre clés qui affectent les performances. Voici une répartition :
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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!