極小Reactで描画を理解しながら追う

Transcript

1. 極小Reactで描画を理解しながら追う in React Tokyo #20 2026/09/11
2. 自己紹介 河村 直樹（@iwonder118） 化粧品事業会社でWebエンジニアをしてます 東急多摩川駅でTamagawa.devというのをやってます React Tokyo運営、その他諸々カンファレンススタッフ
3. アジェンダ - これをやろうと思った背景 - React の描画をおさらい - 各セクションのお話 - デバックで追ってみる※出来たら
4. これをやろうと思った背景 フロントエンド &PHPカンファレンス北海道に行った
5. これをやろうと思った背景 JSXを作るセッションとソースコードリーディングのハンズオンに参加
6. これをやろうと思った背景 最近Vue.jsをやることになり Chibi Vueで入門
7. これをやろうと思った背景 Reactも意外と小さくできるのでは？
8. これをやろうと思った背景 実際にあった (Build your own React ) https://pomb.us/build-your-own-react/
9. これをやろうと思った背景 とはいえ量があったのでもっと小さく
10. これをやろうと思った背景 作るものの仕様 - TypeScriptで1ファイルかつ、 100行ほど - JSXから最終的に DOM操作で画面が更新されるまで (CSR) - HooksはuseStateのみ - Fiberを簡略化 - 双方向リンクノードでなく、配列にて保持かつ、一気に描画処理 - className・onClickのみ対応 - 常にルートから全コンポーネントを再描画する
11. これをやろうと思った背景 仕様を元に AIといっしょに作業
12. これをやろうと思った背景 Flowじゃないの？
13. これをやろうと思った背景 ごめんなさい
14. これをやろうと思った背景 暖かく見守ってください
15. 完成図
16. 完成図
17. 完成図
18. 完成図
19. React の描画をおさらい JSXから描画されるまで - Trigger - 初回レンダリングまたは、setter(useState)からイベント発火 - Render - コンポーネントをjsxからReactElementへの変換 - ReactElementからReactFiberへの変換 - Commit - ReactFiberから実際のDOM操作
20. 各セクションのお話 Triggerフェーズ - 初回描画 - createRootのrender()をから描画処理が始まる - rootノードをrenderをする関数(createFiberFromElement)に渡す - 再描画 - Hooksのsetterで変化があった場合に描画処理が始まる - 今回はuseStateだけなのでset〇〇 - React本体であればcreateWorkInProgress関数
21. 各セクションのお話 Renderフェーズ - 初回描画 - 受け取ったjsxをランタイムで評価してReactElementに変換 - ReactElementをReactFiberに変換する - 上記的に再帰的に繰り返す - 再描画 - 受け取ったjsxをランタイムで評価してReactElementに変換 - ReactElementをReactFiberに変換する - 変換後のReactFiberを元に差分比較をする
22. 各セクションのお話 JSX
23. 各セクションのお話 JSX - 名前(タグ名、コンポーネント名)、属性、子要素をJavaScriptが評価でき る形で返す - 今回は属性がないのとReactElementオブジェクトで返す 以上！！
24. 各セクションのお話 JSX - tsconfig.jsonで指定 - jsxの設定としてをreact-jsx - jsxIportSourceをnano-reactに設定 - これでvite側で実行時に評価
25. 各セクションのお話 Commitフェーズ - 初回描画 - 作成したReactFiberを元にDOM操作をして描画をする - Commit後に差分比較用にReactFiberを保存する - 再描画 - 差分比較で出た差分をDOM操作をして再描画する - 差分のないDOMはそのまま利用する - Commit後に差分比較用にReactFiberを保存する
26. 宣伝
27. 宣伝
28. 宣伝 チケット &ストア商品発売中 ‼
29. 宣伝 スポンサーが足りないです チケットは9月中旬から！