immutable.js_javascript スキルを取得するための詳細な手順

不変データとは

不変データとは、一度作成すると変更できないデータを指します。

Immutable Data を使用することで、キャッシュ、ロールバック、データ変更検出などの問題をより簡単に処理できるようになり、開発が簡素化されます。

js 内の不変データ
JavaScript では、ディープ クローンを通じて不変データをシミュレートできます。つまり、データが操作されるたびに、新しいデータがディープ クローン化されます。

ディープクローン

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

もちろん、これが非常に遅いことに気づくかもしれません。以下に示すように、確かに非常に遅いです

主人公 immutable.js が登場

immutable.js は Facebook によるオープンソース プロジェクトで、主に ハッシュ マップの Try と vector Trys より効率的な方法を提供します。

簡単に言うと、immutable.js は構造共有を通じてパフォーマンスの問題を解決します。まずはビデオを見て immutable.js がどのように動作するかを見てみましょう

set 操作がある場合、immutable.js は親レベルより上の部分のみをクローンし、その他は変更しないままにするため、全員が同じ部分を共有できるため、パフォーマンスが大幅に向上します。

React.js で不変データを使用する必要がある理由

React.js に詳しい人は、React.js が UI = f(states) のフレームワークであることを知っているはずです。更新の問題を解決するために、React.js は diff を通じて dom を変更して高いパフォーマンスを実現します。効率性の向上。

完璧に聞こえますが、問題があります。状態が更新されるときに、データが変更されていない場合は、仮想 dom の差分も実行することになり、無駄が生じます。この状況は実際には非常に一般的です。

flummox の記事を参照してください。

もちろん、

PureRenderMixin を使用すると、上記の問題のいくつかを解決できると言うかもしれませんが、注意すれば見つかります。以下のヒントを参照してください。

コードをコピーします コードは次のとおりです:

これは、オブジェクトを浅く比較するだけであり、これらに複雑なデータ構造が含まれている場合は、単純な props と state を持つコンポーネントにのみ混合するか、深いデータ構造が変更されたことがわかっている場合にのみ、forceUpdate() を使用します。 、ネストされたデータの高速比較を容易にするために、不変オブジェクトの使用を検討してください。

PureRenderMixin は単純な浅い比較にすぎず、多層比較には使用されません。何をするか？ ?複雑な比較を自分で行うと、パフォーマンスが非常に低下します。

解決策は、immutable.js を使用してこの問題を解決することです。データに変更がある限り、状態が更新されるたびに、PureRenderMixin はデータの変更を即座に判断できるため、パフォーマンスが大幅に向上します。この部分については、公式ドキュメント

不変ヘルパー を参照することもできます。

要約: PureRenderMixin + immutable.js を使用します

参考

React.js Conf 2015 - 不変データと React

不変ヘルパー

PureRenderMixin

不変-js