当前位置:网站首页>验证码倒计时自定义hooks
验证码倒计时自定义hooks
2022-08-10 19:13:00 【大风起兮云飞扬丶】
需要注意:虽然定时器中在不停的调用setTime改变time的值,但是在定时器中输出time的值是不会变的。因为函数式组件中每执行一次setState都会形成一个新的闭包,所以你改变的值只在你新的闭包中才能访问到。但是可使用useEffect+依赖的形式访问到这个值。
const useTimer = () => {
const [time, setTime] = useState();
const timeId = useRef(null);
const start = (count) => {
if (timeId.current) {
clearTimer();
}
setTime(count);
timeId.current = setInterval(() => {
setTime((t) => --t);
}, 1000);
};
const clearTimer = () => {
clearInterval(timeId.current);
};
useEffect(() => {
if (time <= 0) {
clearTimer();
}
}, [time]);
useEffect(() => clearTimer, []);
return {
time, start };
};
使用方法:
const {
time,start}= useTimer();
start(3)
边栏推荐
- The servlet mapping path matching resolution
- (10) Sequence and deserialization of image data
- [Natural Language Processing] [Vector Representation] PairSupCon: Pairwise Supervised Contrastive Learning for Sentence Representation
- 不止跑路,拯救误操作rm -rf /*的小伙儿
- flask生成路由的2种方式和反向生成url
- 重载和重写
- 『牛客|每日一题』岛屿数量
- (十)图像数据的序列与反序列化
- Multifunctional Nanozyme Ag/PANI | Flexible Substrate Nano ZnO Enzyme | Rhodium Sheet Nanozyme | Ag-Rh Alloy Nanoparticle Nanozyme | Iridium Ruthenium Alloy/Iridium Oxide Biomimetic Nanozyme
- Colocate Join :ClickHouse的一种高性能分布式join查询模型
猜你喜欢
Echart饼状图标注遮盖解决方案汇总
【LeetCode】42、接雨水
端口探测详解
leetcode 85.最大矩形 单调栈应用
Iridium Ruthenium Alloy/Iridium Oxide Biomimetic Nanozyme | Palladium Nanozyme | GMP-Pd Nanozyme | Gold-Palladium Composite Nanozyme | Ternary Metal Pd-M-Ir Nanozyme |shell nanozyme
(十二) findContours函数的hierarchy详解
导入FontForge生成字体
[Natural Language Processing] [Vector Representation] PairSupCon: Pairwise Supervised Contrastive Learning for Sentence Representation
Common ports and services
Heme - gold nanoparticles (Heme - AuNP) composite nanometer enzyme | gold nanoparticles nuclear porous hollow carbon nanometer spherical shell (Au @ HCNs) nano enzyme
随机推荐
mysql----group by、where以及聚合函数需要注意事项
运维面试题(每日一题)
常见端口及服务
[Teach you how to do mini-games] How to lay out the hands of Dou Dizhu?See what the UP master of the 250,000 fan game area has to say
测试开发【Mock 平台】08 开发:项目管理(四)编辑功能和Component抽离
IIC通信协议总结[通俗易懂]
Redis persistence mechanism
2022 Hangdian Multi-School Seven Black Magic (Sign-in)
(10) Sequence and deserialization of image data
Pt/CeO2 monatomic nanoparticles enzyme | H - rGO - Pt @ Pd NPs enzyme | carbon nanotube load platinum nanoparticles peptide modified nano enzyme | leukemia antagonism FeOPtPEG composite nano enzyme
Apple Font Lookup
铁蛋白颗粒负载雷替曲塞/培美曲塞/磺胺地索辛/金刚烷(科研试剂)
1D Array Dynamics and Question Answers
[Natural Language Processing] [Vector Representation] PairSupCon: Pairwise Supervised Contrastive Learning for Sentence Representation
网络虚拟化
The Biotin-PEG3-Br/acid/NHS ester/alcohol/amine collection that everyone wants to share
What is the upstream bandwidth and downstream bandwidth of the server?
About npm/cnpm/npx/pnpm and yarn
电脑为什么会蓝屏的原因
[SemiDrive source code analysis] [MailBox inter-core communication] 52 - DCF Notify implementation principle analysis and code combat