countDown+react+hook

这篇具有很好参考价值的文章主要介绍了countDown+react+hook。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

道阻且长,行而不辍,未来可期

知识点一:
new Date().getTime()可以得到得到1970年01月1日0点零分以来的毫秒数。单位是毫秒

 new Date().getTime()/1000获取秒数

  1分钟60秒,1小时60分钟
  1hour:60*60=>单位是秒   60*60*1000=>单位是秒
  1day:24*60*60=>单位是秒  24*60*60*1000=>单位是秒

知识点二、
为什么使用 requestAnimationFrame 来写定时器呢?
答:当页面离开或切换到其他标签页时,requestAnimationFrame 中的代码将不再执行。

详解:因为 requestAnimationFrame 方法依赖于浏览器的渲染循环,而在页面不可见或失去焦点时,浏览器会暂停渲染循环以减少资源消耗。 因此,使用 requestAnimationFrame 实现的动画或定时器,在页面不可见或失去焦点时会自动暂停,直到页面重新可见或获得焦点时才会继续执行。 这是浏览器的默认行为,无需额外处理。

如果你希望即使在页面不可见时仍然执行代码,可以考虑使用 setTimeout 或 setInterval 这样的定时器函数,它们在页面不可见时仍会继续执行。不过请注意,频繁的定时器操作可能会对性能产生负面影响,因此需要谨慎使用。

如果不用 requestAnimationFrame,也可以用别的方法实现–>离开页面时定时器停止,回到页面时定时器继续走动的效果

方法:可以利用 window 对象的 blur 和 focus 事件来监听页面失去焦点和获得焦点的状态。

requestAnimationFrame是什么?
答:requestAnimationFrame 是浏览器提供的一个用于执行动画效果的 API。
它接收一个回调函数作为参数,并在下一次浏览器重绘之前执行该回调函数。
浏览器通常以每秒60帧(即每秒60次重绘)的速度运行动画,因此 requestAnimationFrame 的回调函数约每16.6毫秒(1000ms / 60)调用一次。

使用 requestAnimationFrame 可以确保动画在最佳的性能下运行,因为它会在浏览器准备好绘制下一帧之前执行回调函数。
这样可以避免不必要的重绘和浪费的资源。

需要注意的是,requestAnimationFrame 返回一个标识符(或称为句柄),可以使用该标识符来取消动画帧请求,使用 cancelAnimationFrame 函数进行取消操作。

代码demo:

  const { days, hours, minutes, seconds } = useCountDown2(
    new Date("2023-08-22T03:35:00.000Z").getTime()
  );

import { useState, useEffect } from "react";

const oneDay = 1000 * 60 * 60 * 24;
const oneHour = 1000 * 60 * 60;
const oneMinute = 1000 * 60;
const oneSecond = 1000;

let timer=null;
export function useCountDown2(endDate) {

    const [days, setDay] = useState('00');
    const [hours, setHour] = useState('00');
    const [minutes, setMinute] = useState('00');
    const [seconds, setSecond] = useState('00');


    
    const [endTime]=useState(endDate);

    useEffect(() => {

      const setLeftTime = () => {
        //requestAnimationFrame 的单位是毫秒(ms)
        const nowTime=Math.ceil(new Date().getTime());
        const diff = endTime - nowTime;
        let msec = diff;
        const d = Math.floor(msec / oneDay);
        msec -= d * oneDay;
        const hh = Math.floor(msec / oneHour);
        msec -= hh * oneHour;
        const mm = Math.floor(msec / oneMinute);
        msec -= mm * oneMinute;
        const ss = Math.floor(msec / oneSecond);
        msec -= ss * oneSecond;
        setDay(`${d}`.replace(/^\d$/, '0$&'));
        setHour(`${hh}`.replace(/^\d$/, '0$&'));
        setMinute(`${mm}`.replace(/^\d$/, '0$&'));
        setSecond(`${ss}`.replace(/^\d$/, '0$&'));
  
        timer= requestAnimationFrame(setLeftTime);

        if (endTime < nowTime) {
        
          console.log("销毁")
           //-1 23 59 59
          //console.log(`${d}`.replace(/^\d$/, '0$&'),`${hh}`.replace(/^\d$/, '0$&'),`${mm}`.replace(/^\d$/, '0$&'),`${ss}`.replace(/^\d$/, '0$&'))
          setDay("00");
          setHour("00");
          setMinute("00");
          setSecond("00");
         return cancelAnimationFrame(timer);
        }
        console.log(`${mm}`.replace(/^\d$/, '0$&'),`${ss}`.replace(/^\d$/, '0$&'))
      };
  
    
      if (endTime && endTime > Math.ceil(new Date().getTime())) {
        timer= requestAnimationFrame(setLeftTime);
      }
  
      return () => {
        // 清除定时器
        console.log('销毁@——@')
        cancelAnimationFrame(timer);
      };
  
    }, [endTime]);
  
  


  return {
   days,hours,minutes,seconds,
  };
}

countDown+react+hook,react,前端,javascript,开发语言
结论:经测试,从图中确实可以看出,当离开页面的时候,requestAnimationFrame中的代码暂停执行,减少了资源的消耗文章来源地址https://www.toymoban.com/news/detail-670737.html

到了这里,关于countDown+react+hook的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端react入门day04-useEffect与Hook函数

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 useEffect 的使用 useEffect 的概念理解 useEffect 依赖项参数说明 useEffect — 清除副作用 自定义Hook实现 React Hooks使用规则 useEffect是一个React Hook函数,用于在React组件中 创建不

    2024年01月22日
    浏览(53)
  • 【前端知识】React 基础巩固(四十六)——自定义Hook的应用

    自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。 实现组件创建/销毁时打印日志 实现Context共享 封装 TokenContext 和 UserContext 两个Context在自定义Hook useUserToken 中,通过使用 userUserToken 同时获取两个Context的内容: 实现获取滚动位置 封装滚

    2024年02月14日
    浏览(44)
  • 前端实现简单的sse封装(React hook Vue3)

    所谓的SSE(Sever-Sent Event),就是浏览器向服务器发送了一个HTTP请求,保持长连接,服务器不断单向地向浏览器推送“信息”,这么做是为了节省网络资源,不用一直发请求,建立新连接。 优点:SSE和WebSocket相比,最大的优势是便利,服务端不需要第三方组件,开发难度低,SSE和

    2024年02月09日
    浏览(44)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(51)
  • 【《React Hooks实战》——指导你使用hook开发性能优秀可复用性高的React组件】

    使用React Hooks后,你很快就会发现,代码变得更具有组织性且更易于维护。React Hooks是旨在为用户提供跨组件的重用功能和共享功能的JavaScript函数。利用React Hooks, 可以将组件分成多个函数、管理状态和副作用,并且不必声明类即可调用React内置的功能。而且,上述所有的操作

    2024年02月14日
    浏览(34)
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

    在类组件开发时,我们通过 类名.contextType = MyContext 的方式,在类中获取context,多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context: 可以看到,当我们需要使用多个Context时,存在大量繁琐的嵌套代码;而Context Hook能够让我们通过Hook直接获取某个Context的值,如

    2024年02月14日
    浏览(46)
  • Hooks:尽享React特性 ,重塑开发体验

    🎼 React 16.8 版本引入了 Hooks ,可以在不使用 Class 的情况下使用 React 特性。 Hooks 允许从函数组件 “hook into” React 状态和生命周期特性。 为什么引入 Hooks ? 一个新的方案引入,一定是为了解决现存的问题。对于 Hooks 来说,就是为解决 Class 的诟病。 组件之间复用状态逻辑异

    2024年04月11日
    浏览(31)
  • 前端基本功 用 React Hooks + Antd 实现一个 Todo-List

    To-do list(待办事项列表)是用来记录和管理要完成的任务、活动或项目的列表。它是一种简单而常见的工具,用于帮助人们组织和安排日常生活中的任务。每当您有一项任务需要完成或者要记住某些事情时,您可以将它添加到待办事项列表中。 学习前端的一些新知识时,经

    2024年02月17日
    浏览(34)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(47)
  • 前端vue uni-app cc-countdown倒计时组件

    随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包