Reactチュートリアルをやっていってみるその8

これは

Reactチュートリアルをやっていく記事です。

参考

ja.reactjs.org

イミュータビリティは何故重要なのか

昨日作成したコードでは配列を直接変更する代わりに、
.slice() メソッドを使って square 配列のコピーを作成し、それを変更することを行いました。
今回はイミュータビリティ(immutability; 不変性)の説明と重要性についてでした。

変化するデータについてのアプローチは2種類ある。
 ・データを直接いじってミューテート(書き換える)する
 ・変更した新しいデータのコピーで古いデータを置き換える

いずれも出力される結果は同じになります。
内部データの書き換えを行わないことでいくつか利点があります。
 ・複雑な機能が簡単に実装できる
  →チュートリアル後半で実装する予定のタイムトラベル機能を実装する際に
   直接値を変更していないからこそヒストリを維持して再利用が可能になる。

 ・変更の検出   →直接値が書き換えられてしまった場合変更を検知するのが難しい。
   イミュータブルであれば参照オブジェクトが前と別のものであれば変更とみなせる。

 ・React再レンダータイミングでの決定   →pure componentを構築しやすくなる。
   前述の通り変更があったか簡単に検知できるので、再レンダータイミングも意識しやすい
   詳細はパフォーマンス最適化のページに記載されているようなので後日実施する。

今日はここまで。