From f33cc3e49cc422af321bdd58817fbbb64dc23e77 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 7 Dec 2024 14:19:25 +0100 Subject: [PATCH] Use == where possible and precompute .length --- src/diff/children.js | 25 +++++++++++++------------ src/diff/index.js | 26 +++++++++++++------------- src/diff/props.js | 14 +++++++------- src/render.js | 2 +- 4 files changed, 34 insertions(+), 33 deletions(-) diff --git a/src/diff/children.js b/src/diff/children.js index 68b8f27f89..80090ec996 100644 --- a/src/diff/children.js +++ b/src/diff/children.js @@ -73,7 +73,8 @@ export function diffChildren( newParentVNode, renderResult, oldChildren, - oldDom + oldDom, + newChildrenLength ); for (i = 0; i < newChildrenLength; i++) { @@ -151,7 +152,8 @@ function constructNewChildrenArray( newParentVNode, renderResult, oldChildren, - oldDom + oldDom, + newChildrenLength ) { /** @type {number} */ let i; @@ -160,7 +162,6 @@ function constructNewChildrenArray( /** @type {VNode} */ let oldVNode; - const newChildrenLength = renderResult.length; let oldChildrenLength = oldChildren.length, remainingOldChildren = oldChildrenLength; @@ -177,7 +178,7 @@ function constructNewChildrenArray( typeof childVNode == 'boolean' || typeof childVNode == 'function' ) { - childVNode = newParentVNode._children[i] = null; + newParentVNode._children[i] = null; continue; } // If this newVNode is being reused (e.g.
{reuse}{reuse}
) in the same diff, @@ -258,7 +259,7 @@ function constructNewChildrenArray( if (typeof childVNode.type != 'function') { childVNode._flags |= INSERT_VNODE; } - } else if (matchingIndex !== skewedIndex) { + } else if (matchingIndex != skewedIndex) { // When we move elements around i.e. [0, 1, 2] --> [1, 0, 2] // --> we diff 1, we find it at position 1 while our skewed index is 0 and our skew is 0 // we set the skew to 1 as we found an offset. @@ -301,7 +302,7 @@ function constructNewChildrenArray( if (remainingOldChildren) { for (i = 0; i < oldChildrenLength; i++) { oldVNode = oldChildren[i]; - if (oldVNode != null && (oldVNode._flags & MATCHED) === 0) { + if (oldVNode != null && (oldVNode._flags & MATCHED) == 0) { if (oldVNode._dom == oldDom) { oldDom = getDomSibling(oldVNode); } @@ -347,7 +348,7 @@ function insert(parentVNode, oldDom, parentDom) { do { oldDom = oldDom && oldDom.nextSibling; - } while (oldDom != null && oldDom.nodeType === 8); + } while (oldDom != null && oldDom.nodeType == 8); return oldDom; } @@ -402,16 +403,16 @@ function findMatchingIndex( // If there is an unkeyed functional VNode, that isn't a built-in like our Fragment, // we should not search as we risk re-using state of an unrelated VNode. let shouldSearch = - (typeof type !== 'function' || type === Fragment || key) && + (typeof type != 'function' || type === Fragment || key) && remainingOldChildren > - (oldVNode != null && (oldVNode._flags & MATCHED) === 0 ? 1 : 0); + (oldVNode != null && (oldVNode._flags & MATCHED) == 0 ? 1 : 0); if ( oldVNode === null || (oldVNode && key == oldVNode.key && type === oldVNode.type && - (oldVNode._flags & MATCHED) === 0) + (oldVNode._flags & MATCHED) == 0) ) { return skewedIndex; } else if (shouldSearch) { @@ -420,7 +421,7 @@ function findMatchingIndex( oldVNode = oldChildren[x]; if ( oldVNode && - (oldVNode._flags & MATCHED) === 0 && + (oldVNode._flags & MATCHED) == 0 && key == oldVNode.key && type === oldVNode.type ) { @@ -433,7 +434,7 @@ function findMatchingIndex( oldVNode = oldChildren[y]; if ( oldVNode && - (oldVNode._flags & MATCHED) === 0 && + (oldVNode._flags & MATCHED) == 0 && key == oldVNode.key && type === oldVNode.type ) { diff --git a/src/diff/index.js b/src/diff/index.js index 6e139a6094..a05c03cc95 100644 --- a/src/diff/index.js +++ b/src/diff/index.js @@ -171,10 +171,10 @@ export function diff( c._nextState, componentContext ) === false) || - newVNode._original === oldVNode._original) + newVNode._original == oldVNode._original) ) { // More info about this here: https://gist.github.com/JoviDeCroock/bec5f2ce93544d2e6070ef8e0036e4e8 - if (newVNode._original !== oldVNode._original) { + if (newVNode._original != oldVNode._original) { // When we are dealing with a bail because of sCU we have to update // the props, state and dirty-state. // when we are dealing with strict-equality we don't as the child could still @@ -294,7 +294,7 @@ export function diff( ? MODE_HYDRATE | MODE_SUSPENDED : MODE_SUSPENDED; - while (oldDom && oldDom.nodeType === 8 && oldDom.nextSibling) { + while (oldDom && oldDom.nodeType == 8 && oldDom.nextSibling) { oldDom = oldDom.nextSibling; } @@ -313,7 +313,7 @@ export function diff( } } else if ( excessDomChildren == null && - newVNode._original === oldVNode._original + newVNode._original == oldVNode._original ) { newVNode._children = oldVNode._children; newVNode._dom = oldVNode._dom; @@ -405,8 +405,8 @@ function diffElementNodes( let checked; // Tracks entering and exiting namespaces when descending through the tree. - if (nodeType === 'svg') namespace = SVG_NAMESPACE; - else if (nodeType === 'math') namespace = MATH_NAMESPACE; + if (nodeType == 'svg') namespace = SVG_NAMESPACE; + else if (nodeType == 'math') namespace = MATH_NAMESPACE; else if (!namespace) namespace = XHTML_NAMESPACE; if (excessDomChildren != null) { @@ -418,8 +418,8 @@ function diffElementNodes( // excessDomChildren so it isn't later removed in diffChildren if ( value && - 'setAttribute' in value === !!nodeType && - (nodeType ? value.localName === nodeType : value.nodeType === 3) + 'setAttribute' in value == !!nodeType && + (nodeType ? value.localName == nodeType : value.nodeType == 3) ) { dom = value; excessDomChildren[i] = null; @@ -429,7 +429,7 @@ function diffElementNodes( } if (dom == null) { - if (nodeType === null) { + if (nodeType == null) { return document.createTextNode(newProps); } @@ -530,7 +530,7 @@ function diffElementNodes( newVNode, oldVNode, globalContext, - nodeType === 'foreignObject' ? XHTML_NAMESPACE : namespace, + nodeType == 'foreignObject' ? XHTML_NAMESPACE : namespace, excessDomChildren, commitQueue, excessDomChildren @@ -551,7 +551,7 @@ function diffElementNodes( // As above, don't diff props during hydration if (!isHydrating) { i = 'value'; - if (nodeType === 'progress' && inputValue == null) { + if (nodeType == 'progress' && inputValue == null) { dom.removeAttribute('value'); } else if ( inputValue !== UNDEFINED && @@ -560,11 +560,11 @@ function diffElementNodes( // is missing the progress bar is treated as indeterminate. // To fix that we'll always update it when it is 0 for progress elements (inputValue !== dom[i] || - (nodeType === 'progress' && !inputValue) || + (nodeType == 'progress' && !inputValue) || // This is only for IE 11 to fix