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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
vue中导出Excel表格的实现代码
Oct 18 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
基于mysql的bbs设计(三)
2006/10/09 PHP
PHP文件下载类
2006/12/06 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php获取url参数方法总结
2014/11/13 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
js实现扫雷小程序的示例代码
2017/09/27 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
优质美利奴羊毛袜,不只是徒步旅行:Darn Tough Vermont
2018/11/05 全球购物
学校联谊活动方案
2014/02/15 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang