diff --git a/src/packages/animatingnumbers/countup.taro.tsx b/src/packages/animatingnumbers/countup.taro.tsx
index c0eaaacb00..f5640eb61c 100644
--- a/src/packages/animatingnumbers/countup.taro.tsx
+++ b/src/packages/animatingnumbers/countup.taro.tsx
@@ -2,6 +2,7 @@ import React, {
   CSSProperties,
   FunctionComponent,
   useEffect,
+  useCallback,
   useRef,
   useState,
 } from 'react'
@@ -33,14 +34,14 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     className,
     thousands,
     style,
-    ...reset
+    ...rest
   } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
   const timerRef = useRef(0)
   const numbers = Array.from({ length: 10 }, (v, i) => i)
 
-  const getShowNumber = () => {
+  const getShowNumber = useCallback(() => {
     const splitArr = value.split('.')
     const intNumber =
       length && splitArr[0].length < length
@@ -50,16 +51,15 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
       thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber
     }${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`
     return currNumber.split('')
-  }
+  }, [length, thousands, value])
 
   const [numerArr, setNumerArr] = useState<string[]>([])
-
   const [transformArr, setTransformArr] = useState<Array<string>>([])
   const isLoaded = useRef(false)
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current && numerArr.length) {
-      const query = createSelectorQuery()
+      createSelectorQuery()
         .selectAll('.nut-countup-listitem')
         .node((numberItems: any) => {
           const transformArrCache: string[] = []
@@ -79,7 +79,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         })
         .exec()
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle = (idx: number) => {
     return {
@@ -90,7 +90,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   useEffect(() => {
     setNumberTransform()
-  }, [numerArr])
+  }, [numerArr, setNumberTransform])
 
   useEffect(() => {
     if (!isLoaded.current) {
@@ -104,7 +104,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [value])
+  }, [value, delay, getShowNumber])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
diff --git a/src/packages/animatingnumbers/countup.tsx b/src/packages/animatingnumbers/countup.tsx
index a17c9b1fa2..ca96d99f18 100644
--- a/src/packages/animatingnumbers/countup.tsx
+++ b/src/packages/animatingnumbers/countup.tsx
@@ -1,6 +1,7 @@
 import React, {
   CSSProperties,
   FunctionComponent,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
@@ -32,7 +33,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     className,
     thousands,
     style,
-    ...reset
+    ...rest
   } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-countup'
   const countupRef = useRef<HTMLDivElement>(null)
@@ -53,7 +54,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
 
   const numerArr = useMemo(getShowNumber, [value, length, thousands])
 
-  const setNumberTransform = () => {
+  const setNumberTransform = useCallback(() => {
     if (countupRef.current) {
       const numberItems = countupRef.current.querySelectorAll(
         '.nut-countup-number'
@@ -72,7 +73,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
         }
       })
     }
-  }
+  }, [numerArr])
 
   const numberEaseStyle: CSSProperties = {
     transition: `transform ${duration}s ease-in-out`,
@@ -85,7 +86,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [numerArr])
+  }, [numerArr, delay, setNumberTransform])
 
   return (
     <div className={`${classPrefix} ${className}`} ref={countupRef}>
diff --git a/src/packages/animatingnumbers/demos/h5/demo2.tsx b/src/packages/animatingnumbers/demos/h5/demo2.tsx
index 6b5d9c91ae..324a8812e7 100644
--- a/src/packages/animatingnumbers/demos/h5/demo2.tsx
+++ b/src/packages/animatingnumbers/demos/h5/demo2.tsx
@@ -16,7 +16,7 @@ const Demo2 = () => {
           Math.random() * 89 + 10
         )}`
       )
-    }, 30000)
+    }, 3000)
   }, [])
   return (
     <Cell
diff --git a/src/packages/animatingnumbers/demos/taro/demo2.tsx b/src/packages/animatingnumbers/demos/taro/demo2.tsx
index ab313056fb..a16bb9d4a5 100644
--- a/src/packages/animatingnumbers/demos/taro/demo2.tsx
+++ b/src/packages/animatingnumbers/demos/taro/demo2.tsx
@@ -16,7 +16,7 @@ const Demo2 = () => {
           Math.random() * 89 + 10
         )}`
       )
-    }, 30000)
+    }, 3000)
   }, [])
   return (
     <Cell
diff --git a/src/packages/audio/audio.taro.tsx b/src/packages/audio/audio.taro.tsx
index f30f1b49d7..f6caaa0c00 100644
--- a/src/packages/audio/audio.taro.tsx
+++ b/src/packages/audio/audio.taro.tsx
@@ -97,14 +97,13 @@ export const Audio: FunctionComponent<
       onPlayEnd?.(audioCtx)
     }
   })
-
   audioCtx.onPlay(() => {
     const { duration } = audioCtx
     setTotalSeconds(Math.floor(duration))
     onPlay?.(audioCtx)
   })
   audioCtx.onCanplay(() => {
-    const intervalID = setInterval(function () {
+    const intervalID = setInterval(() => {
       if (audioCtx.duration !== 0) {
         setTotalSeconds(audioCtx.duration)
         clearInterval(intervalID)
@@ -122,8 +121,7 @@ export const Audio: FunctionComponent<
   })
 
   audioCtx.onError((res) => {
-    console.warn('code', res.errCode)
-    console.warn('message', res.errMsg)
+    console.warn('onError', res.errCode, res.errMsg)
   })
 
   function formatSeconds(value: string) {
diff --git a/src/packages/avatar/avatar.taro.tsx b/src/packages/avatar/avatar.taro.tsx
index a0ce6e2546..c062f4fc7c 100644
--- a/src/packages/avatar/avatar.taro.tsx
+++ b/src/packages/avatar/avatar.taro.tsx
@@ -4,13 +4,14 @@ import React, {
   useRef,
   FunctionComponent,
   useContext,
+  useCallback,
 } from 'react'
 import type { MouseEvent } from 'react'
 import Taro, { getEnv } from '@tarojs/taro'
 import classNames from 'classnames'
 import { User } from '@nutui/icons-react-taro'
-import Image from '@/packages/image/index.taro'
 import { AvatarContext } from '@/packages/avatargroup/context'
+import Image from '@/packages/image/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import AvatarGroup from '@/packages/avatargroup/index.taro'
 
@@ -34,9 +35,9 @@ const defaultProps = {
   size: '',
   shape: 'round',
   icon: '',
-  fit: 'cover',
   background: '#eee',
   color: '#666',
+  fit: 'cover',
   src: '',
   alt: '',
 } as AvatarProps
@@ -52,9 +53,9 @@ export const Avatar: FunctionComponent<
     background,
     color,
     src,
+    alt,
     icon,
     fit,
-    alt,
     className,
     style,
     onClick,
@@ -67,14 +68,15 @@ export const Avatar: FunctionComponent<
 
   const [maxSum, setMaxSum] = useState(0) // avatarGroup里的avatar的个数
   const [showMax, setShowMax] = useState(false) // 是否显示的最大头像个数
-  const [avatarIndex, setAvatarIndex] = useState(1) // avatar的索引
+  const [avatarIndex, setAvatarIndex] = useState(1)
   const avatarRef = useRef<any>(null)
   const parent: any = useContext(AvatarContext)
   const sizeValue = ['large', 'normal', 'small']
+  const { propAvatarGroup, avatarGroupRef } = parent
 
   const classes = classNames({
-    [`nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}`]: true,
-    [`nut-avatar-${parent?.propAvatarGroup?.shape || shape}`]: true,
+    [`nut-avatar-${propAvatarGroup?.size || size || 'normal'}`]: true,
+    [`nut-avatar-${propAvatarGroup?.shape || shape}`]: true,
   })
   const cls = classNames(classPrefix, classes, className)
 
@@ -84,27 +86,53 @@ export const Avatar: FunctionComponent<
     backgroundColor: `${background}`,
     color,
     marginLeft:
-      avatarIndex !== 1 && parent?.propAvatarGroup?.gap
-        ? `${parent?.propAvatarGroup?.gap}px`
+      avatarIndex !== 1 && propAvatarGroup?.gap
+        ? `${propAvatarGroup?.gap}px`
         : '',
     zIndex:
-      parent?.propAvatarGroup?.level === 'right'
+      propAvatarGroup?.level === 'right'
         ? `${Math.abs(maxSum - avatarIndex)}`
         : '',
     ...style,
   }
 
   const maxStyles: React.CSSProperties = {
-    backgroundColor: `${parent?.propAvatarGroup?.maxBackground}`,
-    color: `${parent?.propAvatarGroup?.maxColor}`,
+    backgroundColor: `${propAvatarGroup?.maxBackground}`,
+    color: `${propAvatarGroup?.maxColor}`,
   }
 
+  const avatarLength = useCallback(
+    (children: any) => {
+      for (let i = 0; i < children.length; i++) {
+        if (
+          children[i] &&
+          children[i].classList &&
+          isAvatarInClassList(children[i])
+        ) {
+          children[i].setAttribute('data-index', i + 1)
+        }
+      }
+      const index = Number(avatarRef?.current?.dataset?.index)
+      const maxCount = propAvatarGroup?.max
+      setMaxSum(children.length)
+      setAvatarIndex(index)
+      if (
+        index === children.length &&
+        index !== maxCount &&
+        children.length > maxCount
+      ) {
+        setShowMax(true)
+      }
+    },
+    [propAvatarGroup?.max]
+  )
+
   useEffect(() => {
-    const avatarChildren = parent?.avatarGroupRef?.current.children
+    const avatarChildren = avatarGroupRef?.current.children
     if (avatarChildren) {
       avatarLength(avatarChildren)
     }
-  }, [])
+  }, [avatarLength, avatarGroupRef])
 
   const isAvatarInClassList = (element: any) => {
     if (getEnv() === Taro.ENV_TYPE.WEB) {
@@ -120,33 +148,8 @@ export const Avatar: FunctionComponent<
     )
   }
 
-  const avatarLength = (children: any) => {
-    for (let i = 0; i < children.length; i++) {
-      if (
-        children[i] &&
-        children[i].classList &&
-        isAvatarInClassList(children[i])
-      ) {
-        children[i].setAttribute('data-index', i + 1)
-      }
-    }
-    const index = avatarRef?.current?.dataset?.index
-    const maxCount = parent?.propAvatarGroup?.max
-    setMaxSum(children.length)
-    setAvatarIndex(index)
-    if (
-      index === children.length &&
-      index !== maxCount &&
-      children.length > maxCount
-    ) {
-      setShowMax(true)
-    }
-  }
-
   const errorEvent = () => {
-    if (onError) {
-      onError()
-    }
+    onError && onError()
   }
 
   const clickAvatar = (e: MouseEvent<HTMLDivElement>) => {
@@ -156,8 +159,8 @@ export const Avatar: FunctionComponent<
   return (
     <>
       {(showMax ||
-        !parent?.propAvatarGroup?.max ||
-        avatarIndex <= parent?.propAvatarGroup?.max) && (
+        !propAvatarGroup?.max ||
+        avatarIndex <= propAvatarGroup?.max) && (
         <div
           className={cls}
           {...rest}
@@ -165,8 +168,7 @@ export const Avatar: FunctionComponent<
           onClick={clickAvatar}
           ref={avatarRef}
         >
-          {(!parent?.propAvatarGroup?.max ||
-            avatarIndex <= parent?.propAvatarGroup?.max) && (
+          {(!propAvatarGroup?.max || avatarIndex <= propAvatarGroup?.max) && (
             <>
               {src && (
                 <Image
@@ -186,14 +188,11 @@ export const Avatar: FunctionComponent<
               {!src && !icon && !children && <User className="icon" />}
             </>
           )}
-          {/* 折叠头像 */}
           {showMax && (
             <div className="text">
-              {parent?.propAvatarGroup?.maxContent
-                ? parent?.propAvatarGroup?.maxContent
-                : `+ ${
-                    avatarIndex - Number(parent?.propAvatarGroup?.max || 0)
-                  }`}
+              {propAvatarGroup?.maxContent
+                ? propAvatarGroup?.maxContent
+                : `+ ${avatarIndex - Number(propAvatarGroup?.max || 0)}`}
             </div>
           )}
         </div>
diff --git a/src/packages/avatar/avatar.tsx b/src/packages/avatar/avatar.tsx
index 3bceaffa4a..53f9e2cb3a 100644
--- a/src/packages/avatar/avatar.tsx
+++ b/src/packages/avatar/avatar.tsx
@@ -4,6 +4,7 @@ import React, {
   useRef,
   FunctionComponent,
   useContext,
+  useCallback,
 } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
@@ -16,10 +17,10 @@ import AvatarGroup from '@/packages/avatargroup'
 export interface AvatarProps extends BasicComponent {
   size: string
   icon: React.ReactNode
-  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
   shape: AvatarShape
   background: string
   color: string
+  fit: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
   src: string
   alt: string
   onClick: (e: MouseEvent<HTMLDivElement>) => void
@@ -70,10 +71,11 @@ export const Avatar: FunctionComponent<
   const avatarRef = useRef<any>(null)
   const parent: any = useContext(AvatarContext)
   const sizeValue = ['large', 'normal', 'small']
+  const { propAvatarGroup, avatarGroupRef } = parent
 
   const classes = classNames({
-    [`nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}`]: true,
-    [`nut-avatar-${parent?.propAvatarGroup?.shape || shape}`]: true,
+    [`nut-avatar-${propAvatarGroup?.size || size || 'normal'}`]: true,
+    [`nut-avatar-${propAvatarGroup?.shape || shape}`]: true,
   })
   const cls = classNames(classPrefix, classes, className)
 
@@ -83,55 +85,56 @@ export const Avatar: FunctionComponent<
     backgroundColor: `${background}`,
     color,
     marginLeft:
-      avatarIndex !== 1 && parent?.propAvatarGroup?.gap
-        ? `${parent?.propAvatarGroup?.gap}px`
+      avatarIndex !== 1 && propAvatarGroup?.gap
+        ? `${propAvatarGroup?.gap}px`
         : '',
     zIndex:
-      parent?.propAvatarGroup?.level === 'right'
+      propAvatarGroup?.level === 'right'
         ? `${Math.abs(maxSum - avatarIndex)}`
         : '',
     ...style,
   }
 
   const maxStyles: React.CSSProperties = {
-    backgroundColor: `${parent?.propAvatarGroup?.maxBackground}`,
-    color: `${parent?.propAvatarGroup?.maxColor}`,
+    backgroundColor: `${propAvatarGroup?.maxBackground}`,
+    color: `${propAvatarGroup?.maxColor}`,
   }
 
-  useEffect(() => {
-    const avatarChildren = parent?.avatarGroupRef?.current.children
-    if (avatarChildren) {
-      avatarLength(avatarChildren)
-    }
-  }, [])
-
-  const avatarLength = (children: any) => {
-    for (let i = 0; i < children.length; i++) {
+  const avatarLength = useCallback(
+    (children: any) => {
+      for (let i = 0; i < children.length; i++) {
+        if (
+          children[i] &&
+          children[i].classList &&
+          children[i].classList[0] === 'nut-avatar'
+        ) {
+          children[i].setAttribute('data-index', i + 1)
+        }
+      }
+      const index = Number(avatarRef.current?.dataset?.index)
+      const maxCount = propAvatarGroup?.max
+      setMaxSum(children.length)
+      setAvatarIndex(index)
       if (
-        children[i] &&
-        children[i].classList &&
-        children[i].classList[0] === 'nut-avatar'
+        index === children.length &&
+        index !== maxCount &&
+        children.length > maxCount
       ) {
-        children[i].setAttribute('data-index', i + 1)
+        setShowMax(true)
       }
+    },
+    [propAvatarGroup?.max]
+  )
+
+  useEffect(() => {
+    const avatarChildren = avatarGroupRef?.current.children
+    if (avatarChildren) {
+      avatarLength(avatarChildren)
     }
-    const index = Number(avatarRef?.current?.dataset?.index)
-    const maxCount = parent?.propAvatarGroup?.max
-    setMaxSum(children.length)
-    setAvatarIndex(index)
-    if (
-      index === children.length &&
-      index !== maxCount &&
-      children.length > maxCount
-    ) {
-      setShowMax(true)
-    }
-  }
+  }, [avatarLength, avatarGroupRef])
 
   const errorEvent = () => {
-    if (onError) {
-      onError()
-    }
+    onError && onError()
   }
 
   const clickAvatar = (e: MouseEvent<HTMLDivElement>) => {
@@ -141,8 +144,8 @@ export const Avatar: FunctionComponent<
   return (
     <>
       {(showMax ||
-        !parent?.propAvatarGroup?.max ||
-        avatarIndex <= parent?.propAvatarGroup?.max) && (
+        !propAvatarGroup?.max ||
+        avatarIndex <= propAvatarGroup?.max) && (
         <div
           className={cls}
           {...rest}
@@ -150,8 +153,7 @@ export const Avatar: FunctionComponent<
           onClick={clickAvatar}
           ref={avatarRef}
         >
-          {(!parent?.propAvatarGroup?.max ||
-            avatarIndex <= parent?.propAvatarGroup?.max) && (
+          {(!propAvatarGroup?.max || avatarIndex <= propAvatarGroup?.max) && (
             <>
               {src && (
                 <Image
@@ -174,11 +176,9 @@ export const Avatar: FunctionComponent<
           )}
           {showMax && (
             <div className="text">
-              {parent?.propAvatarGroup?.maxContent
-                ? parent?.propAvatarGroup?.maxContent
-                : `+ ${
-                    avatarIndex - Number(parent?.propAvatarGroup?.max || 0)
-                  }`}
+              {propAvatarGroup?.maxContent
+                ? propAvatarGroup?.maxContent
+                : `+ ${avatarIndex - Number(propAvatarGroup?.max || 0)}`}
             </div>
           )}
         </div>
diff --git a/src/packages/button/button.taro.tsx b/src/packages/button/button.taro.tsx
index 13243ddc1e..5d95300883 100644
--- a/src/packages/button/button.taro.tsx
+++ b/src/packages/button/button.taro.tsx
@@ -80,7 +80,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
     }
     const getStyle = useCallback(() => {
       const style: CSSProperties = {}
-      if (props.color) {
+      if (color) {
         if (props.fill === 'outline' || props.fill === 'dashed') {
           style.color = color
           if (!color?.includes('gradient')) {
@@ -93,7 +93,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {
diff --git a/src/packages/button/button.tsx b/src/packages/button/button.tsx
index d2b85f78b5..0685d463de 100644
--- a/src/packages/button/button.tsx
+++ b/src/packages/button/button.tsx
@@ -73,7 +73,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
     }
     const getStyle = useCallback(() => {
       const style: CSSProperties = {}
-      if (props.color) {
+      if (color) {
         if (props.fill === 'outline' || props.fill === 'dashed') {
           style.color = color
           if (!color?.includes('gradient')) {
@@ -86,7 +86,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Partial<ButtonProps>>(
         }
       }
       return style
-    }, [color])
+    }, [color, props.fill])
 
     const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
       if (!loading && !disabled && onClick) {