From 9afe183a8a15bb1a7c16e1f9bb350def649f0f16 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Tue, 4 Apr 2023 13:18:06 -0400 Subject: [PATCH] Fast track very common tag names so we can match them with plain ifs --- .../src/client/ReactDOMComponent.js | 96 ++++++++++++------- .../src/server/ReactDOMServerFormatConfig.js | 17 +++- 2 files changed, 77 insertions(+), 36 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index ca85e019f3b2d..20395d09ac090 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -794,6 +794,17 @@ export function setInitialProperties( // TODO: Make sure that we check isMounted before firing any of these events. switch (tag) { + case 'div': + case 'span': + case 'svg': + case 'path': + case 'a': + case 'g': + case 'p': + case 'li': { + // Fast track the most common tag types + break; + } case 'input': { ReactDOMInputInitWrapperState(domElement, props); // We listen to this event in case to ensure emulated bubble @@ -1037,30 +1048,32 @@ export function setInitialProperties( } return; } + default: { + if (isCustomElement(tag, props)) { + for (const propKey in props) { + if (!props.hasOwnProperty(propKey)) { + continue; + } + const propValue = props[propKey]; + if (propValue == null) { + continue; + } + setPropOnCustomElement(domElement, tag, propKey, propValue, props); + } + return; + } + } } - if (isCustomElement(tag, props)) { - for (const propKey in props) { - if (!props.hasOwnProperty(propKey)) { - continue; - } - const propValue = props[propKey]; - if (propValue == null) { - continue; - } - setPropOnCustomElement(domElement, tag, propKey, propValue, props); + for (const propKey in props) { + if (!props.hasOwnProperty(propKey)) { + continue; } - } else { - for (const propKey in props) { - if (!props.hasOwnProperty(propKey)) { - continue; - } - const propValue = props[propKey]; - if (propValue == null) { - continue; - } - setProp(domElement, tag, propKey, propValue, props); + const propValue = props[propKey]; + if (propValue == null) { + continue; } + setProp(domElement, tag, propKey, propValue, props); } } @@ -1186,6 +1199,17 @@ export function updateProperties( nextProps: Object, ): void { switch (tag) { + case 'div': + case 'span': + case 'svg': + case 'path': + case 'a': + case 'g': + case 'p': + case 'li': { + // Fast track the most common tag types + break; + } case 'input': { // Update checked *before* name. // In the middle of an update, it is possible to have multiple checked. @@ -1343,21 +1367,29 @@ export function updateProperties( } return; } + default: { + if (isCustomElement(tag, nextProps)) { + for (let i = 0; i < updatePayload.length; i += 2) { + const propKey = updatePayload[i]; + const propValue = updatePayload[i + 1]; + setPropOnCustomElement( + domElement, + tag, + propKey, + propValue, + nextProps, + ); + } + return; + } + } } // Apply the diff. - if (isCustomElement(tag, nextProps)) { - for (let i = 0; i < updatePayload.length; i += 2) { - const propKey = updatePayload[i]; - const propValue = updatePayload[i + 1]; - setPropOnCustomElement(domElement, tag, propKey, propValue, nextProps); - } - } else { - for (let i = 0; i < updatePayload.length; i += 2) { - const propKey = updatePayload[i]; - const propValue = updatePayload[i + 1]; - setProp(domElement, tag, propKey, propValue, nextProps); - } + for (let i = 0; i < updatePayload.length; i += 2) { + const propKey = updatePayload[i]; + const propValue = updatePayload[i + 1]; + setProp(domElement, tag, propKey, propValue, nextProps); } } diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index 8d125ced4be28..2df5fb332fa1d 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -2638,6 +2638,16 @@ export function pushStartInstance( } switch (type) { + case 'div': + case 'span': + case 'svg': + case 'path': + case 'a': + case 'g': + case 'p': + case 'li': + // Fast track very common tags + break; // Special tags case 'select': return pushStartSelect(target, props); @@ -2747,15 +2757,14 @@ export function pushStartInstance( ); } default: { - if (type.indexOf('-') === -1) { - // Generic element - return pushStartGenericElement(target, props, type); - } else { + if (type.indexOf('-') !== -1) { // Custom element return pushStartCustomElement(target, props, type); } } } + // Generic element + return pushStartGenericElement(target, props, type); } const endTag1 = stringToPrecomputedChunk('