Qu'est-ce que les données immuables
Les données immuables se réfèrent aux données qui ne peuvent pas être modifiées une fois qu'elles sont créées.
En utilisant des données immuables, nous pouvons facilement faire face à la mise en cache, au secours, à la détection des changements de données et à d'autres problèmes, et simplifier notre développement.
Données immuables dans JS
Dans JavaScript, nous pouvons simuler des données immuables via Deep Clone, ce qui signifie que chaque fois que nous opérons sur les données, nous utiliserons les clones profonds pour créer de nouvelles données.
clone profond
/ ** * Learning-Immutable - Clone-Deep.js * Créé par MDS le 15/6/6. * / «Utiliser Strict»; var clonedeep = require ('lodash.cloneep'); var data = {id: 'data', auteur: {name: 'mdemo', github: 'https://github.com/demohi'}}; var data1 = clonedeep (data); console.log ('égal:', data1 === data); //falSeData1.id = 'data1'; Data1.Author.Name = 'Demohi'; console.log (data.id); // data console.log (data1.id); // data1console.log (data.author.name); // mdemo console.log (data1.author.name); // DeMohiMo Console.log (Data1.Author.Name); // DemohiBien sûr, vous pouvez vous rendre compte que c'est très lent. Comme indiqué ci-dessous, c'est en effet très lent
Immutable.js est un projet ouvert sur Facebook. Il s'agit principalement de résoudre le problème des données immuables JavaScript. Il fournit un moyen plus efficace en se référant aux cartes de hachage essaie et aux essais vectoriels.
Autrement dit, Immutable.js résout les problèmes de performance grâce au partage structurel. Regardons d'abord une vidéo pour voir à quel point se fait immuable.js
Lorsqu'une opération définie se produit, immuable.js ne fera que cloner les pièces au-dessus de son niveau parent, et les autres resteront inchangés, afin que tout le monde puisse partager les mêmes parties, ce qui peut considérablement améliorer les performances.
Quiconque connaît React.js doit savoir que React.js est un cadre avec UI = F (états). Afin de résoudre le problème de mise à jour, React.js utilise Virtual Dom. Virtual Dom utilise Diff pour modifier le DOM pour réaliser des mises à jour DOM efficaces.
Cela semble parfait, mais il y a un problème. Lorsque l'état est mis à jour, si les données ne changent pas, vous effectuez également un Dom Diff virtuel, ce qui entraînera des déchets. Cette situation est en fait très courante, veuillez vous référer à l'article Flummox
Bien sûr, vous pouvez dire que vous pouvez utiliser la purerendermixine pour le résoudre. Purerendermixine est une bonne chose, nous pouvons l'utiliser pour résoudre certains des problèmes ci-dessus, mais si vous faites attention, vous pouvez voir l'invite suivante dans le document.
La copie de code est la suivante:
Cela ne compare que les objets. Si ceux-ci contiennent des structures de données complexes, elles peuvent produire des faux négatifs pour des différences plus profondes. Mélangez uniquement dans des composants qui ont des accessoires et des états simples, ou utilisent ForceUpdate () lorsque vous savez que les structures de données profondes ont changé. Ou envisagez d'utiliser des objets immuables pour faciliter les comparaisons rapides des données imbriquées.
La purerendermixine n'est qu'une comparaison simple et n'est pas utilisée pour les comparaisons multicouches. Que dois-je faire? ? Si vous faites des comparaisons complexes vous-même, les performances seront très médiocres.
La solution consiste à utiliser immuable.js pour résoudre ce problème. Parce que tant qu'il y a un changement de données dans chaque mise à jour de l'État, Purerendermixine peut immédiatement déterminer le changement de données, ce qui peut améliorer considérablement les performances. Cette partie peut également être trouvée dans les aides à l'immuabilité du document officiel
Résumé: Utilisez la purerendermixine + immuable.js
React.js Conf 2015 - données immuables et réagir
Aides à l'immuabilité
Purerendermixine
immuable-js