diff --git a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts index 482a15a9..d0755511 100644 --- a/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts +++ b/libs/horizon/src/dom/DOMPropertiesHandler/DOMPropertiesHandler.ts @@ -11,20 +11,18 @@ import { isEventProp, isNativeElement } from '../validators/ValidateProps'; function updateOneProp(dom, propName, isNativeTag, propVal?, isInit?: boolean) { if (propName === 'style') { setStyles(dom, propVal); - } else if (propName === 'dangerouslySetInnerHTML') { - dom.innerHTML = propVal.__html; - } else if (propName === 'children') { // 只处理纯文本子节点,其他children在VNode树中处理 - const type = typeof propVal; - if (type === 'string') { - dom.textContent = propVal; - } else if (type === 'number') { - dom.textContent = propVal + ''; // 这种数字转字符串的方式效率最高 - } } else if (isEventProp(propName)) { // 事件监听属性处理 if (!allDelegatedHorizonEvents.has(propName)) { listenNonDelegatedEvent(propName, dom, propVal); } + } else if (propName === 'children') { // 只处理纯文本子节点,其他children在VNode树中处理 + const type = typeof propVal; + if (type === 'string' || type === 'number') { + dom.textContent = propVal; + } + } else if (propName === 'dangerouslySetInnerHTML') { + dom.innerHTML = propVal.__html; } else { if (!isInit || (isInit && propVal != null)) { updateCommonProp(dom, propName, propVal, isNativeTag); @@ -40,10 +38,12 @@ export function setDomProps( ): void { const isNativeTag = isNativeElement(tagName, props); const keysOfProps = Object.keys(props); - - for (let i = 0; i < keysOfProps.length; i++) { - const propName = keysOfProps[i]; - const propVal = props[propName]; + let propName; + let propVal; + const keyLength = keysOfProps.length; + for (let i = 0; i < keyLength; i++) { + propName = keysOfProps[i]; + propVal = props[propName]; updateOneProp(dom, propName, isNativeTag, propVal, true); } @@ -55,9 +55,12 @@ export function updateDomProps( changeList: Array, isNativeTag: boolean, ): void { - for (let i = 0; i < changeList.length; i++) { - const { propName, propVal } = changeList[i]; - + const listLength = changeList.length; + let propName; + let propVal; + for (let i = 0; i < listLength; i++) { + propName = changeList[i].propName; + propVal = changeList[i].propVal; updateOneProp(dom, propName, isNativeTag, propVal); } } @@ -73,19 +76,24 @@ export function compareProps( const keysOfOldProps = Object.keys(oldProps); const keysOfNewProps = Object.keys(newProps); + const oldPropsLength = keysOfOldProps.length; + let propName; + let oldStyle; + let styleProps; + let styleProp; // 找到旧属性中需要删除的属性 - for (let i = 0; i < keysOfOldProps.length; i++) { - const propName = keysOfOldProps[i]; + for (let i = 0; i < oldPropsLength; i++) { + propName = keysOfOldProps[i]; // 新属性中包含该属性或者该属性为空值的属性不需要处理 if (keysOfNewProps.includes(propName) || oldProps[propName] == null) { continue; } if (propName === 'style') { - const oldStyle = oldProps[propName]; - const styleProps = Object.keys(oldStyle); + oldStyle = oldProps[propName]; + styleProps = Object.keys(oldStyle); for (let j = 0; j < styleProps.length; j++) { - const styleProp = styleProps[j]; + styleProp = styleProps[j]; updatesForStyle[styleProp] = ''; } } else if ( @@ -110,11 +118,17 @@ export function compareProps( } } + let newPropValue; + let oldPropValue; + let oldStyleProps; + let newStyleProps; + let newHTML; + let oldHTML; // 遍历新属性,获取新增和变更属性 for (let i = 0; i < keysOfNewProps.length; i++) { - const propName = keysOfNewProps[i]; - const newPropValue = newProps[propName]; - const oldPropValue = oldProps != null ? oldProps[propName] : null; + propName = keysOfNewProps[i]; + newPropValue = newProps[propName]; + oldPropValue = oldProps != null ? oldProps[propName] : null; if (newPropValue === oldPropValue || (newPropValue == null && oldPropValue == null)) { // 新旧属性值未发生变化,或者新旧属性皆为空值,不需要进行处理 @@ -124,18 +138,18 @@ export function compareProps( if (propName === 'style') { if (oldPropValue) { // 之前 style 属性有设置非空值 // 原来有这个 style,但现在没这个 style 了 - const oldStyleProps = Object.keys(oldPropValue); + oldStyleProps = Object.keys(oldPropValue); for (let j = 0; j < oldStyleProps.length; j++) { - const styleProp = oldStyleProps[j]; + styleProp = oldStyleProps[j]; if (!newPropValue || !Object.prototype.hasOwnProperty.call(newPropValue, styleProp)) { updatesForStyle[styleProp] = ''; } } // 现在有这个 style,但是和原来不相等 - const newStyleProps = newPropValue ? Object.keys(newPropValue) : []; + newStyleProps = newPropValue ? Object.keys(newPropValue) : []; for (let j = 0; j < newStyleProps.length; j++) { - const styleProp = newStyleProps[j]; + styleProp = newStyleProps[j]; if (oldPropValue[styleProp] !== newPropValue[styleProp]) { updatesForStyle[styleProp] = newPropValue[styleProp]; } @@ -150,8 +164,8 @@ export function compareProps( updatesForStyle = newPropValue; } } else if (propName === 'dangerouslySetInnerHTML') { - const newHTML = newPropValue ? newPropValue.__html : undefined; - const oldHTML = oldPropValue ? oldPropValue.__html : undefined; + newHTML = newPropValue ? newPropValue.__html : undefined; + oldHTML = oldPropValue ? oldPropValue.__html : undefined; if (newHTML != null) { if (oldHTML !== newHTML) { toBeUpdatedProps.push({