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

たとえば、「kingsley」をfirstNameという名前の変數(shù)に割り當てます。

 let firstName = "Kingsley";

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

 firstName = "John";

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

 const lastname = "silas";

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

 lastname = "doe";
// typeRror：定數(shù)変數(shù)への割り當て。

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

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

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

Invariant：事実に固執(zhí)します

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

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

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

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

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

 newuser = user;

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

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

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

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

オブジェクトが変異しないことを確認する必要があります。メソッドを使用する場合は、新しいオブジェクトを返す必要があります?；镜膜恕?strong>純粋な機能が必要です。

純粋な関數(shù)には2つの特性があります。

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

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

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

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

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

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

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

反応の不変

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

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

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

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

 this.state.username = "jamesdoe";

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

Immutable.js

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

純粋なJavaScriptは不変性を処理できますが、その過程にいくつかの落とし穴があるかもしれません。 Immutable.jsを使用して、優(yōu)れたパフォーマンスを備えたリッチ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とテキストが含まれています。次に、還元剤関數(shù)の設定に進み、上記の操作を還元剤関數(shù)に渡すことができます。

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

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

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

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

Reducer関數(shù)では、Immutable.jsのListを使用して、アプリケーションの初期狀態(tài)を作成します。

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

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

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

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

初めて不変性を?qū)Wぶことは混亂する可能性があります。ただし、狀態(tài)が変異すると、エラーが発生すると、より良くなります。これは通常、不変性のニーズと利點を理解する最も明確な方法です。

さらに読む

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

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

以上がJavaScriptの不変性を理解するの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。