jd-opensource / jd-opensource/taro-ui

AtCalendar组件,marks数组较大时会严重卡顿。

Open
#744 4 comments 1 reaction 1 assignee Claimed by @SzHeJason View on GitHub
高阶组件
Dominant language
TypeScript
Stars
4.7k
Forks
740
PR merge metrics
No merged PRs in 30d

Description

### Taro UI 版本信息

2.2.1

### 问题描述

当marks数组较大时,日历对各种操作的响应都会变慢。因为这个问题我不得不重新写了一个日历组件,功能上与AtCalendar完全一致。这里为了有个对比,在复现前请先安装我写的日历,`yarn add taro-calendar-customizable`。

### 复现步骤

问题复现可以直接看官方的TaroUI小程序demo > 高阶组件 > Calendar
官方demo里可以看到的就有两个地方:
1.日期跳转,在iphone7上体现为1秒左右的响应延迟。
2.标记时间,同样是1秒左右的响应延迟。

代码复现步骤。

(1) 代码运行后使用手机进行预览(iphone7 微信版本7.0.5)
(2) 点击添加标记(这里两个日历的响应速度是一致的,由于一次添加的数据量较大,都要3秒左右的时间来响应)
(3) 随意点击一个日期(此时会发现AtCalendar需要接近3秒的时间来响应点击操作,而下方的calendar没有明显的延迟)
(4) 点击 日历上方的左右箭头 (AtCalendar依旧是接近3秒的响应时间,而下方的calendar没有明显的延迟)
(5) 点击清空标记
(6) 重复(3)(4) 一切恢复正常

延迟时间是随着mark数组长度增长的。如果想在pc上复现,多点几下增加标记按钮即可。

### 复现代码

```typescript jsx
import Taro, { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { AtButton, AtCalendar } from 'taro-ui';
import Calendar from 'taro-calendar-customizable';

const formatDate = (date: Date) => {
const yearStr = date.getFullYear();
const month = date.getMonth() + 1;
const monthStr = (Array(2).join('0') + month).slice(-2);
const day = date.getDate();
const dayStr = (Array(2).join('0') + day).slice(-2);
return `${yearStr}-${monthStr}-${dayStr}`;
};

type IProps = {};
type IState = {
marks: { value: string }[];
current: string;
};
export default class Index extends Component {
state: IState = {
marks: [],
current: '2019-08-18'
};
addMarks = () => {
let { marks } = this.state;
if (marks.length) {
console.log(marks[marks.length - 1].value);
}
let dateObj = marks.length
? new Date(marks[marks.length - 1].value)
: new Date();

for (let i = 0; i < 100; i++) {
dateObj.setDate(dateObj.getDate() + 1);
marks.push({ value: formatDate(dateObj) });
}
console.log(marks);
this.setState({ marks });
};

render() {
const { marks, current } = this.state;
return (

AtCalendar

taro-calendar-customizable
this.setState({ current: curr })}
/>
当前标记总量{marks.length}
增加标记
this.setState({ marks: [] })}>
清除标记


);
}
}

```

### 报错信息

### 系统信息

IOS 12

### 补充信息

可以看到。每次无论什么操作都是3秒左右的延迟,
也就是说每次点击操作后组件内部重新渲染的工作量等同于向marks数组重新添加600个标记。

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.