Reactのコンセプト:不変性

不変性とは何ですか?そして、それはReactの世界にどのように適合しますか?

Reactでプログラミングするときに出会う可能性のある概念の1つは、不変性(およびその反対の可変性)です。

これは物議を醸すトピックですが、不変性の概念、React、およびそのエコシステムのほとんどの種類について考えると、これが強制されるため、少なくとも、なぜそれがそれほど重要であるのか、そしてその影響を把握する必要があります。

プログラミングでは、変数は、作成後に値を変更できない場合、不変です。

文字列を操作するときに、知らないうちに不変の変数をすでに使用しています。文字列はデフォルトでは不変です。実際に文字列を変更すると、新しい文字列が作成され、同じ変数名に割り当てられます。

不変の変数は決して変更できません。その値を更新するには、新しい変数を作成します。

同じことがオブジェクトと配列にも当てはまります。

配列を変更する代わりに、新しいアイテムを追加するには、古い配列と新しいアイテムを連結して新しい配列を作成します。

オブジェクトは更新されませんが、変更する前にコピーされます。

これは多くの場所でReactに当てはまります。

たとえば、stateコンポーネントのプロパティを直接、ただしsetState()方法。

戻ってきた、状態を直接変更することはありませんが、関数であるレデューサーを介してのみ変更します。

問題は、なぜですか?

さまざまな理由がありますが、その中で最も重要なものは次のとおりです。

  • Reduxの場合のように、ミューテーションを一元化できます。これにより、デバッグ機能が向上し、エラーの原因が減少します。
  • コードはよりクリーンで理解しやすいように見えます。知らないうちに関数が値を変更することを期待することは決してありません。予測可能性。関数がオブジェクトを変更せず、新しいオブジェクトを返すだけの場合、それは純粋関数と呼ばれます。
  • たとえば、JavaScriptは、既存のオブジェクトを変更するよりも、古いオブジェクト参照を完全に新しいオブジェクトに交換する方が高速であるため、ライブラリはコードを最適化できます。これはあなたにパフォーマンス

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: