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.

Présentation de React Mutatif

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 :

• Concision : le code devient plus lisible et plus facile à écrire.
• Performances : cela peut être plus rapide que les mises à jour manuelles immuables, en particulier pour les grandes structures de données.
• Réduction des erreurs : permet d'éviter les mutations accidentelles de l'objet d'état.

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.

Présentation de React Immer

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

Avantages de React Immer

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

  Exemples de codes

  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 Immersion

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

Avec Immersion

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.

Fonctionnalité de base

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 :

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.

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!