2021-10-15 React根据时间差倒计时组件

需求背景：

第一张图片是单个sku，下面是循环列表多个sku，并且循环列表里面的sku有可能跟第一张单个sku重复；

需要实现功能：

第一次，每个秒杀商品sku，展示距开始时间倒计时，倒计时结束之后，自动刷新接口；

接着出现第二个，距结束时间倒计时；距结束时间倒计时结束之后，倒计时删除不显示；

（连续两个倒计时间差，服务端返回的字段是一样的，都是返回同一个时间差字段，上面的单个sku的刷新接口，和下面的循环列表接口不同，）

实现过程：

第一次实现功能的时候，用的是一个react-countDown倒计时插件，插件里的倒计时传值只能传入一个完整时间戳，我的做法是，进入页面，先获取服务器时间，然后 + 服务端返回的差值，然后去做整个倒计时。

这样的倒计时会有bug，如果停留在页面时间很长，本身js倒计时就有误差。

停留在页面，比如一两个小时后之后，可能js倒计时已经到0结束了。这个时候，已经有了1s误差了。

在页面停留时间越长，js倒计时误差秒数越大。第一个倒计时结束，刷新接口，可能会出现一个-1s的值。

在chrome浏览器上面，-1闪了一下，就开始正常开始第二个倒计时了。

但是在firefox浏览器上面，比如第二个倒计时应该是23:58:50sfirefox上面的表现是，第二个倒计时-0:01:10s

因为用的是别人的插件，首先这个-值的问题，就没法修改。

另外，js倒计时误差的问题，可以请服务端帮忙，距开始和距结束返回两个不同的字段来解决。

第一个倒计时结束之后，刷新接口的时候，请求距结束字段。

这样来解决误差问题。

但是服务端接口已经上线了，并且是之前跟客户端H5一起定义的数据结构。

最终自己写了个倒计时组件，来解决这个问题

第一次实现代码：

出现的bug:

第一次倒计时结束之后，第二次结束倒计时不会自动倒计时，停留在了00:00:00。

问题解决：

总结：

修改的关键点有三个：

1.React.PureComponent改成了React.Component

React.PureComponent只做对象的浅层比较，如果对象包含的结构比较复杂，有可能会产生错误的对比结果

2. componentWillReceiveProps(props)

在检测到props发生变更之后，重新调用倒计时方法

3.正确使用this.props.date的值，和this.state.date的值

4.注意引入组件的时候，不要加key={index}

会出现未知错误