不変のデータとは何ですか
不変のデータとは、作成されると変更できないデータを指します。
不変のデータを使用することにより、キャッシュ、フォールバック、データ変更の検出、その他の問題に簡単に対処し、開発を簡素化できます。
JSの不変のデータ
JavaScriptでは、ディープクローンを使用して不変のデータをシミュレートできます。つまり、データを操作するたびに、深いクローンを使用して新しいデータを作成します。
深いクローン
/** * Learning-Immutable-clone-deep.js * 15/6/6にMDSによって作成されました。 */'Strict'を使用します。 var clonedeep = require( 'lodash.clonedeep'); var data = {id: 'data'、著者:{name: 'mdemo'、github: 'https://github.com/demohi'} //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); // demohiもちろん、これは非常に遅いことに気付くかもしれません。以下に示すように、それは確かに非常に遅いです
Immutable.jsは、Facebookが調達したプロジェクトです。主にJavaScriptの不変のデータの問題を解決することです。ハッシュマップトライとベクトル試行を参照することにより、より効率的な方法を提供します。
簡単に言えば、Immutable.jsは構造共有を通じてパフォーマンスの問題を解決します。最初にビデオを見て、不変である方法を見てみましょう
セット操作が発生すると、Immutable.jsは親レベルを超える部品のみをクローンし、他の部品は変更されず、誰もが同じ部分を共有できるため、パフォーマンスを大幅に改善できます。
React.jsに精通している人は誰でも、React.jsがUI = F(状態)のフレームワークであることを知っておく必要があります。更新の問題を解決するために、React.JSは仮想DOMを使用します。 Virtual DomはDIFFを使用してDOMを変更して効率的なDOM更新を実現します。
完璧に聞こえますが、1つの問題があります。状態が更新されると、データが変更されない場合、仮想DOM DIFFも実行し、廃棄物を引き起こします。この状況は実際には非常に一般的です。Flummoxの記事を参照してください
もちろん、Purerendermixinを使用してそれを解決できると言うかもしれません。 Purerendermixinは良いことです。上記の問題のいくつかを解決するために使用できますが、注意を払うと、ドキュメントに次のプロンプトが表示されます。
コードコピーは次のとおりです。
これはオブジェクトを浅く比較するだけです。これらに複雑なデータ構造が含まれている場合、より深い違いのために偽陰性を生成する可能性があります。単純な小道具と状態を持つコンポーネントにのみ混ぜるか、深いデータ構造が変更されたことがわかった場合のForceUpDate()を使用します。または、ネストされたデータの迅速な比較を容易にするために不変のオブジェクトを使用することを検討してください。
Purerendermixinは単純な浅い比較であり、多層比較には使用されていません。どうすればいいですか? ?複雑な比較を自分で行うと、パフォーマンスは非常に貧弱になります。
解決策は、Immutable.jsを使用してこの問題を解決することです。各状態の更新にデータの変更がある限り、Purerendermixinはすぐにデータの変更を決定できるため、パフォーマンスを大幅に改善できるからです。この部分は、公式の文書の不変のヘルパーにもあります
概要:Purerendermixin + Immutable.jsを使用します
React.js Conf 2015-不変のデータとReact
不変のヘルパー
Purerendermixin
不変-JS