React倒计时功能实现代码——解耦通用


Posted in Javascript onSeptember 18, 2020

需求分析

需求

在某个页面中需要有一个倒计时的功能,倒计时 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

总结

到此这篇关于React倒计时功能实现——解耦通用的文章就介绍到这了,更多相关React倒计时内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
js变换显示图片的实例
Apr 16 Javascript
关于Javascript作用域链的八点总结
Dec 06 Javascript
jquery实现弹出层完美居中效果
Mar 03 Javascript
用js将内容复制到剪贴板兼容浏览器
Mar 18 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 #Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 #Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 #Javascript
vue项目实现多语言切换的思路
Sep 17 #Javascript
vue实现放大镜效果
Sep 17 #Javascript
JavaScript封装单向链表的示例代码
Sep 17 #Javascript
vue修改Element的el-table样式的4种方法
Sep 17 #Javascript
You might like
给多个地址发邮件的类
2006/10/09 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python对象与json相互转换的方法
2019/05/07 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
详细分析Python collections工具库
2020/07/16 Python
药物学专业学生的自我评价
2013/10/27 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
避暑山庄导游词
2015/02/04 职场文书
2016教师廉洁教育心得体会
2016/01/13 职场文书
党性修养心得体会2016
2016/01/21 职场文书
Go各时间字符串使用解析
2021/04/02 Golang
go web 预防跨站脚本的实现方式
2021/06/11 Golang