reactを自作するやつやってみた

元記事

pomb.us

日本語訳

zenn.dev

環境構築

環境自体はreact-scriptsを使用する

やってみて

• Fiberの名前だけ知らなかったものがどういったものかわかった
• JSX解釈の実装方法を学べた
• 他の処理を妨げないようにrequestIdleCallbackでループを作って画面を組み立てる仕組みがわかった
• 「hooksは実質配列」というの雰囲気しか理解していなかった所を実装することで学べた
• 雰囲気しか理解していなかったdocument.createElementを使ったdomを組み立てる仕組みが学べた

やってみたソース

GitHub - yuzu-sandbox/build-own-react

あとでTypescriptで実装し直そうという考えがあったのでとても雑に写経してしまった。ただ普段TSしか書いてないので型の補助がないjsで書くとちょこちょこtypoとかをしてしまったのでゆるふわでも最初からTSで書けばよかったなとかは思った。

ハマった点

いくつかハマった箇所があったので書いておく

jsx pragmaうまく動かない

作業中Reactを自作のものに置き換える際に/** @jsx *を使用して、React.createElementを置き換える必要があるがReact17からjsxの解決方法が変わってしまったので旧実装を使用する必要がある

react-scriptsではDISABLE_NEW_JSX_TRANSFORM=trueを環境変数に設定する必要がある。.envファイルを使用して設定しておくのが一番楽だと思われる

github.com

Step6 差分検出 - Reconciliation

一通り書いて、最初のレンダリング時にeventどうやってセットされるんだろうと思ったらいつの間にかcreateDom関数の中身がupdateDomに置き換えられていた*1

updateDom関数が定義されたらcreateDom内をupdateDomに置き換える

function createDom(fiber) {
  const dom = fiber.type === "TEXT_ELEMENT"
    ? document.createTextNode("")
    : document.createElement(fiber.type)
  updateDom(dom, {}, fiber.props)
  return dom
}

*1:ぱっと見書き換えてないような気がするんだけどcodesandbox見てて気づいた