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

これは

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

ガイドのリンク

ja.reactjs.org

パフォーマンス最適化

shouldComponentUpdate の実際の動作

図中のSCUはshouldComponentUpdateが返した値で、緑がtrue、赤はfalseを示す。
vDOMEqはレンダーされたReact要素が等しかったかどうか。緑は等しく、赤は等しくない。
gyazo.com

このケースではC6だけ実DOMを更新せざるを得なかった。
C8はレンダーされたReact要素のおかげで実DOMの更新は不要で、C2サブツリーとC7ではshouldComponentUpdateが生きたおかげで、renderメソッドの呼び出し、React要素の比較すらスキップできたということがわかる。

ReactがDOMを更新しなくてよいかどうか、しなければならないかを判断するときにこの図を思い出して、処理を追うと ヒントがありそう。

今日はここまで。