React 카운트다운 기능 구현 코드 - 결합 공통

수요 분석
수요
어떤 페이지에서 카운트다운 기능이 필요합니다. 카운트다운 5s, 5s시간 후 새로운 인터페이스로 넘어갑니다.
분석

우선 카운트다운 기능

그 다음은 카운트다운 1s 후 페이지에서 카운트다운 초수 변화를 실행하는 기능

마지막으로 카운트다운 완료 후 지정된 페이지로 이동하는 기능

초판 방법
코드

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 카운트다운 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!