如何将React倒计时功能代码解耦改写为通用长尾？

本文共计969个文字，预计阅读时间需要4分钟。

需求分析：在某个页面中，需要实现一个倒计时功能，倒计时5秒后跳转到新页面。

需求：在页面中实现一个倒计时功能，倒计时5秒后自动跳转至新页面。

分析：

1.首先实现倒计时功能。

2.在倒计时结束时，实现页面跳转至新页面。

倒计时功能：

1.使用JavaScript实现倒计时功能。

2.设置倒计时时间为5秒。

3.倒计时结束时，执行页面跳转。

页面跳转：

1.使用JavaScript实现页面跳转。

2.在倒计时结束时，使用window.location.href进行页面跳转。

倒计时秒数变化功能：

1.在倒计时过程中，实时显示倒计时秒数。

2.当倒计时秒数变化时，更新页面上的倒计时显示。

需求分析

需求

在某个页面中需要有一个倒计时的功能，倒计时 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倒计时内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！