Reactガイドを読んでいくその79
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
差分検出処理
Reactは更新時に何が更新されるべきかをAPIで処理できるようにしている。
こういった機能があるからこそReactアプリは作成が容易にできる。
Reactがどのように処理を実装して使っているかブラックボックスに近くなっているので、よくわからない可能性がある。
差分についてこの章では見ていく。
何が問題なのか
render()関数をある時点のReactツリーを作成するものとして考えることができる。
次のstateやproprs更新時では別のツリーを返す。
Reactは差分をうまく見つけて更新が必要な箇所だけを更新するようにしています。
ツリーの更新において最小限の操作を求めるアルゴリズムはツリーの要素数を n として O(n3) ほどの計算量があります。
例:1000個の要素の表示に10億レベルの比較が必要
Reactでは2つの仮定をもとに、O(n)程度の計算量になるようにしている。
1.異なる型の 2 つの要素は異なるツリーを生成する。
2.開発者は key プロパティを与えることで、異なるレンダー間でどの子要素が変化しない可能性があるのかについてヒントを出すことができる。
上記の仮定は実践的なユースケースで有効に機能する。
今日はここまで。