使用react render props實現倒計時

React · 發表 2018-12-06 11:37:33

摘要：使用react render props實現倒計時 react的元件模式可以觀看Michael Chan的演講視訊，平時大家常聽到的react模式也是HOC, HOC的使用場景很多，譬如react-redux的connect，這裡不贅述HOC相關，感興趣可以自行了解。首先是這樣一個場...

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

首先是這樣一個場景，我的業務需要實現倒計時，倒計時你懂得，倒計時經常應用在預告一個活動的開始，像秒殺，像開售搶購等，或者活動的截止。

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

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

這個時候我便開始編碼，考慮程式碼複用，我用Class的模式實現一個倒計時:

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

// 執行回撥，由呼叫方決定顯示格式
if (typeof this.countCb === 'function') {
this.countCb({
day,
hour,
minute,
second,
});
}
}
}

export default Timer;

通過class的方式可以實現我的上述功能，將格式顯示交給呼叫方決定，Timer只實現倒計時功能，這並沒有什麼問題，我們看呼叫方如何使用：

// 這是一個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>
);
}

檢視這種方式的呼叫的缺點：呼叫方都需要手動開啟倒計時，countDownLiveDelay方法呼叫

總感覺不夠優雅，直到我看到了react的render props, 突然靈關一現，來了下面這段程式碼：

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程式碼可戳這裡

呼叫方：

import TimeCountDown from 'TimeCountDown';
function formateTimeStr(num) {
return num < 10 ? `0${num}` : num;
}
// 業務呼叫倒計時元件
class CallTimer extends Component {
onTimeout = () => {
this.forceUpdate();
}
render() {
// 傳遞render函式
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>
)
}
}

對比這種方式，通過傳遞一個函式render方法給到TimeCountDown元件，TimeCountDown元件渲染時執行props的render方法，並傳遞TimeCountDown的state進行渲染，這就是render props的模式了，這種方式靈活、優雅很多，很多場景都可以使用這種方式，而無需使用HOC。

使用react render props實現倒計時

您可能也會喜歡…