工作踩坑系列[2]


趁放假前记录下3个坑,开开心心放个假。

1. Antd Tree组件在数据过多的时候,会出现明显的卡顿

上次实现过组织架构树型组件,在数据量较小的情况下,无论是展开、缩进还是层级搜索节点都没有问题,但是我从后端接口拿到的数据是庞大的,这就导致了展开、缩进、搜索明显的卡顿。

当时想到的方案有两种:

  1. 通过点击相对的树节点,再去请求当前层级的数据,进行懒加载,但是这只能解决掉数据过多,请求时间长的问题,并不能解决操作卡顿的问题,所以这个方案行不通的。
  2. 寻找造成卡顿的原因。在我这个组件里造成卡顿的原因,要么是渲染节点出问题了,要么是逐层递归搜索算法出问题。

这种问题官方应该有解决的方法,去查阅了下文档,果然让我找到了

height: 设置虚拟滚动容器高度

虚拟滚动其实就是虚拟列表,他只渲染可视区里的元素,当发生滚动的时候,动态地去计算这个高度下应该显示的元素,并将不在可视区内的元素删除,这样就大大地优化了性能。

2.moment时间戳转日期

moment.js是常用的js日期处理库,虽然现在已经不维护了,而且出了很多更轻便健全的库,比如day.js,但是Antd默认自带了moment,所以我们就考虑其他的了。

需求:从接口中拿到的时间戳转换为YYYY-MM-DD,很简单一段代码解决

1
moment(time).format("YYYY-MM-DD");

结果打印出来的是1970-01-20,这明显出问题了呀,我第一反应是时间戳出问题了,用工具转换出来的结果是正确的,这引起了我的好奇心。

果断翻阅文档,得到答案

1
moment.unix(time).format("YYYY-MM-DD");

unix里似乎是做了加上三个0的操作,1643328000000所以就能正确转换日期了。

3.Taro-ui AtForm无法调用提交表单事件

我们选择了Taro来做小程序端,ui库自然就用了Taro-ui,就在处理提交表单事件的时候,triggerEvent始终是未定义的状态

根据自己的代码对比了官方示例,最核心的2段代码均无出错,那么我猜想可能是AtButton在重写的时候,覆盖了它的formType属性,然后我跑官方的示例,官方的示例还报错了!给我整麻了,快下班了也懒地去提issues了,最后用了原生的Button组件解决掉这个问题了,后来我想了下,其实这块也没必要去用表单组件,因为它并不提供校验机制,校验机制最后还是要自己去实现,不如直接2个input去做。

我的微信公众号: 梨的前端小屋


文章作者: 梨啊梨
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 梨啊梨 !
  目录