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

 更新时间:2020年09月18日 08:27:29   作者:CherishTheYouth  
这篇文章主要介绍了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

总结

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

相关文章

  • 浅谈React中的元素、组件、实例和节点

    浅谈React中的元素、组件、实例和节点

    这篇文章主要介绍了浅谈React中的元素、组件、实例和节点,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 详解React 16 中的异常处理

    详解React 16 中的异常处理

    这篇文章主要介绍了详解React 16 中的异常处理的相关资料,React 16.x 版本中,引入了所谓 Error Boundary 的概念,从而保证了发生在 UI 层的错误不会连锁导致整个应用程序崩溃;未被任何异常边界捕获的异常可能会导致整个 React 组件树被卸载,需要的朋友可以参考下
    2017-07-07
  • React中使用setInterval函数的实例

    React中使用setInterval函数的实例

    这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React服务端渲染(总结)

    React服务端渲染(总结)

    当我们要求渲染时间尽量快、页面响应速度快时就会用到服务端渲染,本篇文章主要介绍了React服务端渲染,有兴趣的可以了解一下
    2017-07-07
  • React 全自动数据表格组件——BodeGrid的实现思路

    React 全自动数据表格组件——BodeGrid的实现思路

    表格是在后台管理系统中用的最频繁的组件之一,相关的功能有数据的新增和编辑、查询、排序、分页、自定义显示以及一些操作按钮。这篇文章主要介绍了React 全自动数据表格组件——BodeGrid ,需要的朋友可以参考下
    2019-06-06
  • create-react-app构建项目慢的解决方法

    create-react-app构建项目慢的解决方法

    这篇文章主要介绍了create-react-app构建项目慢的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    基于react hooks,zarm组件库配置开发h5表单页面的实例代码

    这篇文章主要介绍了基于react hooks,zarm组件库配置开发h5表单页面,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React-intl 实现多语言的示例代码

    React-intl 实现多语言的示例代码

    本篇文章主要介绍了React-intl 实现多语言的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • ReactiveCocoa代码实践之-UI组件的RAC信号操作

    ReactiveCocoa代码实践之-UI组件的RAC信号操作

    这篇文章主要介绍了ReactiveCocoa代码实践之-UI组件的RAC信号操作 的相关资料,需要的朋友可以参考下
    2016-04-04
  • 关于antd tree和父子组件之间的传值问题(react 总结)

    关于antd tree和父子组件之间的传值问题(react 总结)

    这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下
    2021-06-06

最新评论