Reactを段階的に覗いてみる

Transcript

1. Reactを段階的に覗いてみる 安井大晟（ytaisei_）

2. 自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目

   • AI Agentの開発をしています

3. 第一回React TokyoのLTでも登壇させていただきました！

4. 普段意識しているReact • 状態管理 • コンポーネント設計 • データフェッチ戦略 など

5. 普段意識しているReact • 状態管理 • コンポーネント設計 • データフェッチ戦略 など Reactのコンポーネントが どのようにブラウザにレンダリングしているかを意識する必要はない

6. Reactを覗いていきましょう

7. 段階を追って理解する 1. React Componentが宣言的にレンダリング される 2. JSXがトランスパイル されReact Elementに変換される 3.

   React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる ＊段階を追って理解をするため、あえて抽象的な表現を使っています

8. 段階を追って理解する 本日のゴールは Reactのソースコードから 実際にDOMの操作をしている箇所に辿り着くことです！

9. 1. React Componentが宣言的にレンダリングされる

10. React Componentが宣言的にレンダリングされる • JSX構文でDOM構造とスタイリングをする • Stateを用いてリアクティブな画面を設計する • useEffectで副作用を管理する など

11. React Componentが宣言的にレンダリングされる • JSX構文でDOM構造とスタイリングをする • Stateを用いてリアクティブな画面を設計する • useEffectで副作用を管理する など 命令的に

    DOMの操作をする必要がないのは 宣言的UIのメリット

12. ところで、 JQueryだったりで命令的に Webフロントを開発する 機会は減ったのではないでしょうか

13. 当時の自分の感覚 JSXが直接描画されてる？？？

14. 実際は複数のフェーズに分かれている

15. 実際は複数のフェーズに分かれている 今回はブラウザのレンダリング処理までは話せません ...

16. 2. JSXがトランスパイルされ React Elementに変換される

17. JSXがトランスパイルされReact Elementに変換される

18. JSXがトランスパイルされReact Elementに変換される JSXはJSの構文拡張なのでそのまま実行ができない ビルド時に babelなどでのトランスパイル処理が必要

19. JSXがトランスパイルされReact Elementに変換される 参考：https://babeljs.io/docs/babel-plugin-transform-react-jsx Classic React17以降

20. JSXがトランスパイルされReact Elementに変換される React Elementの型定義 React Elementの例

21. JSXがトランスパイルされReact Elementに変換される React Element React Node

22. JSXがトランスパイルされReact Elementに変換される React Element React Node ReactNodeはReactElementを内包する Reactがレンダーできるすべての値を表す型

23. 次に発生する疑問 オブジェクトってレンダリングできる？？？

24. 3. React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる

25. Reactの基本 - createRoot 1. getElementByIdでtargetのDOMを取得 2. targetのDOMをcreateRootに渡す 3. root.renderにレンダリングしたい React

    Nodeを渡す root.renderにレンダリング対象の React Nodeを渡す

26. root.renderの中では何をしてる ...？

27. ReactElementを元にFiberTreeが構築されDOMを操作し、ブラウザにレンダリングされる

28. React Fiberについて

29. React Fiber Architectureについて https://jser.dev/2023-07-14-initial-mount/#1-brief-introduction-on-fiber-architecture https://github.com/acdlite/react-fiber-architecture?tab=readme-ov-file 「React Fiber Architecture」 Reactは内部でFiber Treeを構築して

    差分の更新を最小限に抑えている

30. React Fiber Architectureについて - Reconciliation • currentはUIに描画される 現在のバージョンのFiberTree / Node

    • workInProgressは 新たに構築しているFiberTree / Node これらを比較して差分を検知する

31. React Fiber Architectureについて - 4つの実行フェーズ 1. Trigger Phase 2. Schedule

    Phase a. 実行されるタスクに優先順位を設定 する b. Fiber Architectureの中でも特に重要（今回はスキップ） 3. Render Phase a. スケジュールされたタスクを実行し、 新しいFiber Treeを構築してDOMに変更が必要な対象を整理 4. Commit Phase a. 更新対象をDOMに反映

32. Render Phase

33. Performタブで確認する（初回マウントの場合）

34. Render Phase - renderRootSync RootのFiberNodeから順に FiberTreeを構築する 対象のコード：renderRootSync 1. prepareFreshStackでFiberTree構築 のための準備をする

    2. workLoopSyncでworkInProgressがnullになる（末 端のFiberNodeに到達する）まで performUnitOfWorkを実行する

35. Render Phase - performUnitOfWork 各FiberNodeごとにbeginWorkを実行する

36. Render Phase - performUnitOfWork FiberNodeごとにbeginWorkを実行する 対象のコード：beginWork

37. Render Phase - completeWork 対象のコード：completeWork 1. createInstanceで実際の DOMのインスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行

38. Render Phase - completeWork 対象のコード：completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行

39. Render Phase - 全体像 Fiber Treeが完成し必要な DOM Nodeが作成され、 DOM操作が必要な FiberNodeに

    フラグをつけることができた

40. Commit Phase

41. 実際は複数のフェーズに分かれている

42. Commit Phase 1. 再帰的に削除予定の子要素を削除する 2. 実際にDOMの挿入を行う （この実装を見ていきましょう） Fiber Treeを元にDOMの削除と更新を行う 対象のコード：commitMutationEffects

43. 段階を追って理解する 本日のゴールは Reactのソースコードから 実際にDOMの操作をしている箇所に辿り着くことです！ https://github.com/facebook/react/blob/4f604941569d2e8947ce1460a0b2997e835f37b9/packag es/react-reconciler/src/ReactFiberCommitWork.js#L2583-L2587 ReactはFlowというAltJSで書かれています

44. 再掲）Render Phase - completeWork 対象のコード：completeWork 1. createInstanceで実際のDOMの インスタンスを作成 2. appendAllChildrenでサブツリーのDOM

    Nodeを全 てappendしたDOM Nodeを作成 3. それをstateNodeに代入 completeWorkをFiber Treeを逆に戻るように実行

45. Commit Phase - DOMの挿入

46. Commit Phase - DOMの挿入

47. Commit Phase - DOMの挿入

48. まとめ • React Componentが宣言的にレンダリング される • JSXがトランスパイル されReact Elementに変換される •

    React Nodeを元にFiber Treeが構築され DOMを操作し、ブラウザにレンダリングされる

49. ご清聴ありがとうございました！