ReactのRenderer自作

概要

今回ReactDOMの再実装・最小実装を行います。

HTMLのような階層構造を持つプログラムは管理が困難ですが、そんな中、苦労せずに記述できているReactやVueなどはいつも素晴らしいなと思いながら、ReactやVueで記述できたらいいのに、と思っていました。

ReactのRenderは別々で作られている所を見ると、どこかにサンプルが落ちているはずだと思ったので、色々調べておりましたが、なかなか見つからず。。。

つい最近、最小構成で良いライブラリを見つけたので、自分で実装しようと思い、作成してみます。

目標

2DCanvas / THREE / Pixi / Babylon

上記いずれかのRendererを作成 (TODO決まったら一つにしておく)

memo

なんかrAF使うから重たいような気はするからそこら辺もWrapされてるBabylon/2DCanvasとかのほうが良さそう。

Rendererとは

Reactのコアライブラリは、ただのReact.ReactElementを再帰的に描画するだけの構造を作成するだけのロジック郡ライブラリです。

なので下記のような分別したとても柔軟な実装が可能となるわけです。

react-dom

ReactをDOMElementとして反映させる

react-native

ReactをスマートフォンアプリのUIとして反映させる

react-ink

ReactをCLI上で表現する

他にも色々あります。

Workerでレンダリングさせてみる

音をで管理

Eメールのパースを管理

PDF/Word/Sketch/Figma/Unity etc....

参考レポジトリ

ReactDOMを最小構成で実装されているレポジトリとURLを参考に実装していきます。

必要なパッケージ

react

説明不要

react-reconciler

State変更されたときの差分を検知し、検知後特定のFunctionを呼び出す。

この振る舞いを実装する事がRenderの管理に繋がる。（後述するHostConfigというObject）

必要な作業

Custom Renderの作成

Elementクラスの作成

HostConfigの作成

TODO、明日やる。