Skip to content

Commit 3ccc3ef

Browse files
xiaoyatongxiaoyatong
authored
fix: usecallback to fix render too many times, button,animatingnumbers,avatar,audio; and fix avatargroup when length > maxsize (jdf2e#2628)
* fix: usecallback animatingnumbers * fix: audio taro code optimization * fix: button lint * fix: avatar taro >max fixed, lint fixed
1 parent 46abf45 commit 3ccc3ef

File tree

9 files changed

+115
-117
lines changed

9 files changed

+115
-117
lines changed

‎src/packages/animatingnumbers/countup.taro.tsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {
22
CSSProperties,
33
FunctionComponent,
44
useEffect,
5+
useCallback,
56
useRef,
67
useState,
78
} from 'react'
@@ -33,14 +34,14 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
3334
className,
3435
thousands,
3536
style,
36-
...reset
37+
...rest
3738
} = mergeProps(defaultProps, props)
3839
const classPrefix = 'nut-countup'
3940
const countupRef = useRef<HTMLDivElement>(null)
4041
const timerRef = useRef(0)
4142
const numbers = Array.from({ length: 10 }, (v, i) => i)
4243

43-
const getShowNumber = () => {
44+
const getShowNumber = useCallback(() => {
4445
const splitArr = value.split('.')
4546
const intNumber =
4647
length && splitArr[0].length < length
@@ -50,16 +51,15 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
5051
thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber
5152
}${splitArr[1] ? '.' : ''}${splitArr[1] || ''}`
5253
return currNumber.split('')
53-
}
54+
}, [length, thousands, value])
5455

5556
const [numerArr, setNumerArr] = useState<string[]>([])
56-
5757
const [transformArr, setTransformArr] = useState<Array<string>>([])
5858
const isLoaded = useRef(false)
5959

60-
const setNumberTransform = () => {
60+
const setNumberTransform = useCallback(() => {
6161
if (countupRef.current && numerArr.length) {
62-
const query = createSelectorQuery()
62+
createSelectorQuery()
6363
.selectAll('.nut-countup-listitem')
6464
.node((numberItems: any) => {
6565
const transformArrCache: string[] = []
@@ -79,7 +79,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
7979
})
8080
.exec()
8181
}
82-
}
82+
}, [numerArr])
8383

8484
const numberEaseStyle = (idx: number) => {
8585
return {
@@ -90,7 +90,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
9090

9191
useEffect(() => {
9292
setNumberTransform()
93-
}, [numerArr])
93+
}, [numerArr, setNumberTransform])
9494

9595
useEffect(() => {
9696
if (!isLoaded.current) {
@@ -104,7 +104,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
104104
return () => {
105105
window.clearTimeout(timerRef.current)
106106
}
107-
}, [value])
107+
}, [value, delay, getShowNumber])
108108

109109
return (
110110
<div className={`${classPrefix} ${className}`} ref={countupRef}>

‎src/packages/animatingnumbers/countup.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {
22
CSSProperties,
33
FunctionComponent,
4+
useCallback,
45
useEffect,
56
useMemo,
67
useRef,
@@ -32,7 +33,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
3233
className,
3334
thousands,
3435
style,
35-
...reset
36+
...rest
3637
} = mergeProps(defaultProps, props)
3738
const classPrefix = 'nut-countup'
3839
const countupRef = useRef<HTMLDivElement>(null)
@@ -53,7 +54,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
5354

5455
const numerArr = useMemo(getShowNumber, [value, length, thousands])
5556

56-
const setNumberTransform = () => {
57+
const setNumberTransform = useCallback(() => {
5758
if (countupRef.current) {
5859
const numberItems = countupRef.current.querySelectorAll(
5960
'.nut-countup-number'
@@ -72,7 +73,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
7273
}
7374
})
7475
}
75-
}
76+
}, [numerArr])
7677

7778
const numberEaseStyle: CSSProperties = {
7879
transition: `transform ${duration}s ease-in-out`,
@@ -85,7 +86,7 @@ export const CountUp: FunctionComponent<Partial<CountUpProps>> = (props) => {
8586
return () => {
8687
window.clearTimeout(timerRef.current)
8788
}
88-
}, [numerArr])
89+
}, [numerArr, delay, setNumberTransform])
8990

9091
return (
9192
<div className={`${classPrefix} ${className}`} ref={countupRef}>

‎src/packages/animatingnumbers/demos/h5/demo2.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Demo2 = () => {
1616
Math.random() * 89 + 10
1717
)}`
1818
)
19-
}, 30000)
19+
}, 3000)
2020
}, [])
2121
return (
2222
<Cell

‎src/packages/animatingnumbers/demos/taro/demo2.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Demo2 = () => {
1616
Math.random() * 89 + 10
1717
)}`
1818
)
19-
}, 30000)
19+
}, 3000)
2020
}, [])
2121
return (
2222
<Cell

‎src/packages/audio/audio.taro.tsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,14 +97,13 @@ export const Audio: FunctionComponent<
9797
onPlayEnd?.(audioCtx)
9898
}
9999
})
100-
101100
audioCtx.onPlay(() => {
102101
const { duration } = audioCtx
103102
setTotalSeconds(Math.floor(duration))
104103
onPlay?.(audioCtx)
105104
})
106105
audioCtx.onCanplay(() => {
107-
const intervalID = setInterval(function () {
106+
const intervalID = setInterval(() => {
108107
if (audioCtx.duration !== 0) {
109108
setTotalSeconds(audioCtx.duration)
110109
clearInterval(intervalID)
@@ -122,8 +121,7 @@ export const Audio: FunctionComponent<
122121
})
123122

124123
audioCtx.onError((res) => {
125-
console.warn('code', res.errCode)
126-
console.warn('message', res.errMsg)
124+
console.warn('onError', res.errCode, res.errMsg)
127125
})
128126

129127
function formatSeconds(value: string) {

‎src/packages/avatar/avatar.taro.tsx

Lines changed: 48 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import React, {
44
useRef,
55
FunctionComponent,
66
useContext,
7+
useCallback,
78
} from 'react'
89
import type { MouseEvent } from 'react'
910
import Taro, { getEnv } from '@tarojs/taro'
1011
import classNames from 'classnames'
1112
import { User } from '@nutui/icons-react-taro'
12-
import Image from '@/packages/image/index.taro'
1313
import { AvatarContext } from '@/packages/avatargroup/context'
14+
import Image from '@/packages/image/index.taro'
1415
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
1516
import AvatarGroup from '@/packages/avatargroup/index.taro'
1617

@@ -34,9 +35,9 @@ const defaultProps = {
3435
size: '',
3536
shape: 'round',
3637
icon: '',
37-
fit: 'cover',
3838
background: '#eee',
3939
color: '#666',
40+
fit: 'cover',
4041
src: '',
4142
alt: '',
4243
} as AvatarProps
@@ -52,9 +53,9 @@ export const Avatar: FunctionComponent<
5253
background,
5354
color,
5455
src,
56+
alt,
5557
icon,
5658
fit,
57-
alt,
5859
className,
5960
style,
6061
onClick,
@@ -67,14 +68,15 @@ export const Avatar: FunctionComponent<
6768

6869
const [maxSum, setMaxSum] = useState(0) // avatarGroup里的avatar的个数
6970
const [showMax, setShowMax] = useState(false) // 是否显示的最大头像个数
70-
const [avatarIndex, setAvatarIndex] = useState(1) // avatar的索引
71+
const [avatarIndex, setAvatarIndex] = useState(1)
7172
const avatarRef = useRef<any>(null)
7273
const parent: any = useContext(AvatarContext)
7374
const sizeValue = ['large', 'normal', 'small']
75+
const { propAvatarGroup, avatarGroupRef } = parent
7476

7577
const classes = classNames({
76-
[`nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}`]: true,
77-
[`nut-avatar-${parent?.propAvatarGroup?.shape || shape}`]: true,
78+
[`nut-avatar-${propAvatarGroup?.size || size || 'normal'}`]: true,
79+
[`nut-avatar-${propAvatarGroup?.shape || shape}`]: true,
7880
})
7981
const cls = classNames(classPrefix, classes, className)
8082

@@ -84,27 +86,53 @@ export const Avatar: FunctionComponent<
8486
backgroundColor: `${background}`,
8587
color,
8688
marginLeft:
87-
avatarIndex !== 1 && parent?.propAvatarGroup?.gap
88-
? `${parent?.propAvatarGroup?.gap}px`
89+
avatarIndex !== 1 && propAvatarGroup?.gap
90+
? `${propAvatarGroup?.gap}px`
8991
: '',
9092
zIndex:
91-
parent?.propAvatarGroup?.level === 'right'
93+
propAvatarGroup?.level === 'right'
9294
? `${Math.abs(maxSum - avatarIndex)}`
9395
: '',
9496
...style,
9597
}
9698

9799
const maxStyles: React.CSSProperties = {
98-
backgroundColor: `${parent?.propAvatarGroup?.maxBackground}`,
99-
color: `${parent?.propAvatarGroup?.maxColor}`,
100+
backgroundColor: `${propAvatarGroup?.maxBackground}`,
101+
color: `${propAvatarGroup?.maxColor}`,
100102
}
101103

104+
const avatarLength = useCallback(
105+
(children: any) => {
106+
for (let i = 0; i < children.length; i++) {
107+
if (
108+
children[i] &&
109+
children[i].classList &&
110+
isAvatarInClassList(children[i])
111+
) {
112+
children[i].setAttribute('data-index', i + 1)
113+
}
114+
}
115+
const index = Number(avatarRef?.current?.dataset?.index)
116+
const maxCount = propAvatarGroup?.max
117+
setMaxSum(children.length)
118+
setAvatarIndex(index)
119+
if (
120+
index === children.length &&
121+
index !== maxCount &&
122+
children.length > maxCount
123+
) {
124+
setShowMax(true)
125+
}
126+
},
127+
[propAvatarGroup?.max]
128+
)
129+
102130
useEffect(() => {
103-
const avatarChildren = parent?.avatarGroupRef?.current.children
131+
const avatarChildren = avatarGroupRef?.current.children
104132
if (avatarChildren) {
105133
avatarLength(avatarChildren)
106134
}
107-
}, [])
135+
}, [avatarLength, avatarGroupRef])
108136

109137
const isAvatarInClassList = (element: any) => {
110138
if (getEnv() === Taro.ENV_TYPE.WEB) {
@@ -120,33 +148,8 @@ export const Avatar: FunctionComponent<
120148
)
121149
}
122150

123-
const avatarLength = (children: any) => {
124-
for (let i = 0; i < children.length; i++) {
125-
if (
126-
children[i] &&
127-
children[i].classList &&
128-
isAvatarInClassList(children[i])
129-
) {
130-
children[i].setAttribute('data-index', i + 1)
131-
}
132-
}
133-
const index = avatarRef?.current?.dataset?.index
134-
const maxCount = parent?.propAvatarGroup?.max
135-
setMaxSum(children.length)
136-
setAvatarIndex(index)
137-
if (
138-
index === children.length &&
139-
index !== maxCount &&
140-
children.length > maxCount
141-
) {
142-
setShowMax(true)
143-
}
144-
}
145-
146151
const errorEvent = () => {
147-
if (onError) {
148-
onError()
149-
}
152+
onError && onError()
150153
}
151154

152155
const clickAvatar = (e: MouseEvent<HTMLDivElement>) => {
@@ -156,17 +159,16 @@ export const Avatar: FunctionComponent<
156159
return (
157160
<>
158161
{(showMax ||
159-
!parent?.propAvatarGroup?.max ||
160-
avatarIndex <= parent?.propAvatarGroup?.max) && (
162+
!propAvatarGroup?.max ||
163+
avatarIndex <= propAvatarGroup?.max) && (
161164
<div
162165
className={cls}
163166
{...rest}
164167
style={!showMax ? styles : maxStyles}
165168
onClick={clickAvatar}
166169
ref={avatarRef}
167170
>
168-
{(!parent?.propAvatarGroup?.max ||
169-
avatarIndex <= parent?.propAvatarGroup?.max) && (
171+
{(!propAvatarGroup?.max || avatarIndex <= propAvatarGroup?.max) && (
170172
<>
171173
{src && (
172174
<Image
@@ -186,14 +188,11 @@ export const Avatar: FunctionComponent<
186188
{!src && !icon && !children && <User className="icon" />}
187189
</>
188190
)}
189-
{/* 折叠头像 */}
190191
{showMax && (
191192
<div className="text">
192-
{parent?.propAvatarGroup?.maxContent
193-
? parent?.propAvatarGroup?.maxContent
194-
: `+ ${
195-
avatarIndex - Number(parent?.propAvatarGroup?.max || 0)
196-
}`}
193+
{propAvatarGroup?.maxContent
194+
? propAvatarGroup?.maxContent
195+
: `+ ${avatarIndex - Number(propAvatarGroup?.max || 0)}`}
197196
</div>
198197
)}
199198
</div>

0 commit comments

Comments
 (0)