React倒计时功能实现——解耦通用
时间:2022-07-25
本文章向大家介绍React倒计时功能实现——解耦通用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
React倒计时功能实现——解耦通用
需求分析
需求
在某个页面中需要有一个倒计时的功能,倒计时 5 s,5s钟后跳转到新的界面
分析
- 首先是实现倒计时功能
- 其次是实现在每倒计时 1 s后页面上要执行 倒计时秒数变化的功能
- 最后是实现倒计时完成后 跳转到指定页面的功能
初版做法
代码
let waitTime = 5
class DemoPage extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
};
}
componentDidMount = () => {
this.countDown();
};
countDown = () => {
if (waitTime > 0) {
waitTime--;
this.setState({
time:waitTime
})
} else {
history.push('/Login')
return;
}
setTimeout(() => {
this.countDown();
}, 1000);
}
render() {
todoInfo = this.state.time + '秒后跳转至登录界面';
return (
<div>
todoInfo
</div>
);
}
}
export default DemoPage;
问题分析
时间设置为全局变量,糟糕的做法,
- 修改不方便
- 难于阅读和理解
- 全局变量的值极不安全,可能被任何程序修改
改进版
代码
class DemoPage extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
};
}
componentDidMount = () => {
this.countDown(5);//倒计时时间可随意调整,且可读性强
};
countDown = (waitTime) => {
if (waitTime > 0) {
waitTime--;
this.setState({
time:waitTime
})
} else {
history.push('/Login')
return;
}
setTimeout(() => {
this.countDown(waitTime);
}, 1000);
}
render() {
todoInfo = this.state.time + '秒后跳转至登录界面';
return (
<div>
todoInfo
</div>
);
}
}
export default DemoPage;
改进后将时间作为参数放到countDown里面,方便随意设置倒计时时间
进一步分析问题:
上面的做法,
- setState的操作只能写在本组件,与本组件紧耦合在一起,无法实现多组件复用
- history.push('/Login') 只能用在umi 框架中,与框架紧耦合在一起,无法实现普适应用
进一步改进
针对本问题的需求,可以将业务场景扩大为:
- 倒计时功能
-
倒计时过程中 需要做某事
doSomethingDuringCountDown()
-
倒计时结束后 需要做某事
doSomethingAfterCountDown()
这样的话,倒计时的功能就可以使用的更加的灵活了。
方案
将函数作为参数传递到countDown()方法中 将
doSomethingDuringCountDown()
和doSomethingAfterCountDown()
作为参数传递到countDown方法中, 具体的方法实现,根据自己页面的需求来实现。
代码
//utils.js
export countDown = (waitTime,doSomethingDuringCountDown,doSomethingAfterCountDown){
if (waitTime > 0) {
waitTime--;
if(doSomethingDuringCountDown){
doSomethingDuringCountDown()
}
} else {
if(doSomethingAfterCountDown){
doSomethingAfterCountDown()
}
return;
}
setTimeout(() => {
countDown(waitTime,doSomethingDuringCountDown,doSomethingAfterCountDown);
}, 1000);
}
实例
//DemoPage.jsx
import { countDown } from 'utils.js'
class DemoPage extends React.Component {
constructor(props) {
super(props);
this.state = {
time: '',
};
}
componentDidMount = () => {
countDown(5,this.waitTimeStateChange,this.linkTo);
}
waitTimeStateChange = (time) => {
this.setState({
time: time,
})
}
linkTo = () => {
history.push(ToBeReviewedShowData.linkUrl)
}
render() {
todoInfo = this.state.time + '秒后跳转至登录界面'
return (
<div>
todoInfo
</div>
)
}
}
export default DemoPage
- 零基础学编程042:画函数图像
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part2
- C++11 Lambda表达汇总总结
- TensorFlow开发环境搭建(Ubuntu16.04+GPU+TensorFlow源码编译)
- C++虚析构函数解析
- C-SATS工程副总裁教你如何用TensorFlow分类图像 part1
- 帝国cms文章页调用当前文章URL如何操作?
- dedecms文章页调用地址(当前文章URL)如何操作?
- 饭团开通一周,3人学会了比特币操作
- Sample K算法
- C#读取“我的文档”等特殊系统路径及环境变量
- winform CheckedListBox实现全选/全不选
- 机器学习该如何入门
- dedecms建的网站如何去掉/index.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- G级大文件分割器 + 核心源码
- 前端也能学算法:JS版常见排序算法-冒泡,插入,快排,归并
- 前端也能学算法:JS版链表
- 将二进制文件加入VC资源后释放执行
- JavaScript中的函数式编程
- JavaScript中的compose函数和pipe函数
- 常用JS函数-数组扁平化,缓存函数,柯里化函数,防抖和节流函数
- JavaScript单元测试及原理
- 前端进阶知识汇总
- 前端也能学算法:由浅入深讲解动态规划
- 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__
- 前端也能学算法:由浅入深讲解贪心算法
- web.py指南性说明
- this到底指向啥?看完这篇就知道了!
- 学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS小数计算不准问题