Optimizing Compiler: Compiling to Internals

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 ``` js 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: ``` js 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 t…