Maison > Article > interface Web > 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
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.
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.
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