phaseF

Phase F

bind critical element lifecycle methods to reconciler lifecycle methods

Steps

Fill out critical lifecycle methods

The critical lifecycle methods involve creating and appending elements

createInstance

Already done in phaseC

createInstance(
  type: Type,
  props: Props,
  _rootContainerInstance: Container,
  _hostContext: HostContext
): Instance {
  return createElement(type, props);
}

appendChild

appendChild(parentInstance: Instance, child: Instance | TextInstance): void {
  parentInstance.appendChild(child);
}

appendChildToContainer

Already done in phaseC

appendChildToContainer(
  container: Container,
  child: Instance | TextInstance
): void {
  container.appendChild(child);
}

appendInitialChild

appendInitialChild(
  parentInstance: Instance,
  child: Instance | TextInstance
): void {
  log.debug('appendInitialChild');
  parentInstance.appendChild(child);
}

Interesting Files

src/reconciler.ts

Demo

npm run start