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

これは

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

ガイドのリンク

ja.reactjs.org

差分検出処理

トレードオフ

これまで行ってきた差分検出処理のアルゴリズムはReactの内部構造であることが前提でした。
基本的にはrenderメソッドが全体を書き換えているように見えているので、正直使っている際に差分処理を意識する必要はほとんどない。

とはいえ実装を理解して仮定を立てて実装していくことは大切であり、パフォーマンスを意識するならば必ず必要となることは間違いない。

ドキュメントにも以下の2点について、意識しておくことと記載されています。

1.差分アルゴリズムは型が異なるコンポーネント間でサブツリーを照合しようとはしません。2 つのとてもよく似た出力をするコンポーネントの型を入れ替えているケースがあれば、同じ型にした方がいいかもしれません。現実的には、これが問題となったことはありません。

2.key は予測可能で安定した、一意なものであるべきです。不安定な key(例えば Math.random() 関数で生成するような)は多くのコンポーネントインスタンスと DOM ノードを不必要に再生成し、パフォーマンスの低下や子コンポーネントの state の喪失を引き起こします。

今日はここまで。