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

これは

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

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

リコンシリエーション(差分検出処理)を避ける

ReactはレンダーされたUIの内部表現を構築して維持する。
内部表現の中にはコンポーネントが返したReact要素も含まれていて、Reactはこれを使うことでJavaScriptオブジェクトの操作よりも負荷の高いDOMノードの不要な作成やアクセスを回避する。これを仮想DOMと呼びReact Nativeでも同様。

Reactは新しく返された要素と以前のレンダーを比較してDOMの変更が必要かどうかを判断する。

変更ある部分だけを更新するとはいえ再度レンダーするには時間がかかる。
遅延が目立つ場合はshouldComponentUpdateをオーバライドすることで解決できる可能性がある。

// 使うときはこんな感じ
shouldComponentUpdate(nextProps, nextState) {
  return true;
}

コンポーネントを更新する必要がないとわかっている場合はfalseを返すことでレンダー処理をスキップできるので使うと便利だったりする。

今日はここまで。