mongolyyのブログ

開発(Javascript, Typescript, React, Next.js)や開発手法(スクラム, アジャイル)、勉強したことについて色々書ければと。

「Building React From Scratch」動画の視聴メモ（後編）

React

はじめに

mongolyy.hatenablog.com

に引き続き、


www.youtube.com

を見ていこうと思います。

動画視聴メモ

Reconciler

https://github.com/zpao/building-react-from-scratch/blob/master/dilithium/src/Reconciler.js

function mountComponent(component) {
  // This will generate the DOM node that will go into the DOM. We defer to the
  // component instance since it will contain the renderer specific implementation
  // of what that means. This allows the Reconciler to be reused across DOM & Native.
  let markup = component.mountComponent();

  // React does more work here to ensure that refs work. We don't need to.
  return markup;
}

まずは、mountComponent。これはレンダラーによらず（ReactDOM & React Native）、DOMノードの生成に使われる。

function receiveComponent(component, element) {
  // Shortcut! We won't do anythign if the next element is the same as the
  // current one. This is unlikely in normal JSX usage, but it an optimization
  // that can be unlocked with Babel's inline-element transform.
  let prevElement = component._currentElement;
  if (prevElement === element) {
    return;
  }

  // Defer to the instance.
  component.receiveComponent(element);
}

次に、receiveComponent。これは現在のelementから何も変わっていなければ、何もしないショートカットを備えている。

Internal Component Lifecycle

  1. constructor
  2. mountComponent
  3. receiveComponent
  4. updateComponent
  5. unmountComponent

Component API

https://github.com/zpao/building-react-from-scratch/blob/master/dilithium/src/Component.js

主な関数は以下のような構成

  • constructor
    • propsをセットして、必要なプロパティの準備、render関数があるチェックをする。
    • 実際にこの関数が直接呼ばれることはなく、基底クラスとして#superで呼び出される。
  • setState
    • キューに格納し、バッチ処理でstateをセットしている
    • partial stateは非同期で処理される（サンプルコードでは同期処理のように書かれているが）
  • mountComponent
    • componentWillMountを呼び出す。
    • Reconciler#mountComponentを通して、実際に描画するmarkupを作成する
  • receiveComponent
    • updateCompnentするためのグルーコード
  • updateComponent
    • DOMノードを書き換える
  • unmountComponent

おわりに

Component APIはReconcilerのAPIを使用して、マークアップを生成し、それをReact-domを使用して、実際のDOMに反映している感じっぽい。
で、ReconcilerはReact DOMとReact Nativeで共通化されたコードが有る。
ということがわかりました。

ReconcilerはReactの中でも重要な役割を担っていると改めて感じました。