JavaScriptの不変性を理解する

JavaScriptにおける不変性の概念は、可変の再割り当てと混同される可能性があります。 letまたはvarを使用して宣言された変数は再割り当てできますが、 constによって宣言された変数はできません。

たとえば、「kingsley」をfirstNameという名前の変数に割り当てます。

 let firstName = "Kingsley";

再割り当てを行うことができます：

 firstName = "John";

これは、 letが使用されるためです。 constを使用する場合：

 const lastname = "silas";

再割り当てしようとすると、エラーが発生します。

 lastname = "doe";
// typeRror：定数変数への割り当て。

しかし、これは不変ではありません。

Reactなどのフレームワークでは、重要な概念は、状態と特性（小道具）の直接的な変更を避けることです。不変性は反応のユニークな概念ではなく、反応が状態や特性を扱うときに使用する重要な原則です。

それで、不変性とはどういう意味ですか？

Invariant：事実に固執します

変更されていないデータは、その構造またはその中のデータを変更することはできません。それは価値を変更できない変数に割り当て、ある意味で価値を真実の源にします。不変とは、カエルが常にカエルになることを意味します。

オブジェクトと配列は突然変異を可能にしますが、これはデータ構造を変更できることを意味します。私たちがそれを言うと、これらのカエルのいずれかにキスすることは、王子に変わる変容につながる可能性があります。

たとえば、ユーザーオブジェクト：

 let user = {name： "James doe"、location： "lagos"};

新しいnewUserオブジェクトを作成します。

 newuser = user;

最初のユーザーが場所を変更した場合、 userオブジェクトを直接変更し、 newUserに影響します。

 user.location = "abia";
console.log（newuser.location）; //「アビア」

これは私たちが望む結果ではないかもしれません。この再割り当ては意図しない結果をもたらす可能性があります。

変更されていないオブジェクトを使用します

オブジェクトが変異しないことを確認する必要があります。メソッドを使用する場合は、新しいオブジェクトを返す必要があります。基本的に、純粋な機能が必要です。

純粋な関数には2つの特性があります。

1. 返品値は、着信パラメーターに依存します。入力が変更されていない限り、返品値は変わりません。
2. 範囲外の物事を変えません。

Object.assign()を使用して、着信オブジェクトを変更しない関数を作成できます。新しいオブジェクトを作成し、2番目と3番目のパラメーターを最初のパラメーターとして渡された空のオブジェクトにコピーし、新しいオブジェクトを返します。

 const updatelocation =（data、newlocation）=> {
  return object.Assign（{}、data、{location：newlocation}）;
};

updateLocation()は純粋な関数です。最初のユーザーオブジェクトを渡すと、新しいlocationオブジェクトが新しい値を持つ新しいユーザーオブジェクトを返します。

もう1つの方法は、拡張オペレーターを使用することです。

 const updatelocation =（data、newlocation）=> {
  return {... data、location：newlocation};
};

それで、これは反応と何の関係があるのでしょうか？

反応の不変

典型的な反応アプリケーションでは、状態はオブジェクトです。 （Reduxは、アプリケーションストレージの基礎として不変オブジェクトを使用します。）Reactの調整プロセスは、コンポーネントを再レンダリングする必要があるかどうか、または変更を追跡する方法が必要かどうかを決定します。

言い換えれば、Reactがコンポーネントのステータスが変更されたと判断できない場合、仮想DOMを更新することはわかりません。

不変性の施行により、これらの変更を追跡できます。これにより、反応はオブジェクトの古い状態とその新しい状態を比較し、その違いに基づいてコンポーネントを再レンダリングすることができます。

これが、通常、Reactのステータスを直接更新することをお勧めしない理由です。

 this.state.username = "jamesdoe";

Reactは、状態が変更され、コンポーネントを変更できないかどうかはわかりません。

Immutable.js

Reduxは不変性の原則に従います。その還元剤は純粋な機能である必要があるため、現在の状態を変更する必要はありませんが、現在の状態とアクションに基づいて新しいオブジェクトを返す必要があります。通常、以前のように拡張オペレーターを使用しますが、Immutable.jsというライブラリを使用して同じ効果を達成できます。

純粋なJavaScriptは不変性を処理できますが、その過程にいくつかの落とし穴があるかもしれません。 Immutable.jsを使用して、優れたパフォーマンスを備えたリッチAPIを提供しながら不変性を確保します。この記事では、Immutability.jsのすべての詳細については詳しく説明しませんが、ReactとReduxを搭載したタスクアプリケーションで使用する方法を示す簡単な例を見ていきます。

まず、必要なモジュールをインポートしてTODOコンポーネントをセットアップすることから始めましょう。

 const {list、map} = Immutable;
const {provider、connect} = reaCtredux;
const {createStore} = redux;

ローカルマシンで操作する場合は、これらのパッケージをインストールする必要があります。

 NPMインストールRedux React-Redux Immutable

インポートステートメントは次のようになります：

 「Immutable」から{list、map}をインポートします。
「React-Redux」から{Provider、Connect}をインポートします。
「redux」から{createStore}をインポートします。

その後、いくつかのタグでTODOコンポーネントをセットアップすることができます。

 // ... TODOコンポーネントコード...

handleSubmit()メソッドを使用して、新しいTo Doアイテムを作成します。この場合、ユーザーは新しいTo Doアイテムのみを作成します。1つのアクションのみが必要です。

 // ...アクションコード...

作成したペイロードには、To DoアイテムのIDとテキストが含まれています。次に、還元剤関数の設定に進み、上記の操作を還元剤関数に渡すことができます。

 // ...削減コード...

connectを使用してコンテナコンポーネントを作成して、ストレージに接続できるようにします。次に、 mapStateToProps()およびmapDispatchToProps()を渡して接続する必要があります。

 // ...コードを接続...

mapStateToProps()を使用して、コンポーネントの保存データを提供します。次に、 mapDispatchToProps()を使用して、プロパントとして操作作成者をコンポーネントに利用できるようにします。

Reducer関数では、Immutable.jsのListを使用して、アプリケーションの初期状態を作成します。

 // ...削減コード...

ListをJavaScriptアレイと考えてください。そのため、 stateで.push()メソッドを使用できます。状態を更新するために使用される値はオブジェクトであり、 Mapオブジェクトとして認識できることを示します。このようにして、現在の状態が変わらないことを保証するため、 Object.assign()または拡張機能を使用する必要はありません。これは、特に州が深くネストされている場合は、はるかに簡潔に見えます。どこでも拡張オペレーターを使用する必要はありません。

変更されていない状態により、コードは変更が発生したかどうかを迅速に判断できます。データを再帰的に比較して、変更があったかどうかを判断する必要はありません。とはいえ、大きなデータ構造を扱うときにパフォーマンスの問題を経験する可能性があることに言及することが重要です。大きなデータオブジェクトをコピーする価格があります。

しかし、それ以外の場合は動的なサイトやアプリケーションが必要ないため、データを変更する必要があります。重要なのは、データを変更する方法です。不変性は、アプリケーションデータ（または状態）を変更する正しい方法を提供します。これにより、状態の変更を追跡し、その変更によりアプリケーションのどの部分を再レンダリングするかを決定することが可能になります。

初めて不変性を学ぶことは混乱する可能性があります。ただし、状態が変異すると、エラーが発生すると、より良くなります。これは通常、不変性のニーズと利点を理解する最も明確な方法です。

さらに読む

• 反応とreduxの不変性
• Immutable.js 101 - マップとリスト
• Immutable.jsをReduxで使用します

元のテキストには多数のコードブロックが含まれているため、擬似原産性を維持し、過度の繰り返しを避けるために、いくつかのコードブロックの説明を簡素化し、いくつかのステートメントに同義語と文章を作成しました。画像形式は同じままです。

以上がJavaScriptの不変性を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。