react-reconcilerの理解
現在のReactはFiberと呼ばれる仕組みで画面の更新が行われているらしい
Fiberにはリコンシリエーションというアルゴリズム?手続き?があり、react-reconcilerによって抽象化されている
これによってDOM(ReactDOM)やネイティブアプリ(ReactNative)といったいろんなものを対象にReactが使える
カスタムレンダラーを作るには、react-reconcilerにHostConfigというオブジェクトを渡す
HostConfigに実際どのようにレンダリングを行うかを実装し、react-reconcilerがそれをいい感じに呼び出す
https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md
実装の例
https://github.com/ts-graphviz/react/blob/main/src/reconciler.ts
https://github.com/inlet/react-pixi/blob/master/src/reconciler/hostconfig.js
思ったこと
リコンシリエーションの過程で実際レンダリングの対象となるコンポーネントは文字列で定義されたコンポーネント?
react-pixiは実際に利用するコンポーネントを文字列でexportしてる
https://github.com/inlet/react-pixi/blob/69525a6bae6b3f8ad0a3ed4f7a01778bdd8b6a0e/src/index.js
なお型定義はReact.FCになってる
https://github.com/inlet/react-pixi/blob/69525a6bae6b3f8ad0a3ed4f7a01778bdd8b6a0e/index.d.ts#L356-L367
code:jsx
const MyElement = "MyElement"
<MyElement /> // React.createElement("MyElement", ...)になる
よくよく考えれば、例えばDOMコンポーネント(aとかdivとか)みたいなレンダリング対象になるもの以外は結局のところツリー構造に残らない?(関数コンポーネントは返り値に置き換わると考える)
そうした実態を持つコンポーネントのツリー構造が最終的に出来る
それがreact-reconcilerのcreateInstanceとかに渡されてくる
#さまざまな理解