欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用react render props實現(xiàn)倒計時的示例代碼

 更新時間:2018年12月06日 14:32:09   作者:EnjoyChan  
這篇文章主要介紹了使用react render props實現(xiàn)倒計時的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

react的組件模式可以觀看Michael Chan的演講視頻,平時大家常聽到的react模式也是HOC, HOC的使用場景很多,譬如react-redux的connect,這里不贅述HOC相關,感興趣可以自行了解。

首先是這樣一個場景,我的業(yè)務需要實現(xiàn)倒計時,倒計時你懂得,倒計時經(jīng)常應用在預告一個活動的開始,像秒殺,像開售搶購等,或者活動的截止。

我們來梳理一下這個倒計時的功能:

  • 定時更新時間,以秒為度;
  • 可以更新倒計時的截止時間,比如從10月1日更新為10月2日;
  • 倒計時結束,執(zhí)行對應結束邏輯;
  • 倒計時結束,開啟另一個活動倒計時;
  • 同時有多個倒計時;

這個時候我便開始編碼,考慮代碼復用,我用Class的模式實現(xiàn)一個倒計時:

class Timer {
 constructor(time, countCb, timeoutCb) {
  this.countCb = countCb;
  this.timeoutCb = timeoutCb;
  this.setDelayTime(time);
 }

 intervalId = null;

 clearInterval = () => {
  if (this.intervalId) {
   clearInterval(this.intervalId);
  }
 }

 // 更新倒計時的截止時間
 setDelayTime = (time) => {
  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);

  // 執(zhí)行回調(diào),由調(diào)用方?jīng)Q定顯示格式
  if (typeof this.countCb === 'function') {
   this.countCb({
    day,
    hour,
    minute,
    second,
   });
  }
 }
}

export default Timer;

通過class的方式可以實現(xiàn)我的上述功能,將格式顯示交給調(diào)用方?jīng)Q定,Timer只實現(xiàn)倒計時功能,這并沒有什么問題,我們看調(diào)用方如何使用:

 // 這是一個react組件部分代碼 
 componentDidMount() {
  // 開啟倒計時
  this.countDownLiveDelay();
 }

 componentDidUpdate() {
  // 開啟倒計時
  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 <= Date.now()) {
   onTimeout();
  }
  // new 一個timer對象
  this.timer = new Timer(time, ({ hour, minute, second }) => {
   this.setState({
    timeDelayText: `${formateTimeStr(hour)}:${formateTimeStr(minute)}:${formateTimeStr(second)}`,
   });
  }, () => {
   this.timer = null;

   if (typeof onTimeout === 'function') {
    onTimeout();
   }
  });
 }

 render() {
  return (
   <span style={styles.text}>{this.state.timeDelayText}</span>
  );
 }

查看這種方式的調(diào)用的缺點:調(diào)用方都需要手動開啟倒計時,countDownLiveDelay方法調(diào)用

總感覺不夠優(yōu)雅,直到我看到了react的render props, 突然靈關一現(xiàn),來了下面這段代碼:

let delayTime;
// 倒計時組件
class TimeCountDown extends Component {
 state = {
  day: 0,
  hour: 0,
  minute: 0,
  second: 0,
 }

 componentDidMount() {
  delayTime = this.props.time;
  this.startCountDown();
 }

 componentDidUpdate() {
  if (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 {
   onTimeout,
  } = this.props;

  // 使用Math.floor((delayTime - Date.now()) / 1000)的話會導致這里值為0,前面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;

具體TimeCountDown代碼可戳這里

調(diào)用方:

import TimeCountDown from 'TimeCountDown';
function formateTimeStr(num) {
 return num < 10 ? `0${num}` : num;
}
// 業(yè)務調(diào)用倒計時組件
class CallTimer extends Component {
 onTimeout = () => {
  this.forceUpdate();
 }
 render() {
  // 傳遞render函數(shù)
  return (
   <span style={styles.statusText}>
    距直播還有
    <TimeCountDown
      time={time}
      onTimeout={() => { this.onTimeout(); }}
      render={({ hour, minute, second }) => {
       return (
        <span>
         {formateTimeStr(hour)}:{formateTimeStr(minute)}:{formateTimeStr(second)}
        </span>
       );
      }}
     />
      </span>
  )
 }
}

對比這種方式,通過傳遞一個函數(shù)render方法給到TimeCountDown組件,TimeCountDown組件渲染時執(zhí)行props的render方法,并傳遞TimeCountDown的state進行渲染,這就是render props的模式了,這種方式靈活、優(yōu)雅很多,很多場景都可以使用這種方式,而無需使用HOC。

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • React?Suspense解決競態(tài)條件詳解

    React?Suspense解決競態(tài)條件詳解

    這篇文章主要為大家介紹了React?Suspense解決競態(tài)條件詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • React中使用setInterval函數(shù)的實例

    React中使用setInterval函數(shù)的實例

    這篇文章主要介紹了React中使用setInterval函數(shù)的實例,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • React生命周期函數(shù)深入全面介紹

    React生命周期函數(shù)深入全面介紹

    生命周期函數(shù)指在某一時刻組件會自動調(diào)用并執(zhí)行的函數(shù)。React每個類組件都包含生命周期方法,以便于在運行過程中特定的階段執(zhí)行這些方法
    2022-09-09
  • TypeScript在React項目中的使用實踐總結

    TypeScript在React項目中的使用實踐總結

    這篇文章主要介紹了TypeScript在React項目中的使用總結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-04-04
  • 使用react+redux實現(xiàn)彈出框案例

    使用react+redux實現(xiàn)彈出框案例

    這篇文章主要為大家詳細介紹了使用react+redux實現(xiàn)彈出框案例,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 通過示例源碼解讀React首次渲染流程

    通過示例源碼解讀React首次渲染流程

    這篇文章主要為大家通過示例源碼解讀React的首次渲染流程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • React?Hooks的useState、useRef使用小結

    React?Hooks的useState、useRef使用小結

    React Hooks 是 React 16.8 版本引入的新特性,useState和useRef是兩個常用的Hooks,本文主要介紹了React?Hooks的useState、useRef使用,感興趣的可以了解一下
    2024-01-01
  • 淺談React Event實現(xiàn)原理

    淺談React Event實現(xiàn)原理

    這篇文章主要介紹了淺談React Event實現(xiàn)原理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • React路由動畫切換實現(xiàn)過程詳解

    React路由動畫切換實現(xiàn)過程詳解

    這篇文章主要介紹了react-router 路由切換動畫的實現(xiàn)示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2022-12-12
  • React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式詳解

    React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式詳解

    這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式,手動路由的跳轉(zhuǎn),主要是通過Link或者NavLink進行跳轉(zhuǎn)的,實際上我們也可以通JavaScript代碼進行跳轉(zhuǎn),需要的朋友可以參考下
    2022-11-11

最新評論