[FR]: 倒计时组件更新频率过快

[Topgt]

这个功能解决了什么问题？

如果我的页面有很多很多的倒计时组件，onUpdate 的触发频率太高，但往往我只需要一秒才触发一次，如此高的触发频率，加上我页面有很多的倒计时组件，这对我的页面性能有非常大的挑战。当有50个左右的倒计时组件，页面往往就很卡了。一下是我的代码片段 ` import { View, Text } from '@tarojs/components' import { CountDown } from '@nutui/nutui-react-taro' import { useCallback, useState, useTransition } from 'react'

export default function CustomCountdown(p: { endTime: number onEnd?: () => void }) {

const [isPending, startTransition] = useTransition(); const [restTime, setRestTime] = useState({ d: 0, h: 0, m: 0, s: 0 }) const onUpdate = useCallback((time) => { console.log(time) startTransition(() => setRestTime(time)) }, []) return ( <CountDown endTime={p.endTime} onUpdate={onUpdate} onEnd={p.onEnd}

{restTime.d > 0 ? {restTime.d}天 : 距结束 } {restTime.h < 10 ? `0${restTime.h}` : restTime.h} :

<View className='w-[24px] h-[24px] text-center leading-[24px] rounded-[6px]' style={{ backgroundColor: 'var(--nutui-color-primary)' }}>{restTime.m < 10 ? 0${restTime.m} : restTime.m}

:

<View className='w-[24px] h-[24px] text-center leading-[24px] rounded-[6px]' style={{ backgroundColor: 'var(--nutui-color-primary)' }}>{restTime.s < 10 ? 0${restTime.s} : restTime.s} ) } `

你期望的组件设计是怎样的？

• 希望我能自己控制onUpdate 回调的触发频率，我可以自己在onUpdate判断时间然后更新我的state但我还是希望组件能提供这个配置项
• 页面所有的倒计时组件共用一个state，能统一更新state，现在每个组件有自己的stae，且onUpdate触发频繁，容易导致js主线程阻塞

[irisSong]

如果倒计时时间一致，可以使用一个倒计时，onUpdate时候更新封装的倒计时的state，所有封装倒计时更新，不是嵌入几十个倒计处理