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倒计时内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://www.cnblogs.com/CherishTheYouth/archive/2020/09/16/CherishTheYouth_20200916.html