Was sind unveränderliche Daten
Unveränderliche Daten beziehen sich auf Daten, die nach dem Erstellen nicht geändert werden können.
Durch die Verwendung unveränderlicher Daten können wir problemlos mit Caching, Fallback, Datenänderungserkennung und anderen Problemen umgehen und unsere Entwicklung vereinfachen.
Unveränderliche Daten in JS
In JavaScript können wir unveränderliche Daten über den tiefen Klon simulieren, was bedeutet, dass wir jedes Mal, wenn wir mit den Daten arbeiten, Deep -Klone die Daten verwenden, um neue Daten zu erstellen.
tiefer Klon
/** * Lernableer-klone-deep.js * Erstellt von MDS am 15.06.6. */'strikt verwenden'; var Clonedeep = Request ('lodash.clonedeep'); var data = {id: 'data', Autor: {name: 'mdemo', github: 'https://github.com/demohi'}}; //falssedata1.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);Natürlich können Sie erkennen, dass dies sehr langsam ist. Wie unten gezeigt ist es in der Tat sehr langsam
Immutable.js ist ein von Facebook offener Projekt. Es dient hauptsächlich, das Problem von Untasty -Daten von JavaScript zu lösen. Es bietet einen effizienteren Weg, indem es sich auf Hash -Karten und Vektor -Versuche bezieht.
Einfach ausgedrückt, unveränderlich.js löst Leistungsprobleme durch strukturelles Teilen. Schauen wir uns zuerst ein Video an, um zu sehen, wie unveränderlich.js gemacht werden
Wenn eine festgelegte Operation auftritt, klonen Untafbare.js nur die Teile über der Ebene der Eltern, und die anderen bleiben unverändert, sodass jeder die gleichen Teile teilen kann, was die Leistung erheblich verbessern kann.
Jeder, der mit React.js vertraut ist, sollte wissen, dass React.js ein Rahmen mit UI = F (Zustände) ist. Um das Update -Problem zu lösen, verwendet React.js Virtual DOM. Virtual DOM verwendet Diff, um das DOM zu ändern, um effiziente DOM -Updates zu erreichen.
Es klingt perfekt, aber es gibt ein Problem. Wenn der Status aktualisiert wird, werden Sie auch virtuelle DOM -Diff -Diff -Dom -DOM -DOM -DOM -DOM -DOM -Unternehmen durchführen, was zu Abfällen führt. Diese Situation ist eigentlich sehr häufig. Siehe Artikel Flummox
Natürlich können Sie sagen, dass Sie Purerendermixin verwenden können, um es zu lösen. Purerendermixin ist eine gute Sache. Wir können es verwenden, um einige der oben genannten Probleme zu lösen. Wenn Sie jedoch aufmerksam sind, können Sie die folgende Eingabeaufforderung im Dokument sehen.
Die Codekopie lautet wie folgt:
Dies vergleicht nur flach die Objekte. Wenn diese komplexen Datenstrukturen enthalten, kann dies falsch-negative für tiefere Unterschiede erzeugen. Mischen Sie nur Komponenten mit einfachen Requisiten und Status oder verwenden Sie ForceUpdate (), wenn Sie wissen, dass sich tiefe Datenstrukturen geändert haben. Oder erwägen Sie, unveränderliche Objekte zu verwenden, um schnelle Vergleiche verschachtelter Daten zu erleichtern.
Purerendermixin ist nur ein einfacher flacher Vergleich und wird für mehrschichtige Vergleiche nicht verwendet. Was soll ich tun? ? Wenn Sie selbst komplexe Vergleiche durchführen, ist die Leistung sehr schlecht.
Die Lösung besteht darin, unveränderliche Js zu verwenden, um dieses Problem zu lösen. Denn so lange kann Purerendermixin die Datenänderung sofort bestimmen, was die Leistung erheblich verbessern kann. Dieser Teil finden Sie auch in den offiziellen Helfbarkeitshelfern mit Dokumenten und Unveränderlichkeit
Zusammenfassung: Verwenden Sie Purerendermixin + unveränderlich.js
React.js conf 2015 - unveränderliche Daten und reagieren
Unveränderlichkeitshelfer
PERERENDERMIXIN
Unveränderlich-Js