React倒計(jì)時(shí)功能實(shí)現(xiàn)代碼——解耦通用

更新時(shí)間：2020年09月18日 08:27:29 作者：CherishTheYouth

這篇文章主要介紹了React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求分析

需求

在某個(gè)頁(yè)面中需要有一個(gè)倒計(jì)時(shí)的功能，倒計(jì)時(shí) 5 s,5s鐘后跳轉(zhuǎn)到新的界面

分析

首先是實(shí)現(xiàn)倒計(jì)時(shí)功能
其次是實(shí)現(xiàn)在每倒計(jì)時(shí) 1 s后頁(yè)面上要執(zhí)行倒計(jì)時(shí)秒數(shù)變化的功能
最后是實(shí)現(xiàn)倒計(jì)時(shí)完成后跳轉(zhuǎn)到指定頁(yè)面的功能

初版做法

代碼

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 + '秒后跳轉(zhuǎn)至登錄界面';
		return (
			<div>
				todoInfo
			</div>
		);
	}
}
export default DemoPage;

問(wèn)題分析

時(shí)間設(shè)置為全局變量，糟糕的做法，

修改不方便
難于閱讀和理解
全局變量的值極不安全，可能被任何程序修改

改進(jìn)版

代碼

class DemoPage extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			time: '',
		};
	}
	componentDidMount = () => {
		this.countDown(5);//倒計(jì)時(shí)時(shí)間可隨意調(diào)整，且可讀性強(qiáng)
 };
	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 + '秒后跳轉(zhuǎn)至登錄界面';
		return (
			<div>
				todoInfo
			</div>
		);
	}
}
export default DemoPage;

改進(jìn)后將時(shí)間作為參數(shù)放到countDown里面，方便隨意設(shè)置倒計(jì)時(shí)時(shí)間

進(jìn)一步分析問(wèn)題：

上面的做法，

setState的操作只能寫在本組件，與本組件緊耦合在一起，無(wú)法實(shí)現(xiàn)多組件復(fù)用
history.push('/Login') 只能用在umi 框架中，與框架緊耦合在一起，無(wú)法實(shí)現(xiàn)普適應(yīng)用

進(jìn)一步改進(jìn)

針對(duì)本問(wèn)題的需求，可以將業(yè)務(wù)場(chǎng)景擴(kuò)大為：

倒計(jì)時(shí)功能
倒計(jì)時(shí)過(guò)程中需要做某事 doSomethingDuringCountDown()
倒計(jì)時(shí)結(jié)束后需要做某事 doSomethingAfterCountDown()

這樣的話，倒計(jì)時(shí)的功能就可以使用的更加的靈活了。

方案

將函數(shù)作為參數(shù)傳遞到countDown()方法中

將 doSomethingDuringCountDown() 和 doSomethingAfterCountDown()作為參數(shù)傳遞到countDown方法中,

具體的方法實(shí)現(xiàn)，根據(jù)自己頁(yè)面的需求來(lái)實(shí)現(xiàn)。

代碼

//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);
}

實(shí)例

//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 + '秒后跳轉(zhuǎn)至登錄界面'
		return (
			<div>
				todoInfo
			</div>
		)
	}
}
export default DemoPage

總結(jié)

到此這篇關(guān)于React倒計(jì)時(shí)功能實(shí)現(xiàn)——解耦通用的文章就介紹到這了,更多相關(guān)React倒計(jì)時(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: