react hooks 封装一个countDown 倒计时组件

开发技术

react , hooks , ts , taro

需求分析

需要一个可以按天，时，分和秒来进行倒计时的组件。

简单使用

• 注：主要逻辑请看 useCountDown

import CountDown from '@/components/countDown';
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';

const curTime = Date.now()

export default () => {const [createTime, setCreateTime] = useState<number>(0);useEffect(() => {setTimeout(() => {// 假设：异步获取五分钟前创建的日期setCreateTime(Date.now() - 5 * 60_000)}, 1000)}, [])return (<>{/* 倒计时10秒 */}<CountDown value={curTime} total={10_000} onChange={v => {if(v <= 0) Taro.showToast({title: '到时间了', icon: 'none'})}} />{/* 倒计时3天 */}<CountDown value={curTime} total={3 * 86400_000} />{/* 异步获取五分钟前创建的日期 */}<CountDown value={createTime} total={50 * 60_000} /></>)
} 

countDown组件的封装

props 传参很简单，只有一个 value 起始时间 , 一个 total 倒计时总时间，还有一个 onChange 返回当前的倒计时剩余时间，当为0的时候就可以进行业务需要的倒计时为0的操作了。