Comprendre l'immuabilité en JavaScript

Le concept d'invariance en JavaScript peut être confondu avec une réaffectation variable. Les variables déclarées à l'aide let ou var peuvent être réaffectées, mais les variables déclarées par const ne peuvent pas.

Par exemple, attribuez "Kingsley" à une variable nommée firstName :

 Soit FirstName = "Kingsley";

La réaffectation peut être effectuée:

 FirstName = "John";

En effet, let est utilisé. Si vous utilisez const :

 const LastName = "Silas";

Essayer de réaffecter entraînera une erreur:

 LastName = "Doe";
// TypeError: affectation à une variable constante.

Mais ce n'est pas l'immuabilité.

Dans des cadres tels que React, un concept important est d'éviter la modification directe des états et des propriétés (accessoires). L'invariance n'est pas un concept unique de réact, mais un principe important qui réagit des utilisations lorsqu'il traitait des états et des propriétés.

Alors, que signifie l'invariance?

Invariant: s'en tiennez aux faits

Les données inchangées ne peuvent pas modifier sa structure ou les données à l'intérieur. Il attribue la valeur à une variable qui ne peut pas être modifiée, faisant de la valeur une source de vérité dans un sens - comme une princesse embrasse une grenouille et veut qu'elle devienne un beau prince. L'invariance signifie qu'une grenouille sera toujours une grenouille.

Bien que les objets et les tableaux permettent une mutation, cela signifie que la structure des données peut être modifiée. Si nous le disons, embrasser l'une de ces grenouilles pourrait conduire à une transformation qui se transforme en prince.

Par exemple, un objet utilisateur:

 Laissez user = {name: "James Doe", emplacement: "Lagos"};

Créez un nouvel objet newUser :

 Laissez NewUser = utilisateur;

Si le premier utilisateur modifie l'emplacement, il modifiera directement user et affectera newUser :

 user.location = "Abia";
Console.log (NewUser.Location); // "Abia"

Ce n'est peut-être pas le résultat que nous voulons. Cette réaffectation peut avoir des conséquences inattendues.

Utiliser des objets inchangés

Nous devons nous assurer que l'objet n'est pas muté. Si vous souhaitez utiliser une méthode, il doit renvoyer un nouvel objet. Essentiellement, nous avons besoin d'une fonction pure .

Les fonctions pures ont deux caractéristiques:

1. La valeur de retour dépend du paramètre entrant. Tant que l'entrée reste inchangée, la valeur de retour ne changera pas.
2. Il ne change pas les choses en dehors de sa portée.

En utilisant Object.assign() , nous pouvons créer une fonction qui ne modifie pas l'objet entrant. Il créera un nouvel objet et copiera les deuxième et troisième paramètres dans l'objet vide passé en tant que premier paramètre, puis renvoie le nouvel objet.

 const updateLocation = (data, newlocation) => {
  return object.assign ({}, data, {emplacement: newlocation});
};

updateLocation() est une fonction pure. Si nous passons dans le premier objet utilisateur, il renvoie un nouvel objet utilisateur avec location ayant une nouvelle valeur.

Une autre façon consiste à utiliser l'opérateur d'extension:

 const updateLocation = (data, newlocation) => {
  return {... data, emplacement: newlocation};
};

Alors, qu'est-ce que cela a à voir avec React?

Invariance dans React

Dans une application React typique, un état est un objet. (Redux utilise des objets invariants comme base du stockage d'applications.) Le processus de coordination de React détermine si un composant doit être rendu, ou s'il nécessite un moyen de suivre les changements.

En d'autres termes, si React ne peut pas déterminer que l'état du composant a changé, il ne saura pas pour mettre à jour le DOM virtuel.

L'application de l'invariance permet de suivre ces changements. Cela permet à React de comparer l'ancien état de l'objet et de son nouvel état et de renvoyer le composant en fonction de cette différence.

C'est pourquoi il n'est généralement pas recommandé de mettre à jour directement l'état de réagir:

 this.state.username = "Jamesdoe";

React ne sera pas sûr si l'état a changé et que le composant ne peut pas être remis.

Immutable.js

Redux suit le principe de l'invariance. Ses réducteurs doivent être des fonctions pures, ils ne devraient donc pas modifier l'état actuel, mais doivent renvoyer un nouvel objet en fonction de l'état actuel et de l'action. Nous utilisons généralement des opérateurs d'extension comme avant, mais nous pouvons utiliser une bibliothèque appelée Immutable.js pour obtenir le même effet.

Bien que le JavaScript pur puisse gérer l'invariance, il peut y avoir des pièges dans le processus. Utilisez Immutable.js pour assurer l'invariance tout en fournissant une API riche avec des performances supérieures. Cet article n'entrera pas dans les détails de tous les détails de l'immuabilité.js, mais nous examinerons un exemple simple qui montre comment l'utiliser dans une application de tâche alimentée par React et Redux.

Tout d'abord, commençons par importer les modules requis et configurer le composant TODO.

 const {list, map} = immuable;
const {fournisseur, connect} = reactredUx;
const {CreateStore} = redux;

Si vous utilisez une machine locale, vous devez installer ces packages:

 NPM Installer Redux React-Redux Immutable

L'instruction d'importation ressemble à ceci:

 import {list, map} à partir de "immuable";
import {fournisseur, connect} à partir de "react-redux";
import {CreateStore} à partir de "redux";

Nous pouvons ensuite procéder à la configuration de notre composant TODO avec quelques balises:

 // ... Code de composant TODO ...

Nous utilisons handleSubmit() pour créer un nouvel élément de tâche. Dans ce cas, l'utilisateur ne créera qu'un nouvel élément de tâche, nous n'avons besoin que d'une seule action:

 // ... Code d'actions ...

La charge utile que nous créons contient l'ID et le texte de l'élément de tâche. Ensuite, nous pouvons procéder à la définition de la fonction de réducteur et à passer l'opération que nous avons créée ci-dessus à la fonction de réducteur:

 // ... code réducteur ...

Nous utiliserons connect pour créer un composant conteneur afin que nous puissions nous connecter au stockage. Ensuite, nous devons passer dans les fonctions mapStateToProps() et mapDispatchToProps() pour se connecter.

 // ... connecter le code ...

Nous utilisons mapStateToProps() pour fournir les données stockées pour le composant. Nous utilisons ensuite mapDispatchToProps() pour rendre le Créateur d'opération à la disposition du composant en tant que propriété.

Dans la fonction de réducteur, nous utilisons List à partir d'immuable.js pour créer l'état initial de l'application.

 // ... code réducteur ...

Considérez List comme un tableau JavaScript, c'est pourquoi nous pouvons utiliser la méthode .push() à state . La valeur utilisée pour mettre à jour l'état est un objet, ce qui indique que Map peut être reconnue comme un objet. De cette façon, il n'est pas nécessaire d'utiliser Object.assign() ou des opérateurs d'extension, car il garantit que l'état actuel ne change pas. Cela semble beaucoup plus concis, surtout lorsque les États sont imbriqués profondément - nous n'avons pas besoin d'utiliser les opérateurs d'extension partout.

L'état inchangé permet au code de déterminer rapidement si un changement s'est produit. Nous n'avons pas besoin de comparer récursivement les données pour déterminer s'il y a eu un changement. Cela dit, il est important de mentionner que vous pouvez rencontrer des problèmes de performance lorsque vous traitez avec de grandes structures de données - il y a un prix pour copier de grands objets de données.

Mais les données doivent être modifiées car sinon il n'y a pas besoin d'un site ou d'une application dynamique. Ce qui est important, c'est comment changer les données. L'invariance fournit la bonne façon de modifier les données d'application (ou l'état). Cela permet de suivre les modifications de l'état et de déterminer les parties de l'application doit être renvoyée en raison de ce changement.

L'apprentissage de l'immuabilité pour la première fois peut être déroutant. Cependant, lorsque l'État mute, vous rencontrerez une erreur qui apparaît, ce qui vous rendra meilleur. C'est généralement le moyen le plus clair de comprendre les besoins et les avantages de l'invariance.

Dès la lecture

• Invariance dans React et Redux
• Immutable.js 101 - Cartes et listes
• Utilisation d'immuable.js avec redux

Notez que puisque le texte d'origine contient un grand nombre de blocs de code, afin de maintenir la pseudo-originalité et d'éviter une répétition excessive, j'ai simplifié la description de certains blocs de code et fait des synonymes et des tw-tweaks de phrase à certaines déclarations. Le format d'image reste le même.

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!