反应的组件模式可以观看迈克尔·陈的演讲视频,平时大家常听到的反应模式也是特殊,特殊的使用场景很多,譬如react-redux的连接,这里不赘述的相关,感兴趣可以自行了解。
首先是这样一个场景,我的业务需要实现倒计时,倒计时你懂得,倒计时经常应用在预告一个活动的开始,像秒杀,像开售抢购等,或者活动的截止。
我们来梳理一下这个倒计时的功能:
<李>定时更新时间,以秒为度,李
<李>可以更新倒计时的截止时间,比如从10月1日更新为10月2日,李
<李>倒计时结束,执行对应结束逻辑;李
<李>倒计时结束,开启另一个活动倒计时,李
<李>同时有多个倒计时,李
这个时候我便开始编码,考虑代码复用,我用类的模式实现一个倒计时:
类计时器{
构造函数(时间、countCb timeoutCb) {
这一点。countCb=countCb;
这一点。timeoutCb=timeoutCb;
this.setDelayTime(时间);
}
intervalId=零;
clearInterval=()=比;{
如果(this.intervalId) {
clearInterval (this.intervalId);
}
}//更新倒计时的截止时间
setDelayTime=(时间)=比;{
this.clearInterval ();
如果(){
this.delayTime=时间;
this.intervalId=setInterval(()=比;{
this.doCount ();
},1000);
}
}
doCount=()=比;{
const timeDiffSecond=? {this.delayTime - Date.now ()}’。替换(/\ d{3}/美元,' 000 ')/1000;
如果(timeDiffSecond & lt;=0) {
this.clearInterval ();
如果(typeof。timeoutCb===昂?{
this.timeoutCb ();
}
返回;
}
常量数学天=５匕?timeDiffSecond/86400);
const小时=数学。地板((timeDiffSecond % 86400)/3600);
const分钟=数学。地板((timeDiffSecond % 3600)/60);
常量数学第二=５匕?60 (timeDiffSecond % 3600) %);//执行回调,由调用方决定显示格式
如果(typeof。countCb===昂?{
this.countCb ({
一天,
小时,
分钟,
第二,
});
}
}
}
出口默认计时器;
通过类的方式可以实现我的上述功能,将格式显示交给调用方决定,计时器只实现倒计时功能,这并没有什么问题,我们看调用方如何使用:
//这是一个反应组件部分代码
componentDidMount () {//开启倒计时
this.countDownLiveDelay ();
}
componentDidUpdate () {//开启倒计时
this.countDownLiveDelay ();
}
componentWillUnmount () {
如果(this.timer) {
this.timer.clearInterval ();
}
}
计时器=零;
countDownLiveDelay=()=比;{
const {
countDownTime,>
让时延;//倒计时组件
类TimeCountDown扩展组件{
状态={
天:0,
小时:0,
分钟:0,
第二:0,
}
componentDidMount () {
滞后时间=this.props.time;
this.startCountDown ();
}
componentDidUpdate () {
如果(this.props。时间!==时延){
滞后时间=this.props.time;
this.clearTimer ();
this.startCountDown ();
}
}
计时器=零;
clearTimer () {
如果(this.timer) {
clearInterval (this.timer);
这一点。计时器=零;
}
}//开启计时
startCountDown () {
如果延迟时间,,! this.timer) {
这一点。计时器=setInterval(()=比;{
this.doCount ();
},1000);
}
}
doCount () {
const {>
从“进口TimeCountDown TimeCountDown ';
函数formateTimeStr (num) {
返回num & lt;10 & # 63;“0 $ {num}”: num;
}//业务调用倒计时组件
类CallTimer扩展组件{
onTimeout=()=比;{
this.forceUpdate ();
}
呈现(){//传递渲染函数
回报(
& lt;跨风格={styles.statusText}祝辞
距直播还有
& lt; TimeCountDown
时间={时间}
onTimeout={()=比;{this.onTimeout ();}}
渲染={({小时,分钟,秒})=比;{
回报(
& lt; span>
{formateTimeStr(小时)}:{formateTimeStr(分钟)}:{formateTimeStr(秒)}
& lt;/span>
);
}}/比;
& lt;/span>
)
}
}
对比这种方式,通过传递一个函数呈现方法给到TimeCountDown组件,TimeCountDown组件渲染时执行道具的渲染方法,并传递TimeCountDown的状态进行渲染,这就是渲染道具的模式了,这种方式灵活,优雅很多,很多场景都可以使用这种方式,而无需使用的。
