2023/8/11 react-deep-diveをやる - mrsekut-p

2023/8/11 react-deep-diveをやる

これを参考にやってみる

renderToStringとhydrateを作って学ぶReactのSSR・SSG

Didactを参考に作られているらしい

https://github.com/mrsekut/react-deep-dive

packages/の内部は作者が用意した諸々の軽量実装

react

Reactの再実装

react-dom

render

hydrate

react-reconciler

scheduler

Counter App

$ yarn

$ diaenv allow

run

$ npm run start

継続的にbuild

$ npm run dev -- -w

Reactの再実装

react-deep-dive/docs/はじめに.md at 2023/main · shuta13/react-deep-dive · GitHub

はじめに.md

必要な知識の整理.md

react-reconcilerの再実装

古いReactの実装だ

要素が変わった場合はツリー全てを作り直す

属性だけが変わった場合は属性のみを書き換える

諸々実装が終わった後に再度訪問してリンク先とか読みたいmrsekut.icon

実装をはじめる前に.md

$ npx create-toy-react-app 2021 template <my-app>

npm run build

node v18だとエラーになったのでv16にした

npm run start

http://localhost:51171/

諸々実装が終わった後に再度訪問してリンク先とか読みたいmrsekut.icon

DOMを描画する.md ref

ts化しようかと思ったけどだるすぎたので断念

React.createElementの実装

ReactDOM.renderの実装

お〜、renderingできた

でもまだcreatReact.createElement使ってないな

2023/8/14 React Fiberの再実装

差分検出処理を実装する.md

現状の実装の問題点

ある要素を操作する度に DOM に新しいノードを追加している点

不完全なUIが表示される可能性がある

不完全なUIが表示されないように、まるごとDOMツリーを反映する

それをcommitRootでしてる

全てのタスクが終わった段階でcommitRootする

これがReactのCommit Phase

DOM の更新・削除

elementと、前回のfiber treeの比較

DOMへのcommitが終わったら

fiber treeeへの参照を、currentRootに保存しておく

fiberのalternative property

前回のcommitのfiber treeの参照？

fiber.effectTagにaction名のようなものを保持させる

UPDATE | PLACEMENT | DELETION

これごとにcommitWorkで実際の処理を行う

https://twitter.com/mizchi/status/1689623011530571777

https://zenn.dev/yumemi_inc/articles/react-lifetime-of-variable

https://zenn.dev/did0es/articles/b41d0de60934cc

https://github.com/shuta13/react-deep-dive/blob/2023/main/docs/%E5%B7%AE%E5%88%86%E6%A4%9C%E5%87%BA%E5%87%A6%E7%90%86%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B.md

SSGを実装する.md

SSRを実装する.md

SSR・SSGの実装をはじめる前に.md

おわりに.md

カウンターが動くようにする.md

SSR

$ npx create-toy-react-app 2023 ssr-template <your-ssr-app>

SSG

$ npx create-toy-react-app 2023 ssg-template <your-ssg-app>

hydration

関連

RSCの再実装

React Server Components#648a862619827000002b38e1