Optimizing Compiler: Tagging ReactElements

We can make more optimized reconciliation by tagging ReactElements with the "hidden class" of their props. For example, this is guaranteed to always have three props: `className`, `width`, `children`. ``` javascript <div className="foo" style={{ width: w, height: 100 }}>{c}</div> ``` If we could tag every element with these properties with a unique ID: ``` javascript { __t: 7, type: 'div', props: { className: 'foo', style: { width: w, height: 5 }, children: c } } ``` Then we could use the hidden class to generate an optimized diffing algorithm for these instead of iterating over the properties. Presumably, we would only need to do this for `type: <string>` since we only diff native components. Bonus points if we can determine which properties are constant. Perhaps using a property descriptor object: ``` javascript // Constant properties are annotated as 1, other properties are excluded and inferred by props. var t = { className: 1, style: { height: 1 } }; { __t: t, type: 'div', props: { className: 'foo', style: { width: w, height: 5 }, children: c } } ``` We would use a heuristic inside React to determine when to create an optimized differ. For example, after 10+ updates to the same component. Just like a JIT would do. ``` javascript if (oldElement.__t === newElement.__t) { numberOfUpdates++; } else { numberOfUpdates = 0; } if (numberOfUpdates === 10) { optimizedDiffer = generateOptimizedDiffer(newElement); optimizedDiffer(oldElement, newElement); } else if (numberOfUpdates > 10) { optimizedDiffer(oldElement, newElement); } else { manualDiffing(oldElement, newElement); } ```