2023/8/14 React Fiberの再実装
参考
描画処理を分割し、描画を中断できるようにし、パフォーマンスの改善を行う
全てを再帰処理で一気通貫でやると途中で止められなくなる
そこでタスクをFiberという単位で切り中断できるようにする
大まかな流れ
render内でfiberRootを作る
flushSyncでfiberRootを起点に、unit of workをscheduler経由で実行する
concurrent modeの一部を作る
UnitOfWorkの実行
これがschedulerに渡される1タスクになる
code:ts
function performUnitOfWork(fiber_, internals) {
const fiber = createAndAppendDom(fiber_);
const fiberWithChild = {
...fiber,
child: constructFiberTree(fiber),
};
return findNextUnitOfWork(fiberWithChild);
}
やってることは3つ
fiberからDOMを作成
その子に対するFiber treeを作成
code:ts
const newFiber = {
type: currentElement.type,
props: currentElement.props,
parent: fiber,
dom: null,
sibling: createFiberTree(rest),
};
単純なツリーだが、親と兄弟の情報を持っているのがポイント
次のUnitOfWorkを決定
再帰した実装を見たらかなりわかる
例えば以下のようにツリーのときは
code:jsx
Didact.render(
<div>
<h1>
<p />
<a />
</h1>
<h2 />
</div>,
container
)
この順序で辿っていく
https://gyazo.com/335dbd5a20c9c69d4f14e9a72f093ffd
まず子を見て、次に兄弟を見て、その次に親を見る
で最終的にrootに戻ってくる
イメージ的には「headerをrenderingする」と決めたらさっさとheaderを全部作っちゃって、その後「sidebarをrenderingする」みちあになるってことか?mrsekut.icon
そういう話ではないか
アニメーションの更新は後でやる、みたいなタスクの種類ごとの優先順位付けか
元の実装がmutableすぎたので、一部immutableな実装に変えた ref ツリー構造は再帰の方が自然に書ける
FiberとHTML DOMが1対1対応する
fiberってどこからどこまでを指す言葉なんだ？
あのオブジェクトのことをfiberというんだよね、
たぶんそれが狭義のfiber
広義にはschedulerとかも含むはず
そのための存在なので
で、タスクというのも曖昧に含んでいそう
performUnitOfWork内でやってること
fiberの作成まで
それを使ってレンダリングするかとかは責務でない
1タスクの構成単位
これがdomとも対応している
fiberはeventみたいな扱いとも言える？
いやeventではないか
タスクって感じではある
キューに突っ込んでいくというよりは、空いたたびにfiberを作っていく感じかな
スタックフレーム的