Detaillierte Anweisungen zum Erwerb von immutable.js_javascript-Kenntnissen

Was sind unveränderliche Daten?

Unveränderliche Daten beziehen sich auf Daten, die nach ihrer Erstellung nicht mehr geändert werden können.

Durch die Verwendung unveränderlicher Daten können wir Probleme wie Caching, Rollback und Erkennung von Datenänderungen einfacher bewältigen und so unsere Entwicklung vereinfachen.

Unveränderliche Daten in js
In JavaScript können wir unveränderliche Daten durch tiefes Klonen simulieren, d. h. jedes Mal, wenn die Daten bearbeitet werden, werden neue Daten tief geklont.

Deep Clone

/**
 * 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 

Natürlich stellen Sie möglicherweise fest, dass dies sehr langsam ist. Wie unten gezeigt, ist es tatsächlich sehr langsam

Der Protagonist immutable.js erscheint

immutable.js ist ein Open-Source-Projekt von Facebook, das hauptsächlich das Problem der unveränderlichen Javascript-Daten löst, indem es sich auf Hash-Maps-Versuche und Vektorversuche Bietet eine effizientere Möglichkeit.

Einfach ausgedrückt löst immutable.js das Leistungsproblem durch strukturelles Teilen. Schauen wir uns zunächst ein Video an, um zu sehen, wie immutable.js das macht

Wenn wir eine Set-Operation haben, klont immutable.js nur die Teile über der übergeordneten Ebene und lässt die anderen unverändert, sodass jeder die gleichen Teile teilen kann, was die Leistung erheblich verbessern kann.

Warum Sie unveränderliche Daten in React.js verwenden sollten

Jeder, der mit React.js vertraut ist, sollte wissen, dass React.js ein Framework mit UI = f(states) ist. Um das Aktualisierungsproblem zu lösen, verwendet React.js einen virtuellen Dom, der den Dom durch Diff modifiziert, um einen hohen Wert zu erreichen Effizienz. Dom-Update.

Klingt perfekt, aber es gibt ein Problem. Wenn der Status aktualisiert wird und sich die Daten nicht geändert haben, führen Sie auch einen Diff des virtuellen Doms durch, wodurch Verschwendung entsteht. Diese Situation kommt tatsächlich sehr häufig vor. Sie können sich auf diesen Artikel

flummox beziehen

Natürlich können Sie sagen, dass Sie

PureRenderMixin verwenden können, um einige der oben genannten Probleme zu lösen, aber wenn Sie aufpassen, können Sie es finden Weitere Informationen finden Sie in der Dokumentation.

Code kopieren Der Code lautet wie folgt:

Dadurch werden die Objekte nur oberflächlich verglichen. Wenn diese komplexe Datenstrukturen enthalten, kann es bei tieferen Unterschieden zu falsch-negativen Ergebnissen kommen. Verwenden Sie „forceUpdate()“ nur dann, wenn Sie wissen, dass sich tiefgreifende Datenstrukturen geändert haben Erwägen Sie die Verwendung unveränderlicher Objekte, um schnelle Vergleiche verschachtelter Daten zu ermöglichen.

PureRenderMixin ist nur ein einfacher flacher Vergleich und wird nicht für mehrschichtige Vergleiche verwendet. Was zu tun? ? Wenn Sie komplexe Vergleiche selbst durchführen, wird die Leistung sehr schlecht sein.

Die Lösung besteht darin, immutable.js zu verwenden, um dieses Problem zu lösen. Denn jedes Mal, wenn der Status aktualisiert wird und eine Datenänderung vorliegt, kann PureRenderMixin die Datenänderung sofort erkennen, was die Leistung erheblich verbessern kann. Sie können sich auch auf die offizielle Dokumentation für diesen Teil

Immutability Helpers beziehen

Die Zusammenfassung lautet: Verwenden Sie PureRenderMixin + immutable.js

Referenz

React.js Conf 2015 – Unveränderliche Daten und Reaktionen

Unveränderlichkeitshelfer

PureRenderMixin

immutable-js