Reactガイドを読んでいくその76

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

データを変更しないことの効果

propsやstateで使用する値のミューテートを避けることで、更新の要否を判断することができるようになることは昨日確認しました。
ES6はこれをより簡潔に実装できる配列のスプレッド構文をサポートしています。
Create React Appを使用していればこの構文はデフォルトで利用することができる。

オブジェクトのミューテートするようなコードを書かないようにするために、Object.assignを使用することで可能となっている。

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

深くネストされたオブジェクトを扱っている場合はミューテートが使えないと非常に不便に感じることがあるので、そういった問題がある場合はImmer や immutability-helperを利用することでコードを読みやすくすることができるようになります。

今日はここまで。