记一次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;
};
谢谢大家,欢迎指点!