Match-id-876a4a8b542f037d818e2b0d2eeb47f4b51faf1e

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);
-
+  let propName;
-  for (let i = 0; i < keysOfProps.length; i++) {
+  let propVal;
-    const propName = keysOfProps[i];
+  const keyLength = keysOfProps.length;
-    const propVal = props[propName];
+  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<any>,
   isNativeTag: boolean,
 ): void {
-  for (let i = 0; i < changeList.length; i++) {
+  const listLength = changeList.length;
-    const { propName, propVal } = changeList[i];
+  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++) {
+  for (let i = 0; i < oldPropsLength; i++) {
-    const propName = keysOfOldProps[i];
+    propName = keysOfOldProps[i];
     // 新属性中包含该属性或者该属性为空值的属性不需要处理
     if (keysOfNewProps.includes(propName) || oldProps[propName] == null) {
       continue;
     }
 
     if (propName === 'style') {
-      const oldStyle = oldProps[propName];
+      oldStyle = oldProps[propName];
-      const styleProps = Object.keys(oldStyle);
+      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];
+    propName = keysOfNewProps[i];
-    const newPropValue = newProps[propName];
+    newPropValue = newProps[propName];
-    const oldPropValue = oldProps != null ? oldProps[propName] : null;
+    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;
+      newHTML = newPropValue ? newPropValue.__html : undefined;
-      const oldHTML = oldPropValue ? oldPropValue.__html : undefined;
+      oldHTML = oldPropValue ? oldPropValue.__html : undefined;
       if (newHTML != null) {
         if (oldHTML !== newHTML) {
           toBeUpdatedProps.push({