您好,登录后才能下订单哦!
这篇“React怎么实现一个倒计时hook组件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React怎么实现一个倒计时hook组件”文章吧。
倒计时可能需要显示剩余时间的单位有:天、时、分、秒、毫秒,可能只需显示一个,也可能都需要显示。
注意细节:
只显示某一单位的时间或者需要显示的最大单元时间,需要可以大于正常时间最大限制,比如要剩余 100 小时 58 分时,小时需要可以大于 23,分钟不能大于 59 。
需要可以设置是否显示毫秒,1s等于1000ms,但人的反应时间是0.2s~0.3s,因此毫秒以百为单位显示,显示毫秒适用于秒杀类活动场景。
先来定义好参数:
export interface CountDownOptions { /** 截止时间,时间戳 */ deadlineTime: number; /** 是否需要毫秒 */ showMillisecond?: boolean; }
参数只需要倒计时截止时间以及是否需要显示毫秒。
再定义一下需要获取的返回值:
export interface TimeInfo { /** 天 */ day: number; /** 小时 */ hours: number; /** 补零后的小时 */ hoursStr: string; /** 分钟 */ minutes: number; /** 补零后的分 */ minutesStr: string; /** 秒 */ seconds: number; /** 补零后的秒 */ secondsStr: string; /** 毫秒 */ milliseconds?: number; /** 补零后的毫秒 */ millisecondsStr?: string; /** 是否结束 */ end: boolean; }
day
、 hours
、 minutes
、 seconds
、 milliseconds
都是剩余的多少秒数,没有做限制,hoursStr
、minutesStr
、secondsStr
、millisecondsStr
才做限制,比如剩下 1天10小时10分钟10秒100毫秒,那么显示结果如下:
{ day, hours, hoursStr, minutes, minutesStr, seconds, secondsStr, end: false, }
下面来看具体实现代码。
先实现一个简单的补零函数,JS字符串本身也有补零函数,也可以直接使用的,不过也需要转换类型。
// 格式化数据,这里就是补零 function formate(time: number): string { return `${time < 10 ? "0" : ""}${time}`; }
工具方法——清除倒计时数据数据信息:
function clearCountdownInfo(showMillisecond = false): TimeInfo { const timeInfo: TimeInfo = { day: 0, hours: 0, hoursStr: "00", minutes: 0, minutesStr: "00", seconds: 0, secondsStr: "00", end: true, }; if (showMillisecond) { timeInfo.milliseconds = 0; timeInfo.millisecondsStr = "0"; } return timeInfo; }
关键工具方法——计算倒计时返回的数据信息:
function computeCountdownInfo( remainTime: number, showMillisecond = false ): TimeInfo { // 剩余时间小于说明结束,直接清空 if (remainTime < 0) { return clearCountdownInfo(showMillisecond); } // 这里用了一个比较笨的方法,一个个进行计算,后续可以优化试试看 const day = Math.floor(remainTime / (24 * 60 * 60)); const hours = Math.floor((remainTime / (60 * 60)) % 24); const hoursStr = formate(hours); const minutes = Math.floor((remainTime / 60) % 60); const minutesStr = formate(minutes); const seconds = Math.floor(remainTime % 60); const secondsStr = formate(seconds); // 组合成需要返回的时间信息 const timeInfo: TimeInfo = { day, hours, hoursStr, minutes, minutesStr, seconds, secondsStr, end: false, }; // 需要显示毫秒逻辑处理 if (showMillisecond) { const milliseconds = Math.floor(remainTime * 1000); // 只取首位 const millisecondsStr = String(milliseconds).slice(-3); timeInfo.milliseconds = milliseconds; timeInfo.millisecondsStr = millisecondsStr; } return timeInfo; }
核心逻辑 —— useCountdown
hook 组件:
export const useCountdown = (options: CountDownOptions) => { // 首次初始化数据,显示清除的数据 const [timeInfo, setTimeInfo] = useState<TimeInfo>( clearCountdownInfo(options.showMillisecond) ); useEffect(() => { let timer = 0; function countdown() { const remainTime = computeRemainTime(options.deadlineTime); // 剩余时间大于 0 才开始倒计时 if (remainTime > 0) { // 未结束时直接定时下一次在执行判断 countdown timer = window.setTimeout( countdown, options.showMillisecond ? 100 : 1000 // 毫秒级则修改定时器时间 ); } const data = computeCountdownInfo(remainTime, options.showMillisecond); setTimeInfo(data); } // 开始倒计时 countdown(); return () => { // 清除定时器 timer && clearInterval(timer); }; }, [options.deadlineTime, options.showMillisecond]); return timeInfo; };
上面需要注意一下,服务端渲染的情况不要首次进行render的时候初始化数据,会和服务端已经不一致导致 hydrate 报错。
客户端渲染的可以在render的时候初始化代码:
// 渲染时获取一次剩余时间 const remainTime = useMemo( () => computeRemainTime(options.deadlineTime), [options.deadlineTime] ); // 首次初始化数据,以防页面闪烁 const [timeInfo, setTimeInfo] = useState<TimeInfo>( computeCountdownInfo(remainTime) );
以上就是关于“React怎么实现一个倒计时hook组件”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。