Using React Render Props to implement the countdown sample code

React component mode You can watch Michael Chan’s speech video. The React mode that you often listen is also HOC. There are many ways to use HOC, such as React-Redux’s Connect, here you don’t have to go to HOC, you can understand yourself .

The first is the scene, my business needs to achieve countdown, countdown, you know, countdown, often applied in the beginning of a activity, like a spike, is on sale, etc., or the deadline of activities.

使用react render props实现倒计时的示例代码 Let’s combing this countdown function:

Timed update time, in seconds;
  • can be updated The deadline of the countdown is updated from October 2nd to October 2;
  • ends, the corresponding end logic;
  • end, open another activity countdown;
  • There are multiple countdown;
  • I started coding at this time, consider the code multiplexing, I use the Class mode to implement a countdown:

class Timer {constructor (time, countCb, timeoutCb) {this.countCb = countCb; this.timeoutCb = timeoutCb; this.setDelayTime (time);} intervalId = null; clearInterval = () => {if (this {ClearInterVal (this.intervalid);}} // Update the deadline of the countdown set + = {this.clearinterval (); if (tIME) {this.delaytime = Time; this.intervalid = setInterval (() => {this.docount ();}, 1000);}} Docount = () => {const timediffsecond = `$ {this.delaytime – Date.now ()} `.replace (/ \ D {3} $ /, ‘000’) / 1000; if (Timediffsecond
  <= 0) {
   this.clearInterval();
   if (typeof this.timeoutCb === 'function') {
    this.timeoutCb();
   }
   return;
  }

  const day = Math.floor(timeDiffSecond / 86400);
  const hour = Math.floor((timeDiffSecond % 86400) / 3600);
  const minute = Math.floor((timeDiffSecond % 3600) / 60);
  const second = Math.floor((timeDiffSecond % 3600) % 60);

  // 执行回调,由调用方决定显示格式
  if (typeof this.countCb === 'function') {
   this.countCb({
    day,
    hour,
    minute,
    second,
   });
  }
 }
}

export default Timer; 
can be implemented in the way My above functions, put the format to the caller decision, Timer only realizes the countdown function, this is not a problem, we look at how to use:

// this is a component part of the code react componentDidMount () {// open the countdown this.countDownLiveDelay ();} componentDidUpdate () {// open the countdown this.countDownLiveDelay ();} componentWillUnmount () {if (this.timer) {this. timer.clearInterval ();}} timer = null; countDownLiveDelay = () => {const {countDownTime, onTimeout,} = this.props; if (this.timer) {return;} const time = countDownTime * 1000; if ( TiME

{THISTSTATE ({TIMEDELAYTEXT: `$ {FormateTimeStr (Hour)}: $ {formatetimeStr (second)}: $ {formatetimestr (second)}}` `};}, () => {THIS. Timer = null; if (TypeOf ontimeout === ‘function’) {ONTIMEOUT ();}});} render () {return (
{this.state.timeDelaytext} );}
      
Disadvantages in this way: the caller needs to manually turn the countdown, the countdownlivedeLay method call

always feels unique enough until I saw Render Render PROPS, suddenly swearing, coming below:

Let delayTIME; // Countdown component class timecountdown extends Component {State = {Day: 0, HOUR : 0, Minute: 0, Second: 0,} componentdidmount () {delayTime = this.props.time; this.startcountdown ();} ComponentDidUpdate ();} componentdidupdate () {i (this.props.time! == delayTime) {delayTime = this.props.time; this.clearTimer (); this.startcountdown ();}} Timer = NULL; Cleartimer () {if (this.timer) {clearinterval (this.timer); this.timer = null;}} // StartcountDown () { IF (delayTime &&! this.timer) {this.timer = setInterval (() => {this.docount ();}, 1000);}} Docount () {const {turnout ()} = this.props; // Using Math.Floor (DELAYTIME – DATE.NOW ()) / 1000), the value is 0, the front delayTime – Date.Now ()> 0 const timediffsecond = (delayTime – `$ {date.now ()} `.replace (/ \ d {3} $ /, ‘000’)) / 1000; if (Timediffsecond
  <= 0) {
   this.clearTimer();
   if (typeof onTimeout === 'function') {
    onTimeout();
   }
   return;
  }

  const day = Math.floor(timeDiffSecond / 86400);
  const hour = Math.floor((timeDiffSecond % 86400) / 3600);
  const minute = Math.floor((timeDiffSecond % 3600) / 60);
  const second = Math.floor((timeDiffSecond % 3600) % 60);

  this.setState({
   day,
   hour,
   minute,
   second,
  });
 }

 render() {
  const {
   render,
  } = this.props;

  return render({
   ...this.state,
  });
 }
}

export default TimeCountDown; 
Specific TimECountDown code can be poked here

Call:

Import timecountdown from ‘timecountdown’; function formatetimeStr (Num) {return num
{this.forceUpdate ();} render () {/ / Transfer render function return( There is also
 {this.ontimeout ();}} render = {({Hour, minute, second}) => {return ( {formateTimeStr (hour)}: {FormateTimeStr MINUTE)}: {formateTimeStr (Second)} );}} /> )}}   Contrast, by transmitting a function render Method Give the TimeCountDown component, the TimECountdown component is rendered, and the TimecountDown component is executed, and the TimecountDown's State is rendered. This is the render props mode, this way is flexible, elegant, many scenes can be used, and There is no need to use HOC.   The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.  
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment