Reactを初めて触ってみました(tutorialその⑤) このページはReact公式ページのtutorialを体験したメモと初心者なりの解釈を記述したページになります。 前回は、カプセル化されたSquareの状態を保存するところをやりました。またその続きと先に進めたいと思います。 翻訳どおりに記述すると 不変性が重要な理由 前のコード例では、.slice()演算子を使用して変更を加える前に四角形の配列をコピーし、既存の配列の変更を防ぐことをお勧めします。 これが何を意味し、それがなぜ学ぶのが重要な概念なのかについて話しましょう。 一般に、データを変更するには2つの方法があります。 最初の方法は、変数の値を直接変更してデータを変更する方法です。 第2の方法は、所望の変更も含むオブジェクトの新しいコピーでデータを置き換えることである。 突然変異によるデータ変化 var player = {score: 1, name: 'Jeff'}; player.score = 2; // Now player is {score: 2, name: 'Jeff'} 突然変異のないデータ変化 var player = {score: 1, name: 'Jeff'}; var newPlayer = Object.assign({}, player, {score: 2}); // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} // Or if you are using object spread syntax proposal, you can write: // var newPlayer = {...player, score: 2};var player = {score: 1, name: 'Jeff'}; 何を説明しているのかというと、このゲームでは履歴を保持していてクリック操作でその時の状態に切り替えする機能があるので、突然変異のデータ変化では状態を上書きするためにそれができずコ...
