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'};
何を説明しているのかというと、このゲームでは履歴を保持していてクリック操作でその時の状態に切り替えする機能があるので、突然変異のデータ変化では状態を上書きするためにそれができずコピーして上書きすることによりその時の状態を保存することにしているようです。
最終的な結果は同じですが、変更することなく（または基になるデータを変更して）、コンポーネントとアプリケーションの全体的なパフォーマンスを向上させることができます。（おそらくこれは処理が簡単なのでパフォーマンスの向上もあるということかと。。）
Reactでいつ再レンダリングするかを決定する
Reactでの不変性の最大の利点は、単純な純粋なコンポーネントを構築するときです。
不変データは、変更が行われたかどうかをより簡単に判断できるため、コンポーネントの再レンダリングが必要なときを判断するのにも役立ちます。
shouldComponentUpdate（）の詳細と純粋なコンポーネントを構築する方法については、「
パフォーマンスの最適化」を参照してください。
色々書いてはありましたがこれから実装する内容もありましたので省略した部分もあります。
ちなみにObject.assignについて知らなかったので調べました。（
ここを参照）
Object.assign()メソッドは、ソース オブジェクトから列挙可能 (enumerable)かつ直接所有 (own)のプロパティだけをターゲット オブジェクトにコピーします。
var player = {score: 1, name: 'Jeff'};
var newPlayer = Object.assign({}, player);
→playerをそのままコピーする newPlayer：{score: 1, name: 'Jeff'}
var newPlayer = Object.assign({}, player, {score: 2});
→playerにscore:2のオブジェクトをマージしてコピーする newPlayer： {score: 2, name: 'Jeff'}
ちなみにはじめの引数がtargetと言われこれ指定しないとtargetが変化します。
上の例は空のtargetに変更を加えてコピーを作っているイメージですね。
下の例はplayerがtargetなのでplayerが変化してしまいます。
var newPlayer = Object.assign(player, {score: 2});
→player：{score: 2, name: 'Jeff'} newPlayer結果： {score: 2, name: 'Jeff'}
コメント
コメントを投稿