Fiber(React)の勉強 by gaaamii
なので、それぞれ読んでいく。
ReactにおけるComponentとElementとInstanceの違い
ComponentとElementの違い
Componentというのは伝統的なobject-orientedなUIプログラミングの形。親が子の生成/破棄を管理する。これはでっかくなると大変。Reactは違う。
Element
ElementはコンポーネントインスタンスあるいはDOMノードとその必要なプロパティを表現するプレーンなオブジェクトである
Elementは以下2つのフィールドを持つ不変なオブジェクト
type: (string | ReactClass)
props: Object
typeがstringの場合、それはそのタグ名のDOMノード。propsはその属性値。
children propに子要素を指定する
Component Elements
Elementのtypeは関数やクラスにすることもできる
Componentを表すElementもDOMノードを表すElementと同様、Elementである。それらはネストして混ぜ込める。
Top-Down Reconciliation
ReactがElementツリーの理解を"refine"していく。これはReactがreconciliationと呼ぶプロセスの一部。
この段階的なrefineのプロセスによって、Reactアプリは最適化しやすくなっている。
propsが変わっていない場合に、そのプロセスをスキップすることが可能。
Reactにおいてinstanceは多くのobject-orientedなUIフレームワークのそれほど重要ではない
Reactの差分アルゴリズムでは、以下2つの仮定に基づいたO(n)でヒューリスティックなアルゴリズムを採用している
1. 異なるタイプの要素は異なるツリーを生成する
2. 開発者がkey propを子要素のヒントとして付ける
違うタイプの要素
スクラッチでツリーをビルドし直す
同じタイプのDOM Element
属性値のみを更新する
同じタイプのComponent Element
インスタンスは同じまま。componentWillReceiveProps, componentWillUpdate, componentDidUpdateを呼んでrenderを呼ぶ。
子要素の繰り返し
順番が変わってないときは追加したものだけinsertになる。
順番の最初にinsertするようなときはそのままだとパフォーマンス悪くなるのでkeyが必要
Keys
兄弟間で一意であればよい。配列のindexだと並べ替えのときに問題あり。
Transformation
Reactの大前提は、UIは単にデータを異なる形式のデータに投影すること
同じ入力に対して同じ出力をする
Abstraction
抽象化して再利用できるようにする
Composition
2つ以上の異なる抽象化されたものを新しいものに組み合わせる
State
テキストフィールドの入力値やスクロール位置など固有の状態
Memoization
メモ化によって同じ入力に対する再実行をしないようにする
Lists
Mapを使ってアイテムごとのstateを管理
Continuations
なんかちょっと難しくなってきた。あとで書く
StateMap
わからん
Memoization Map
わからん
Algebraic Effects
わからん
Composition