React怎么实现一个倒计时hook组件

发布时间:2023-02-23 10:11:27 作者:iii
来源:亿速云 阅读:293

这篇“React怎么实现一个倒计时hook组件”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“React怎么实现一个倒计时hook组件”文章吧。

思路

倒计时可能需要显示剩余时间的单位有:天、时、分、秒、毫秒,可能只需显示一个,也可能都需要显示。

注意细节:

实现

先来定义好参数:

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;
}

dayhoursminutessecondsmilliseconds 都是剩余的多少秒数,没有做限制,hoursStrminutesStrsecondsStrmillisecondsStr 才做限制,比如剩下 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;
}

核心逻辑 &mdash;&mdash; 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组件”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 怎样解析React 状态管理
  2. Javascript框架Vue和React使用实例分析

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react hook

上一篇:Kotlin语言中CompileSdkVersion与targetSdkVersion的区别是什么

下一篇:python中的with怎么使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》