はじめに

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

constructor
mountComponent
receiveComponent
updateComponent
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
- Reconciler#unmountComponentを通して、コンポーネントをアンマウントする

おわりに

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

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