前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React倒计时功能实现——解耦通用

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

作者头像
CherishTheYouth
发布2020-09-18 10:37:51
1.3K0
发布2020-09-18 10:37:51
举报
文章被收录于专栏:Vue技术实践

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

需求分析

需求

在某个页面中需要有一个倒计时的功能,倒计时 5 s,5s钟后跳转到新的界面

分析

  • 首先是实现倒计时功能
  • 其次是实现在每倒计时 1 s后页面上要执行 倒计时秒数变化的功能
  • 最后是实现倒计时完成后 跳转到指定页面的功能

初版做法

代码

代码语言:javascript
复制
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;

问题分析

时间设置为全局变量,糟糕的做法,

  • 修改不方便
  • 难于阅读和理解
  • 全局变量的值极不安全,可能被任何程序修改

改进版

代码

代码语言:javascript
复制
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方法中, 具体的方法实现,根据自己页面的需求来实现。

代码

代码语言:javascript
复制
//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);
}

实例

代码语言:javascript
复制
//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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-09-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • React倒计时功能实现——解耦通用
    • 需求分析
      • 需求
      • 分析
    • 初版做法
      • 代码
      • 问题分析
    • 改进版
      • 代码
      • 进一步分析问题:
    • 进一步改进
      • 方案
      • 代码
    • 实例
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档