需求背景：
第一张图片是单个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}
会出现未知错误
网友评论