2日目：ReactがどのようにUIを更新するか
昨日はReactが「何をするか」を学びました。今日は、それが「どのように」行われるかを学びました。
ReactがUIのどこを正確に変更すべきかを、どのようにして知るのか不思議に思っていました。段落内の1単語を変えただけで、Reactはページ全体を再構築するのでしょうか？いいえ、そうではありません。Reactは高速性を維持するために、スマートなプロセスを使用しています。
Reactの更新サイクルの内訳は以下の通りです。
Reconciliation（再調和）とDiffing（差分抽出）
Reconciliationは戦略であり、Diffingは実際の手法です。Reactは、新しいVirtual DOMツリーを古いツリーと比較します。
2つのツリーを比較することは、コンピュータにとって困難な作業です。標準的なアルゴリズムでは遅すぎます。Reactは、次の2つの仮定を置くことで高速性を維持しています。
- 要素のタイプが変わる場合、Reactは古いツリーを破棄し、新しいツリーを構築します。
- タイプが同じままである場合、Reactは変更された属性のみを更新します。
これにより、ReactはO(n)の時間で実行できます。その結果、更新が瞬時に行われているように感じられます。
2つのフェーズ
Reactは作業を2つの明確なステップに分割しています。
1. Render Phase（レンダーフェーズ）
これは計画段階です。Reactはコンポーネントを呼び出し、変更内容を計算します。ここではReal DOMには一切触れません。建築家が設計図を描いているところをイメージしてください。
2. Commit Phase（コミットフェーズ）
これは建設段階です。Reactは計算された変更をReal DOMに適用します。この部分は同期的に行われます。一度始まると、作業が完了するまで止まりません。
重要： ReactはDOMを更新しますが、ピクセルを描画するのはブラウザです。Reactは構造を扱い、ブラウザは視覚的なレンダリングを扱います。
React Fiber
React 16より前は、レンダリングは同期的に行われていました。レンダリングに時間がかかると、ブラウザがフリーズしてしまい、スクロールやタイピングができなくなることがありました。
Fiberがこれを変えました。FiberはRender Phaseを管理するエンジンです。これにより、Reactは以下のことが可能になりました。
- 作業を一時停止し、後で再開すること。
- バックグラウンドデータの処理よりも、ユーザーのタイピングのような緊急性の高い更新を優先すること。
- 作業を小さな塊（チャンク）に分割すること。
Virtual DOMはデータ構造であり、Fiberはそのデータに対して操作を行うアルゴリズムです。
フローのまとめ：
• State（状態）が変化する。 • Render Phase: ReactがDiffingを通じて変更を計画する。 • Commit Phase: ReactがReal DOMを更新する。 • ブラウザ: レイアウト、ペイント、および合成（Composite）。 • 画面にピクセルが表示される。