perf: 优化渲染节点

src/packages/badge/badge.taro.tsx

@@ -36,19 +36,17 @@
     right,
     fill,
     size,
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = { ...defaultProps, ...props }
+
   const classPrefix = 'nut-badge'
   const isHarmony = harmony()
   const classes = classNames(classPrefix, className)
   const badgeRef = useRef(null)
   const [contentStyle, setContentStyle] = useState({})
 
-  function content() {
-    if (dot || typeof value === 'object' || value === 0) return null
-    if (typeof value === 'number' && typeof max === 'number') {
+  function getContent() {
+    if (dot || value === 0) return null
+    if (typeof value === 'number') {
       return max < value ? `${max}+` : `${value}`
     }
     return value
@@ -70,7 +68,7 @@
     [`${classPrefix}-sup`]: isNumber() || isString() || dot,
     [`${classPrefix}-number`]: isNumber(),
     [`${classPrefix}-one`]:
-      typeof content() === 'string' && `${content()}`?.length === 1,
+      typeof getContent() === 'string' && `${getContent()}`?.length === 1,
     [`${classPrefix}-dot`]: dot,
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
@@ -81,14 +79,15 @@
     if (badgeRef.current) {
       getPositionStyle()
     }
   }, [])
+
   const getPositionStyle = async () => {
-    const style: CSSProperties = {}
-    style.top = pxTransform(Number(top) || 0)
-    const dir = rtl ? 'left' : 'right'
-    style[dir] = isHarmony
-      ? pxTransform(Number(right))
-      : `${Number(right) || 0}px`
+    const style: CSSProperties = {
+      top: pxTransform(Number(top) || 0),
+      [rtl ? 'left' : 'right']: isHarmony
+        ? pxTransform(Number(right))
+        : `${Number(right) || 0}px`,
+    }
     setContentStyle(style)
   }
 
@@ -106,9 +105,9 @@
         </View>
       )}
       {children}
-      {!isIcon() && (
+      {!isIcon() && (getContent() || dot) && (
         <View className={contentClasses} style={contentStyle}>
-          {content()}
+          {getContent()}
         </View>
       )}
     </View>

src/packages/badge/badge.tsx

@@ -14,6 +14,7 @@ const defaultProps = {
   fill: 'solid',
   size: 'large',
 } as BadgeProps
+
 export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
   const rtl = useRtl()
   const {
@@ -27,16 +28,14 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     right,
     fill,
     size,
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = { ...defaultProps, ...props }
+
   const classPrefix = 'nut-badge'
   const classes = classNames(classPrefix, className)
 
-  function content() {
-    if (dot || typeof value === 'object' || value === 0) return null
-    if (typeof value === 'number' && typeof max === 'number') {
+  const getContent = () => {
+    if (dot || value === 0) return null
+    if (typeof value === 'number') {
       return max < value ? `${max}+` : `${value}`
     }
     return value
@@ -58,19 +57,17 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
     [`${classPrefix}-sup`]: isNumber() || isString() || dot,
     [`${classPrefix}-number`]: isNumber(),
     [`${classPrefix}-one`]:
-      typeof content() === 'string' && `${content()}`?.length === 1,
+      typeof getContent() === 'string' && `${getContent()}`?.length === 1,
     [`${classPrefix}-dot`]: dot,
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
     [`${classPrefix}-content`]: children,
   })
-  const getPositionStyle = () => {
-    const style: CSSProperties = {}
-    style.top = `${Number(top) || 0}px`
-    const dir = rtl ? 'left' : 'right'
-    style[dir] = `${Number(right) || parseFloat(String(right)) || 0}px`
-    return style
-  }
+
+  const getPositionStyle = (): CSSProperties => ({
+    top: `${Number(top) || 0}px`,
+    [rtl ? 'left' : 'right']: `${Number(right) || 0}px`,
+  })
 
   return (
     <div className={classes} style={style}>
@@ -86,9 +83,9 @@ export const Badge: FunctionComponent<Partial<BadgeProps>> = (props) => {
         </div>
       )}
       {children}
-      {!isIcon() && (
+      {!isIcon() && (getContent() || dot) && (
         <div className={contentClasses} style={getPositionStyle()}>
-          {content()}
+          {getContent()}
         </div>
       )}
     </div>

src/packages/tabbar/__tests__/__snapshots__/tabbar.spec.tsx.snap

@@ -1,5 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 0px;">11</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">分类</div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">逛</div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div></div></div></div>"`;
+exports[`should only render title 1`] = `"<div class="nut-tabbar"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active" style="color: blue;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">首页</div><div class="nut-badge-sup nut-badge-number nut-badge-content" style="top: 0px; right: 0px;">11</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">分类</div></div></div><div class="nut-tabbar-item" style="color: grey;"><div class="nut-badge"><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav nut-tabbar-item-icon-box-large">逛</div></div></div></div></div>"`;
 
-exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div><div class="nut-badge-content" style="top: 0px; right: 0px;"></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;
+exports[`should render fixed element when using bottom prop 1`] = `"<div class="nut-tabbar nut-tabbar-fixed"><div class="nut-tabbar-wrap"><div class="nut-tabbar-item nut-tabbar-item-active"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Home " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-labelledby="Home" role="presentation"><path d="M.209 17.059 24 0l23.79 17.065a.5.5 0 0 1 .209.407v2.46a.5.5 0 0 1-.791.407l-2.208-1.584v19.242a8 8 0 0 1-8 8H11a8 8 0 0 1-8-8V18.749L.79 20.333A.5.5 0 0 1 0 19.926v-2.46a.5.5 0 0 1 .209-.407M24 3.692 6 16.598v21.399a5 5 0 0 0 5.001 5h26a5 5 0 0 0 5-5V16.603zm-4.939 21.447a.527.527 0 0 0-.718.011l-1.415 1.414a.481.481 0 0 0 .01.7c3.998 3.64 10.127 3.64 14.124 0a.482.482 0 0 0 .009-.7l-1.415-1.414a.527.527 0 0 0-.719-.011 7.501 7.501 0 0 1-9.876 0" fill="currentColor"></path></svg></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">首页</div></div><div class="nut-tabbar-item"><div class="nut-badge"><div class="nut-tabbar-item-icon-box"><svg class="nut-icon nut-icon-Category " style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" aria-labelledby="Category" role="presentation"><path d="M85.33 138.67V96c0-5.97 4.69-10.67 10.67-10.67h832c5.97 0 10.67 4.69 10.67 10.67v42.67c0 5.97-4.69 10.67-10.67 10.66H96c-5.97 0-10.67-4.69-10.67-10.66m0 394.66v-42.66C85.33 484.7 90.02 480 96 480h832c5.97 0 10.67 4.69 10.67 10.67v42.66c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67M928 874.67c5.97 0 10.67 4.69 10.67 10.66V928c0 5.97-4.69 10.67-10.67 10.67H96c-5.97 0-10.67-4.69-10.67-10.67v-42.67c0-5.97 4.69-10.67 10.67-10.66z" fill="currentColor"></path></svg></div></div><div class="nut-tabbar-item-icon-box nut-tabbar-item-icon-box-nav">分类</div></div></div><div class="nut-tabbar-safe-area"></div></div>"`;

src/packages/tabbaritem/tabbaritem.scss

@@ -43,22 +43,14 @@
   &-active {
     color: $tabbar-active-color;
 
-    .nut-tabbar-item-icon-box {
+    .nut-tabbar-item-icon-box,
+    .nut-icon {
       /* #ifdef harmony*/
       color: $tabbar-active-color;
       /* #endif*/
       /* #ifndef harmony*/
       color: inherit;
       /* #endif*/
-
-      .nut-icon {
-        /* #ifdef harmony*/
-        color: $tabbar-active-color;
-        /* #endif*/
-        /* #ifndef harmony*/
-        color: inherit;
-        /* #endif*/
-      }
     }
   }
 }

src/packages/tabbaritem/tabbaritem.taro.tsx

@@ -71,6 +71,21 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     color: ctx?.activeColor,
   }
 
+  const renderTitleText = () => {
+    return (
+      title && (
+        <View
+          className={titleClass}
+          style={{
+            color: active ? ctx?.activeColor : ctx?.inactiveColor,
+          }}
+        >
+          {title}
+        </View>
+      )
+    )
+  }
+
   return (
     <View
       className={tabbarItemClass}
@@ -91,26 +106,10 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
               )}
             </View>
           </Badge>
-          <View
-            className={titleClass}
-            style={{
-              color: active ? ctx?.activeColor : ctx?.inactiveColor,
-            }}
-          >
-            {title}
-          </View>
+          {renderTitleText()}
         </>
       ) : (
-        <Badge {...badgeProps}>
-          <View
-            className={titleClass}
-            style={{
-              color: active ? ctx?.activeColor : ctx?.inactiveColor,
-            }}
-          >
-            {title}
-          </View>
-        </Badge>
+        <Badge {...badgeProps}>{renderTitleText()}</Badge>
       )}
     </View>
   )

src/packages/tabbaritem/tabbaritem.tsx

@@ -69,6 +69,10 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
     color: ctx?.activeColor,
   }
 
+  const renderTitleText = () => {
+    return title && <div className={titleClass}>{title}</div>
+  }
+
   return (
     <div
       className={tabbarItemClass}
@@ -84,12 +88,10 @@ export const TabbarItem: FunctionComponent<Partial<TabbarItemProps>> = (
           <Badge {...badgeProps}>
             <div className={boxPrefix}>{icon}</div>
           </Badge>
-          <div className={titleClass}>{title}</div>
+          {renderTitleText()}
         </>
       ) : (
-        <Badge {...badgeProps}>
-          <div className={titleClass}>{title}</div>
-        </Badge>
+        <Badge {...badgeProps}>{renderTitleText()}</Badge>
       )}
     </div>
   )