いまさらながらReact Fiberのアルゴリズムを実装してみました。 300行くらいですが、プログラムの名前や責務など、本物のReactをできるかぎり忠実に再現するようにしています。実装は以下にポイントを絞りました。 Fiberのデータ構造とトラバースアルゴリズム 中断可能な「Unit of work」 RenderフェーズとCommitフェーズ アーキテクチャは以下のような感じ コード上にReactのソースコードへのリンクもコメントしているので、見比べてみるとより理解が深まると思います(例えば、今回はrequestIdleCallbackで擬似的にスケジューリングを実現していますが、Reactでは独自にSchedulerをつくっています)。 Fiberのアーキテクチャに関しては既にたくさんの情報があるため、この記事ではいくつか登場人物を紹介するまでとします。 performUnitOf