关于ant-design pickrange disabledDate 的问题

怪叔叔lz

已于 2023-01-08 17:17:45 修改

阅读量318

点赞数

文章标签：前端 vue.js javascript react

于 2023-01-08 17:16:42 首次发布

本文链接：https://blog.csdn.net/weixin_38298429/article/details/128603052

版权

文章讲述了在ant-design的日期选择器中，当使用年选择器并配置了disabledDate时，由于频繁计算和console.log导致的性能卡顿问题。解决方案包括移除console.log以减少内存占用，以及通过缓存已计算的年份来优化处理速度。

摘要由CSDN通过智能技术生成

记一次ant-design pickrange disabledDate 时间范围为年时，会重复执行上万次，导致很卡的问题。

问题分析：

经过调试发现，
1、我们虽然选择的是年选择器，但是他也是同样的转换成日来计算的。所以呢这也是为啥日、月等那些选择器相对来说不卡的原因。

2、这块还有一个知识点，就是console.log. 本来disabledDate这个方法就是一个高密度的调用，然后还在里面加入了console.log.占用了大量的内存。这也是随着选择的次数的增多，他会越来越卡的原因。console.log他是个I/O操作，还会造成内存泄漏的。这也是我们平时在项目上线前，去干掉console.log的一个原因。

解决方案

1、最简单的方法，把它的console.log干掉。减少内存占用。此时就不卡了。

2、通过记录计算过的年份，减少他每次的处理量，来解决卡顿。具体方案请看下面的部分代码。

const yearMap = {};
const disabledDate = (current) => {
    const currentYear = current.format('YYYY');
    if (!dates || (!dates[0] && !dates[1])) return false;
    if (Object.keys(yearMap).includes(currentYear)) return yearMap[currentYear];
    const date0Year = dates[0]?.format('YYYY') || '';
    const date1Year = dates[1]?.format('YYYY') || '';
    const tooLate = date0Year ? Number(currentYear) - Number(date0Year) > 7 : undefined;
    const tooEarly = date1Year ? Number(date1Year) - Number(currentYear) > 7 : undefined;         
    yearMap[currentYear] = !!tooEarly || !!tooLate;
};

谢谢大家，欢迎指点！