公式ドキュメントによると、なぜ React で不変性の概念が非常に重要なのかを説明します。一般的に、データを変更する方法は 2 つあります。1 つ目は変数の値を直接変更する方法であり、2 つ目は古いデータを新しいデータで置き換える方法です。
一般的に、データを変更する方法は 2 つあります。1 つ目は変数の値を直接変更する方法であり、2 つ目は古いデータを新しいデータで置き換える方法です。
データの直接変更#
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// playerの値は変更され、{score: 2, name: 'Jeff'}になります。
新しいデータで古いデータを置き換える#
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player, {score: 2});
// playerの値は変更されませんが、newPlayerの値は{score: 2, name: 'Jeff'}になります。
// オブジェクトの展開構文を使用すると、次のように書くこともできます：
// var newPlayer = {...player, score: 2};
直接変更（または基礎データの変更）しない方法と前の方法の結果は同じですが、この方法には以下の利点があります:
複雑な機能の簡素化#
不変性により、複雑な機能を実装しやすくなります。後の章では、「タイムトラベル」と呼ばれる機能を実装します。タイムトラベルは、三目並べの履歴のステップを振り返り、以前のステップに「戻る」ことができます。この機能はゲームに限らず、開発においても非常に一般的な要件です。データの直接変更を行わないことで、ゲームの履歴を追跡し、再利用することができます。
データの変更の追跡#
データを直接変更すると、データの変更を追跡するのが難しくなります。データの変更を追跡するには、変更前のバージョンと可変オブジェクトを比較する必要があります。そのため、オブジェクトツリー全体を一度走査する必要があります。
React での再レンダリングのタイミングの確定#
不変性の最も重要な利点は、React で純粋なコンポーネントを作成するのに役立つことです。不変なデータが変更されたかどうかを簡単に確認し、コンポーネントを再レンダリングするタイミングを決定することができます。