简单来说需要在组件初始化的时候，将数据转为特定的时间类型。

有一点需要注意。

如果用的是ant design 4.x 的版本，需要使用 moment 进行格式转换。

如果使用的是 ant design 5.x 的版本，则需要使用 dayjs 进行格式转换。

处理 ant design中 DatePicker 组件数据不回填的问题

# 前言

今天接到一个需求，要求随着页面向下滚动，上方的搜索组件背景颜色从透明逐渐转为白色。

具体的实现思路就是通过监听页面元素的滚动高度，让搜索组件的透明度随之变化。

但是实现后发现过渡效果有很明显的卡顿感，本文将介绍此问题的解决方法。

# 解决方法
搜索组件，这里主要就是控制背景颜色的透明度。

```react
<div
	style={{
        background: `rgba(255,255,255,${opacity})`
  	}}
  > ... </div>
```

优化前的逻辑，渐变效果有很明显的卡顿。

```react
// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 监听滚动事件
useEffect(() => {
    document.addEventListener('scroll', () => {
      setOpacity(opacity => window.scrollY / 70)
    })
}, [])
```

优化后的逻辑，渐变效果非常顺滑。

```react
// 顶部搜索透明度0-1
const [opacity, setOpacity] = useState(0)
// 页面滚动
const handleScroll = () => {
	setOpacity(window.scrollY / 70)
};
// 添加监听事件
useEffect(() => {
	document.addEventListener('scroll', () => handleScroll());
	return () => document.removeEventListener('scroll', handleScroll);
}, []);
```

排查后发现，每次加载这个页面时都会给 `document` 添加滚动事件。导致的结果就是随着页面加载次数的增多，效果也变得越来越卡。

解决方法就是给 `useEffect` 添加一个清除函数，这样每次重新加载页面时，会把之前的滚动事件清除掉，再重新进行事件的添加。

这样就能保证页面始终都只有一个滚动监听事件，问题也随之解决。

react 处理滚动事件更新UI卡顿的问题

今天接触到一个mysql的业务场景

有两张表：course、teacher

course 表中有 teacher_ids 字段。里面存储的是 teacher 表的 id 以逗号分隔的字符串。

现在要查询 course 列表，并且关联查询出 teacher_ids 中关联教师的数据。



MySQL提供了一个名为`FIND_IN_SET()`的内置字符串函数，允许您在逗号分隔的字符串列表中查找指定字符串的位置。

下面说明了`FIND_IN_SET()`函数的语法。

```sql
FIND_IN_SET(needle,haystack);
```

`FIND_IN_SET()`函数接受两个参数：

- 第一个参数`needle`是要查找的字符串。
- 第二个参数`haystack`是要搜索的逗号分隔的字符串列表。

参考：https://www.yiibai.com/mysql/find_in_set.html 



原生语句用法：

```sql
select * from tp_course join tp_course_teacher on find_in_set(tp_course_teacher.id, tp_course.teacher_ids);
```

Typeorm:

```js
async find({ where, order, take, skip }: findDto) {
  const [list, total] = await this.courseRepository
    .createQueryBuilder('course')
    .leftJoinAndMapMany(
      'course.teachers',
      Teacher,
      'teacher',
      `FIND_IN_SET(teacher.id, course.teacher_ids)`,
    )
    .where(where)
    .orderBy(order)
    .take(take)
    .skip(skip)
    .getManyAndCount();
  return { list, total };
}
```
knex 过滤:
```
const targetId = 123; // 要检查的目标 id

const result = await knex('your_table')
  .whereRaw(`FIND_IN_SET(?, your_column) > 0`, [targetId])
  .select('*');
```



处理 ant design中 DatePicker 组件数据不回填的问题

目录