用hooks 实现一个倒计时功能

已于 2024-02-21 09:10:02 修改
阅读量202 收藏
点赞数
分类专栏： react之函数组件、类组件 文章标签： 前端 react.js javascript
于 2024-02-20 17:59:53 首次发布
原文链接：https://juejin.cn/post/7271643757640007680
版权

目录

一个自定义hook的案例

【需求介绍】

【基础实现】：

app.jsx中

MessageBtn.jsx中

【改进】：

 app.jsx中

useCountDown.jsx中

MessageBtn.jsx中

useLatest.jsx中 源码

一个自定义hook的案例

实现一个倒计时 hooks

【需求介绍】

我们先简单的实现一个3秒倒计时的功能，就模仿我们常见的发短息验证码的功能。页面效果

【基础实现】：

        功能比较简单，按钮点击的时候创建了一个定时器，然后时间到了就清除这个定时器。

app.jsx中

image-20230827172546343.png

MessageBtn.jsx中

image-20230827172851670.png

【改进】：

现在把 MessageBtn 中倒计时的逻辑写到一个自定义的hooks里面。

自定义的useCountdown函数

把上面的一些逻辑抽取一下，useCountdown主要接受一个倒计时的时长，返回当前时间的状态，以及一个开始倒计时的函数

 app.jsx中

image-20230827172546343.png

useCountDown.jsx中

        1.  期望useCountdown支持两个函数，一个是在倒计时的时候调用，一个是在倒计时结束的时候调用。 【如图1】

        2.  start函数用了useCallback，因为我们不能保证用户的使用场景会不会出问题，所以我们包一下。 自定义hooks提供给别人的方法，最好用useCallback包裹一下，防止别人将该函数作为依赖项时出问题。【如图1】

        3.  这里count定义 0 有点歧义，0 不能准确的知道是一开始的 0 还是倒计时结束的 0，所以还需要加一个标志位来表示当前是结束的 0。使用 useEffect监听count的变化，变化的时候触发对应的方法：let countDowning = useRef(false) 。【如图1】

image-20230827192510462.png

【图1  】           

        

        4. 【提出问题】 那么，现在就有一个很严重的问题，onEnd和 countdownCallBack这两个函数是外部传入的，我们要不要把他放到我们自定义hook的useEffect依赖项里面呢

我们不能保证外部传入的变量一定是一个被useCallback包裹的函数，那么肯定就不能放到useEffect依赖项里面。

如何解决这个问题呢？

答案就是使用useRef。使用别人提供的hooks返回的方法，如果需要将其作为依赖项，在不了解其方法是否用useCallback缓存的情况下，可以用useRef来接收后使用。

【意图】：对于hooks所提供的方法“做最好的准备，做最坏的打算”。

【如图2（最终的写法）】

image-20230827194144821.png

【图2】

   自定义hooks，参数是一个函数，我们不能保证外部传入的变量一定是一个被useCallback包裹的函数，那么肯定就不能放到useEffect依赖项里面，所以需要useref包装一下。     

MessageBtn.jsx中

预期的使用是这样的，通过一个配置对象传入 countdownCallBack函数和onEnd

useLatest.jsx中 源码

【提问】：用useLastest和直接使用函数但是不把函数放进useEffect依赖中有什么区别?

【解答】：useEffect不写依赖 会产生闭包，拿到的函数是老的函数，useLastest可以拿到新的

image-20230827193638585.png

比如ahooks里面的useLatest和useMemoizedFn的实现

在这里肯定也是看了很多介绍 useCallback的文章了，推荐一下下面的文章

how-to-use-memo-use-callback，这个是全英文的，掘金有翻译这篇文章的，「好文翻译」。

作者：既见君子
链接：https://juejin.cn/post/7271643757640007680
来源：稀土掘金

   

outstanding木槿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react hooks 封装一个countDown 倒计时组件
郊眠寺
01-10 1165
回看整个倒计时的代码，感觉代码其实是挺简单的，但是我当时实现起来是花了挺长时间的，主要原因还是我当时对hooks不太熟悉，现在回看也觉得写得很一般，不是那么的hooks；相信很多大牛都能写得比我好很多，我这里只是分享一下自己曾经写的一个小组件。大家可以按需修改使用。最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
CountdownTimer：使用React Hooks的简单倒数计时器
03-01
CountdownTimer：使用React Hooks的简单倒数计时器
自定义hooks实现一个简单的倒计时
总结，交流，记录，成长
03-27 2973
自定义hook
使用react hooks写一个倒计时功能
最新发布
LRQQHM的博客
05-06 367
先要明确的是，setTimeout函数中执行代码的时间肯定是要大于等于setTimeout时间的，那么就可能出现设定的 1 秒，实际执行却执行了 2 秒的情况，那么我们的实现思路也很简单，每次计算一下setTimeout实际执行的时间，然后动态的调整下一次执行的时间，而不是设置固定的值。第n次执行 executionTime 实际执行时间 nextTime 下次需要执行的时间 totleTime 执行的总时间。
react Hooks 实现倒计时
weixin_46600931的博客
11-22 1553
思路：实现倒计时我们就要定时去轮询，那就是setInterval（），在使用定时器我们要在结束后清除定时器clearInterval（），释放内存。需求H5表单提交完毕实现5秒倒计时，网上很多案例，hooks却很少，如果你是vue用户抽出js就可以（这边我使用的ts）我们可以借助hooks 中useEffect的第二参数监听定时的变化，与第三参数return（）=>类似销毁生命周期。css 取自己需要的。
react-Hook倒计时hook
YX0711的博客
06-10 1186
封装倒计时hook
React Hooks 实现撤消和重做功能
06-08
:recycling_symbol: 使用 React Hooks 使用撤消撤消/重做功能。 安装 yarn add use-undo Usage import React from 'react'; 从 'react-dom' 导入 ReactDOM； 从'use-undo'导入useUndo； const App = () => { const ...
非常简单但功能强大的 React 倒计时钩子。
06-08
非常简单但功能强大的 React 倒计时钩子。 由 requestAnimationFrame 提供支持。 使用 npm 安装： $ npm install --save react-countdown-hook 使用纱线： $ yarn add react-countdown-hook 快速入门 import React ...
use-undo:React Hooks实现撤消和重做功能
05-02
使用React 撤消/重做功能。 安装 yarn add use-undo 用法 import React from 'react' ; import ReactDOM from 'react-dom' ; import useUndo from 'use-undo' ; const App = ( ) => { const [ countState , { ...
Reacthooks的一个flutter实现
08-10
Hooks 是一种管理Widget生命周期的新对象。 它们的存在有一个原因：增加小部件之间的代码共享，并作为StatefulWidget的完全替代
2. 尝试使用React Hooks重写【倒计时】组件（Hooks版本）
xishuiinsz的博客
12-03 2160
/* endTime: 目标时间，格式为时间戳 endTimeUp: 倒计时结束的回调 */ export const CountDown = ({ endTime, endTimeUp }) => { const [day, setDay] = useState(0) const [hour, setHour] = useState(0) const [minu...
自定义Hooks-逻辑复用-倒计时代码
cvvvvvvvvvv的博客
12-02 1076
// 自定义Hooks逻辑复用 ---倒计时 import { useEffect, useRef, useState } from 'react' // useCountDown(倒计时的总时间, 倒计时结束执行的操作) export default function useCountDown (initCount = 10, callBack = () => {}) { const timeId = useRef<{ id: number }>({ id: 0 }) cons
用HOOK写倒计时组件
聪明绝顶的你与即将秃头的我
02-02 588
import React,{useState ,useEffect} from 'react'; function App({endTime}){ const[time,setTime]=useState({ day:0, hour:0, minute:0, second:0 }); useEffect(()=>{ let times=(endTime-new Date().getTime())/1000; console.log(.
验证码倒计时自定义hooks
大风起兮云飞扬
08-09 174
需要注意：虽然定时器中在不停的调用setTime改变time的值，但是在定时器中输出time的值是不会变的。因为函数式组件中每执行一次setState都会形成一个新的闭包，所以你改变的值只在你新的闭包中才能访问到。但是可使用useEffect+依赖的形式访问到这个值。...
Hooks——钩子概览
weixin_34248849的博客
04-02 130
（资料源于MSDN，本文仅对其进行翻译、批注。其链接为：http://msdn.microsoft.com/en-us/library/windows/desktop/ms644959%28v=vs.85%29.aspx本文链接：http://blog.csdn.net/wlsgzl/article/details/37648721转载请注明出处并保持文章的完整性。） Hooks...
基于Vue3+Hooks实现4位随机数和60秒倒计时
都随它大小便吧
01-24 475
首先，Vue3的Hooks是一种新的 API，用于在Vue组件中管理状态和生命周期。它们是基于 React Hooks的概念设计的，可以让开发者更方便地在函数式组件中使用状态管理和生命周期函数。本文给大家分享一下基于Hooks实现的两个案例。
【React hooks】用hook写一个倒计时按钮
qq_33539213的博客
04-23 6186
场景：获取验证码按钮，点击获取后倒计时60s不能操作。 import React, { useState, useEffect } from 'react'; import { Button } from 'antd'; let timeChange; const Btn = () => { const [time, setTime] = useState(60); co...
如何自己手写一个React的有倒计时功能的hook？
m0_64564920的博客
04-03 942
如何自己封装一个有倒计时功能的hook？ 代码如下： import React, {useState, useEffect, useRef} from 'react' export const useCountDown = () => { /* 基本思路： 1. 写一个定时器 2. 提供方法 - 可以直接调用，然后开启定时器 3. 清除定时器 4. 设置节流 5. 设置文本的状态 */ // 定义倒计时的数量 var [count, setCount] = u
ts+hooks实现60秒倒计时组件
06-03
好的，以下是一个使用 TypeScript 和 React Hooks 实现的 60 秒倒计时组件的示例： ```tsx import React, { useEffect, useState } from 'react'; interface Props { onComplete: () => void; } const Countdown: React.FC<Props> = ({ onComplete }) => { const [secondsLeft, setSecondsLeft] = useState(60); useEffect(() => { const interval = setInterval(() => { if (secondsLeft > 0) { setSecondsLeft(secondsLeft - 1); } else { clearInterval(interval); onComplete(); } }, 1000); return () => clearInterval(interval); }, [secondsLeft, onComplete]); return <div>{secondsLeft} seconds left</div>; }; export default Countdown; ``` 在这个组件中，我们使用了 `useState` 来存储剩余的秒数，并使用 `useEffect` 来计时。在 `useEffect` 中，我们设置了一个 1 秒的定时器，每次更新状态时减去 1 秒。如果剩余的秒数为 0，我们将清除定时器并调用 `onComplete` 回调函数。 你可以在使用此组件时通过 `onComplete` 属性来设置回调函数，当倒计时结束时将会调用该函数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值