react的組件模式可以觀看Michael Chan的演講視頻,平時(shí)大家常聽到的react模式也是HOC, HOC的使用場(chǎng)景很多,譬如react-redux的connect,這里不贅述HOC相關(guān),感興趣可以自行了解。
平陰網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),平陰網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為平陰上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢,請(qǐng)找那個(gè)售后服務(wù)好的平陰做網(wǎng)站的公司定做!
首先是這樣一個(gè)場(chǎng)景,我的業(yè)務(wù)需要實(shí)現(xiàn)倒計(jì)時(shí),倒計(jì)時(shí)你懂得,倒計(jì)時(shí)經(jīng)常應(yīng)用在預(yù)告一個(gè)活動(dòng)的開始,像秒殺,像開售搶購等,或者活動(dòng)的截止。
我們來梳理一下這個(gè)倒計(jì)時(shí)的功能:
這個(gè)時(shí)候我便開始編碼,考慮代碼復(fù)用,我用Class的模式實(shí)現(xiàn)一個(gè)倒計(jì)時(shí):
class Timer { constructor(time, countCb, timeoutCb) { this.countCb = countCb; this.timeoutCb = timeoutCb; this.setDelayTime(time); } intervalId = null; clearInterval = () => { if (this.intervalId) { clearInterval(this.intervalId); } } // 更新倒計(jì)時(shí)的截止時(shí)間 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的方式可以實(shí)現(xiàn)我的上述功能,將格式顯示交給調(diào)用方?jīng)Q定,Timer只實(shí)現(xiàn)倒計(jì)時(shí)功能,這并沒有什么問題,我們看調(diào)用方如何使用:
// 這是一個(gè)react組件部分代碼 componentDidMount() { // 開啟倒計(jì)時(shí) this.countDownLiveDelay(); } componentDidUpdate() { // 開啟倒計(jì)時(shí) 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 一個(gè)timer對(duì)象 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ǎn):調(diào)用方都需要手動(dòng)開啟倒計(jì)時(shí),countDownLiveDelay方法調(diào)用
總感覺不夠優(yōu)雅,直到我看到了react的render props, 突然靈關(guān)一現(xiàn),來了下面這段代碼:
let delayTime; // 倒計(jì)時(shí)組件 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; } } // 開啟計(jì)時(shí) startCountDown() { if (delayTime && !this.timer) { this.timer = setInterval(() => { this.doCount(); }, 1000); } } doCount() { const { onTimeout, } = this.props; // 使用Math.floor((delayTime - Date.now()) / 1000)的話會(huì)導(dǎo)致這里值為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è)務(wù)調(diào)用倒計(jì)時(shí)組件 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> ) } }
對(duì)比這種方式,通過傳遞一個(gè)函數(shù)render方法給到TimeCountDown組件,TimeCountDown組件渲染時(shí)執(zhí)行props的render方法,并傳遞TimeCountDown的state進(jìn)行渲染,這就是render props的模式了,這種方式靈活、優(yōu)雅很多,很多場(chǎng)景都可以使用這種方式,而無需使用HOC。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)頁名稱:使用reactrenderprops實(shí)現(xiàn)倒計(jì)時(shí)的示例代碼
文章來源:http://muchs.cn/article6/jojgog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、虛擬主機(jī)、響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)