Part 6 — React の内側 (おまけ)
ここからは おまけ の Part です。肩の力を抜いて読んでください。React を使うだけなら Part 3〜5 と Part 7 があれば十分で、この Part を読まなくても困りません。
ただ、開発をしていると「Virtual DOM」「Fiber」「Hook の呼び出し順序」といった言葉が話題にのぼる場面があります。そのときに「ああ、中はこんな雰囲気だったな」と思い出せるだけで、デバッグやパフォーマンス議論でぐっと迷いにくくなります。本 Part はそのための地図だと思ってください。
本 Part は 概念レベル に抑えています。React の内部実装はバージョンごとに変わるので、ソースコードの具体的な行番号や関数名には深入りしません。イメージが掴めればここでの目標は達成です。
3 つのレイヤーで眺める
この Part は、外側の「見えている概念」から内側の「実装の仕組み」に向かって、3 段階で降りていく構成になっています。
図 6.0.1 Part 6 で扱う 3 つのレイヤー
上の層ほど表面的な概念、下の層ほど実装に近い仕組みです。全部読むと「3.4 useState の順序ルールってそういうことか」「useTransition が中断できるのは Fiber のおかげか」と、Part 3〜4 で触れたルールの 理由 が腑に落ちるようになっています。
この Part の章一覧
この Part を読み終えると
- 「React が差分を効率的に計算できる」と言ったときの、内部でやっていることがイメージできるようになります
- Fiber アーキテクチャが 中断可能なレンダー のために導入されたことが分かります
useStateの「呼び出し順序が重要」というルールが、なぜ必要なのかが腑に落ちます
何度でも繰り返しますが、この Part は おまけ です。読み飛ばしても Part 3〜5 と Part 7 の理解には影響しません。興味が向いたときに、好きな章から覗いてみてください。