Optimizing Compiler: Compiling to Internals

[sebmarkbage]

This optimization is a renderer specific optimization. It is about knowing how React will process a particular component in its internals and then inlining that internal work into the user code.

It comes in two flavors.

Known Host Component

function Foo(props) {
  if (props.data.type === 'img') {
    return <img src={props.data.src} className={props.className} />;
  }
  return <span className={props.className}>{props.children}</span>;
}

Into this:

function Foo_optimizedMount(props) {
  if (props.data.type === 'img') {
    var img = document.createElement('img');
    img.className = props.className;
    img.src = props.data.src;
    return {
      node: img,
      listeners: ReactEventListeners.trap(img, 'error', 'load')
    };
  }
  var span = document.createElement('span');
  span.className = props.className;
  var children = ReactChildren.mountNestedChildrenIntoParent(this.props.children, span);
  return { node: span, children };
}

function Foo_optimizedUpdate(instance, oldProps, newProps) {
  if (oldProps.data.type !== newProps.data.type) {
    Foo_optimizedUnmount(instance);
    return Foo_optimizedMount(newProps);
  }
  if (props.data.type === 'img') {
    img.className = props.className;
    img.src = props.data.src;
    return instance;
  }
  span.className = props.className;
  ReactChildren.updateNestedChildrenInParent(this.props.children, instance);
  return instance;
}

function Foo_optimizedUnmount(instance) {
  if (oldProps.data.type !== newProps.data.type) {
    Foo_optimizedUnmount(instance);
    return Foo_optimizedMount(newProps);
  }
  if (props.data.type === 'img') {
    ReactEventListeners.release(instance.listeners);
  }
  ReactChildren.unmountNestedChildrenInParent(instance);
}

Composite Components

Similarly, composite components can pick different code branches to imperatively update its children. For example, a known constant value wouldn't be considered, and comparison of a single property can potentially bail out a tree.

Although it is unclear if this has significant benefits over these two other optimizations:

#3227
#7323