Instructions détaillées pour acquérir des compétences immutable.js_javascript

Qu'est-ce que les données immuables

Les données immuables font référence aux données qui ne peuvent pas être modifiées une fois créées.

En utilisant Immutable Data, nous pouvons gérer plus facilement des problèmes tels que la mise en cache, la restauration et la détection des modifications de données, simplifiant ainsi notre développement.

Données immuables en js
En JavaScript, nous pouvons simuler des données immuables grâce au clonage profond, c'est-à-dire qu'à chaque fois que les données sont exploitées, une nouvelle donnée est clonée en profondeur.

Clonage profond

/**
 * learning-immutable - clone-deep.js
 * Created by mds on 15/6/6.
 */

'use strict'; 
var cloneDeep = require('lodash.clonedeep');

var data = { 
 id: 'data',
 author: {
  name: 'mdemo',
  github: 'https://github.com/demohi'
 }
};

var data1 = cloneDeep(data);

console.log('equal:', data1===data); //false

data1.id = 'data1'; 
data1.author.name = 'demohi';

console.log(data.id);// data 
console.log(data1.id);// data1

console.log(data.author.name);//mdemo 
console.log(data1.author.name);//demohi 

Bien sûr, vous réalisez peut-être que c'est très lent. Comme indiqué ci-dessous, c'est effectivement très lent

Le protagoniste immutable.js apparaît

immutable.js est un projet open source de Facebook, principalement pour résoudre le problème des données javascript immuables, en se référant aux essais de cartes de hachage et essais vectoriels Fournit un moyen plus efficace.

Pour faire simple, immutable.js résout le problème de performances grâce au partage structurel. Regardons d'abord une vidéo pour voir comment immutable.js fait

Lorsque nous avons une opération définie, immutable.js clonera uniquement les parties au-dessus de son niveau parent, laissant les autres inchangées, afin que tout le monde puisse partager les mêmes parties, ce qui peut grandement améliorer les performances.

Pourquoi devriez-vous utiliser des données immuables dans React.js

Tous ceux qui connaissent React.js doivent savoir que React.js est un framework avec UI = f(states). Afin de résoudre le problème de mise à jour, React.js utilise un dom virtuel, qui modifie le dom via diff pour atteindre un niveau élevé. efficacité.dom mise à jour.

Cela semble parfait, mais il y a un problème. Lorsque l'état est mis à jour, si les données n'ont pas changé, vous ferez également un diff du dom virtuel, ce qui crée du gaspillage. Cette situation est effectivement très courante. Vous pouvez vous référer à cet article flummox

.

Bien sûr, vous pouvez dire que vous pouvez utiliser PureRenderMixin pour le résoudre. PureRenderMixin est une bonne chose. Nous pouvons l'utiliser pour résoudre certains des problèmes ci-dessus, mais si vous y prêtez attention, vous pouvez le trouver. dans la documentation. Voir cette astuce ci-dessous.

Copier le code Le code est le suivant :

Cela ne compare que superficiellement les objets. Si ceux-ci contiennent des structures de données complexes, cela peut produire des faux négatifs pour des différences plus profondes. Mélangez uniquement dans des composants qui ont des accessoires et un état simples, ou utilisez forceUpdate() lorsque vous savez que les structures de données profondes ont changé. , envisagez d'utiliser des objets immuables pour faciliter des comparaisons rapides de données imbriquées.

PureRenderMixin n'est qu'une simple comparaison superficielle et n'est pas utilisé pour une comparaison multicouche. Ce qu'il faut faire? ? Si vous effectuez vous-même des comparaisons complexes, les performances seront très médiocres.

La solution est d'utiliser immutable.js pour résoudre ce problème. Parce que chaque fois que l'état est mis à jour, tant qu'il y a un changement de données, PureRenderMixin peut immédiatement déterminer le changement de données, ce qui peut considérablement améliorer les performances. Vous pouvez également vous référer à la documentation officielle de cette partie Immutability Helpers

Le résumé est le suivant : utilisez PureRenderMixin + immutable.js

Référence

React.js Conf 2015 - Données immuables et React

Aide à l'Immuabilité

PureRenderMixin

immuable-js