Fiber(React)の勉強 by gaaamii
Fiber(React)について学ぼうと思ってhttps://github.com/acdlite/react-fiber-architecture を読むと、前提として以下を読むことが推奨される。
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
https://reactjs.org/docs/reconciliation.html
https://github.com/reactjs/react-basic
https://reactjs.org/docs/design-principles.html
なので、それぞれ読んでいく。
https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html
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フレームワークのそれほど重要ではない
https://reactjs.org/docs/reconciliation.html
Reactの差分アルゴリズムでは、以下2つの仮定に基づいたO(n)でヒューリスティックなアルゴリズムを採用している
1. 異なるタイプの要素は異なるツリーを生成する
2. 開発者がkey propを子要素のヒントとして付ける
違うタイプの要素
スクラッチでツリーをビルドし直す
同じタイプのDOM Element
属性値のみを更新する
同じタイプのComponent Element
インスタンスは同じまま。componentWillReceiveProps, componentWillUpdate, componentDidUpdateを呼んでrenderを呼ぶ。
子要素の繰り返し
順番が変わってないときは追加したものだけinsertになる。
順番の最初にinsertするようなときはそのままだとパフォーマンス悪くなるのでkeyが必要
Keys
兄弟間で一意であればよい。配列のindexだと並べ替えのときに問題あり。
https://github.com/reactjs/react-basic
Transformation
Reactの大前提は、UIは単にデータを異なる形式のデータに投影すること
同じ入力に対して同じ出力をする
Abstraction
抽象化して再利用できるようにする
Composition
2つ以上の異なる抽象化されたものを新しいものに組み合わせる
State
テキストフィールドの入力値やスクロール位置など固有の状態
Memoization
メモ化によって同じ入力に対する再実行をしないようにする
Lists
Mapを使ってアイテムごとのstateを管理
Continuations
なんかちょっと難しくなってきた。あとで書く
StateMap
わからん
Memoization Map
わからん
Algebraic Effects
わからん
https://reactjs.org/docs/design-principles.html
Composition