Heim > Artikel > Web-Frontend > 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
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
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 Natürlich können Sie sagen, dass Sie
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 Die Zusammenfassung lautet: Verwenden Sie PureRenderMixin + immutable.js
Referenz