fix(animatingnumbers): 修复delaySpeed不生效 (#733)

src/packages/animatingnumbers/__tests__/animatingnumbers.spec.tsx

@@ -2,11 +2,18 @@ import React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { AnimatingNumbers } from '../animatingnumbers'
+import { CountUp } from '@/packages/animatingnumbers/countup'
 
+jest.useFakeTimers()
 test('test endNumber props', () => {
   const { container } = render(<AnimatingNumbers.CountUp endNumber="678.94" />)
 
   const listNumbers = container.querySelectorAll('.nut-countup__number')
+  expect(listNumbers[0]).toHaveAttribute(
+    'style',
+    'transition: transform 1s ease-in-out;'
+  )
+  jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
     'transition: transform 1s ease-in-out; transform: translate(0, -30%); webkit-transform: translate(0, -30%);'
@@ -26,6 +33,7 @@ test('test aysnc endNumber and  easeSpeed props', async () => {
   )
   const listNumbers = container.querySelectorAll('.nut-countup__number')
   expect(listNumbers.length).toBe(8)
+  jest.advanceTimersByTime(CountUp.defaultProps?.delaySpeed ?? 0)
   expect(listNumbers[0]).toHaveAttribute(
     'style',
     'transition: transform 1.2s ease-in-out; transform: translate(0, -50%); webkit-transform: translate(0, -50%);'

src/packages/animatingnumbers/countup.tsx

@@ -2,6 +2,7 @@ import React, {
   CSSProperties,
   FunctionComponent,
   useEffect,
+  useMemo,
   useRef,
 } from 'react'
 
@@ -54,7 +55,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return currNumber.split('')
   }
 
-  const numerArr = getShowNumber()
+  const numerArr = useMemo(getShowNumber, [endNumber, maxLen, thousands])
 
   const setNumberTransform = () => {
     if (countupRef.current) {
@@ -88,10 +89,6 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
     return () => {
       window.clearTimeout(timerRef.current)
     }
-  }, [])
-
-  useEffect(() => {
-    setNumberTransform()
   }, [numerArr])
 
   return (