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

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

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

需求分析

需求

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

分析

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

初版做法

代碼

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;

問題分析

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

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

改進版

代碼

class DemoPage extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			time: '',
		};
	}
	componentDidMount = () => {
		this.countDown(5);//倒計時時間可隨意調(diào)整，且可讀性強
 };
	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;

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

進一步分析問題：

上面的做法，

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

進一步改進

針對本問題的需求，可以將業(yè)務(wù)場景擴大為：

倒計時功能
倒計時過程中需要做某事 doSomethingDuringCountDown()
倒計時結(jié)束后需要做某事 doSomethingAfterCountDown()

這樣的話，倒計時的功能就可以使用的更加的靈活了。

方案

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

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

具體的方法實現(xiàn)，根據(jù)自己頁面的需求來實現(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);
}

實例

//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倒計時功能實現(xiàn)——解耦通用的文章就介紹到這了,更多相關(guān)React倒計時內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: