React实现一个倒计时hook组件实战示例
作者：Hutao
前言
本篇文章主要实现一个无样式的倒计时 hook 组件，通常不同地方的倒计时样式都不同，但倒计时的逻辑基本是都是一样的，因此可以抽离成一个工具方法或者一个 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)
);
一个完整的倒计时组件已经完成，我们来看一下效果（gif有点奇怪，倒计时结束时等一会gif才重置导致的异常）：
总结
从梳理需要实现的效果，然后再来实现具体的内容，逻辑的清晰可以让代码写得更好，这个倒计时组件也是我几年前写的一个组件了，但原本代码比较复杂一些，简化了很多代码，重新进行了逻辑调整和优化。
以上就是React实现一个倒计时hook组件的详细内容，更多关于React倒计时hook组件的资料请关注脚本之家其它相关文章！