Reactでのレンダーとコミット

• Reactで書いたコンポーネントは画面に表示する前に、Reactによっとレンダーされる必要がある。
• Reactで書いたコンポーネントを表示する3つのステップ
  • ステップ 1: レンダーのトリガ
    • 1.コンポーネントの初回のレンダー
      • React単体においては特定のターゲットとなるDOMに対してcreateRootを用いてrenderメソッドをコンポーネントメソッドをコンポーネントを呼び出す。
    • 2.コンポーネント(または親コンポーネント)のstateの更新によるレンダー
      • useStateの返り値のset関数を用いてレンダーをトリガーすることができる
      • set関数を実行すると自動的にレンダーがキューイングに入る(多分React Schedulerと定義されているあたりの話)
  • ステップ 2 : React がコンポーネントをレンダー
    • レンダーとはReactがコンポーネントを呼び出すことを指す
    • レンダー初回時にReactはrootコンポーネントを呼び出す
    • 次回以降のレンダーはstateの更新によってトリガーされた関数コンポーネントをReactが呼び出す。Reactは前回のレンダーからどこが変わったのか、変わらなかったのかを計算する。コミットフェーズまでこの情報は使われない。
    • 上記のプロセスは再起的に発生して、コンポーネントがなくなり、表示されるべき内容を知り尽くすまで行われる
  • ステップ 3 : React が DOM への変更をコミットする
    • コンポーネントをレンダーしたあと、ReactはDOMを変更する
    • 初回レンダー時にはappendChild DOM APIを利用して、作成したDOMノードを画面に表示する
    • 再レンダー時にはレンダー中に計算された必要最小限のDOM変更をする(レンダー間で違いがあった場合にのみDOM ノードを変更する)
    • レンダー結果が前回と同一である場合、React は DOM を触らない
    • ReactがDOMを更新したら、ブラウザを再描画する。その再描画するプロセスは「ブラウザレンダリング」として知られている。Reactの公式ドキュメントでは混乱を避けるために、「ペイント」という呼び方に変えている。

参照

レンダーとコミット