mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
refactor: replace rc-virtual-list with @rc-component/virtual-list (#56036)
Co-authored-by: afc163 <afc163@gmail.com>
This commit is contained in:
Amumu
@@ -1,7 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
结合 [rc-virtual-list](https://github.com/react-component/virtual-list) 实现滚动加载无限长列表，能够提高数据量大时候长列表的性能。
|
||||
结合 [@rc-component/virtual-list](https://github.com/react-component/virtual-list) 实现滚动加载无限长列表，能够提高数据量大时候长列表的性能。
|
||||
|
||||
## en-US
|
||||
|
||||
An example of infinite & virtualized list via using [rc-virtual-list](https://github.com/react-component/virtual-list).
|
||||
An example of infinite & virtualized list via using [@rc-component/virtual-list](https://github.com/react-component/virtual-list).
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Avatar, List, message } from 'antd';
|
||||
import VirtualList from 'rc-virtual-list';
|
||||
import VirtualList from '@rc-component/virtual-list';
|
||||
|
||||
interface UserItem {
|
||||
email: string;
|
||||
|
||||
@@ -52,7 +52,7 @@ After aggregation, the original flattened deprecated information will be merged
|
||||
|
||||
#### Extension Problem
|
||||
|
||||
As mentioned above, there is no silver bullet in API design. In order to prevent breaking change, we generally will not change the existing API implementation. But for some conventions, this will cause trouble. For example, the `ref` component is a typical convention. As long as it is a React developer, you can understand that you can get the DOM node through `ref` and do some basic operations such as `focus`. But for composite components, the calling method and DOM may not be unified. For example, the `ref` of the Table component should obviously be the outermost div, but the `scrollTo` method should correspond to the scroll container (if it is VirtualTable, it should be handled by the internal `rc-virtual-list`). In antd mobile, `ref` is designed as a composite structure, and the DOM node is always returned through `nativeElement`:
|
||||
As mentioned above, there is no silver bullet in API design. In order to prevent breaking change, we generally will not change the existing API implementation. But for some conventions, this will cause trouble. For example, the `ref` component is a typical convention. As long as it is a React developer, you can understand that you can get the DOM node through `ref` and do some basic operations such as `focus`. But for composite components, the calling method and DOM may not be unified. For example, the `ref` of the Table component should obviously be the outermost div, but the `scrollTo` method should correspond to the scroll container (if it is VirtualTable, it should be handled by the internal `@rc-component/virtual-list`). In antd mobile, `ref` is designed as a composite structure, and the DOM node is always returned through `nativeElement`:
|
||||
|
||||
```tsx
|
||||
export interface SampleRef {
|
||||
|
||||
@@ -52,7 +52,7 @@ Warning: [antd: XXX] `old prop` is deprecated. Please use `new prop` instead.
|
||||
|
||||
### 拓展问题
|
||||
|
||||
如上所述，API 设计不存在银弹。为了防止 breaking change，我们一般不会改动现有的 API 实现。但是对于一些约定的内容，这就会造成麻烦。比如说 `ref` 组件是很典型的约定，只要是 React 的开发者就能明白，通过 `ref` 可以获取 DOM 节点以及做一些诸如 `focus` 的基本操作。但是对于复合组件而言，调用方法和 DOM 不一定能够统一。比如说 Table 组件的 `ref` 显然应该是最外层的 div，但是对于 `scrollTo` 方法则应该对应到滚动容器上（如果是 VirtualTable 则应该交由内部的 `rc-virtual-list` 进行处理）。在 antd mobile 中 `ref` 被设计为复合结构，DOM 节点总是通过 `nativeElement` 返回：
|
||||
如上所述，API 设计不存在银弹。为了防止 breaking change，我们一般不会改动现有的 API 实现。但是对于一些约定的内容，这就会造成麻烦。比如说 `ref` 组件是很典型的约定，只要是 React 的开发者就能明白，通过 `ref` 可以获取 DOM 节点以及做一些诸如 `focus` 的基本操作。但是对于复合组件而言，调用方法和 DOM 不一定能够统一。比如说 Table 组件的 `ref` 显然应该是最外层的 div，但是对于 `scrollTo` 方法则应该对应到滚动容器上（如果是 VirtualTable 则应该交由内部的 `@rc-component/virtual-list` 进行处理）。在 antd mobile 中 `ref` 被设计为复合结构，DOM 节点总是通过 `nativeElement` 返回：
|
||||
|
||||
```tsx
|
||||
export interface SampleRef {
|
||||
|
||||
@@ -35,7 +35,7 @@ You can visit the [virtual list](/components/table#table-demo-virtual-list) exam
|
||||
|
||||
## Some details
|
||||
|
||||
Table in antd internally uses the `@rc-component/table` component. Our virtual scrolling feature also reuses the `components` property mentioned above. Replace the middle `<tbody>` with `rc-virtual-list`, which is widely used in various virtual scrolling scenarios of antd like Select and Tree. `rc-virtual-list` itself does not support horizontal scrolling, so we also added horizontal scrolling support for it in this refactoring.
|
||||
Table in antd internally uses the `@rc-component/table` component. Our virtual scrolling feature also reuses the `components` property mentioned above. Replace the middle `<tbody>` with `@rc-component/virtual-list`, which is widely used in various virtual scrolling scenarios of antd like Select and Tree. `@rc-component/virtual-list` itself does not support horizontal scrolling, so we also added horizontal scrolling support for it in this refactoring.
|
||||
|
||||
### Fixed columns
|
||||
|
||||
@@ -47,7 +47,7 @@ For overlapping fixed columns, you only need to configure different offsets:
|
||||
|
||||
<img alt="Stack Sticky" height="279" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HSW-S40yR_wAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
We can also use this feature in virtual scrolling. Just reuse the `sticky` style to achieve the effect of fixed columns. `rc-virtual-list` only needs to provide horizontal scrolling, and does not need to care about the implementation of fixed columns.
|
||||
We can also use this feature in virtual scrolling. Just reuse the `sticky` style to achieve the effect of fixed columns. `@rc-component/virtual-list` only needs to provide horizontal scrolling, and does not need to care about the implementation of fixed columns.
|
||||
|
||||
### Expandable
|
||||
|
||||
@@ -130,7 +130,7 @@ So, think backwards. We only need to start from the visible area. Then get the R
|
||||
|
||||
<img alt="fully cut off" height="400" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_LBQRKPhLaIAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
`rc-virtual-list` provides the `extraRender` method, which will provide the row number currently rendered in virtual scrolling. We only need to execute `onCell` on each Record in this range to get the `rowSpan` and `colSpan` information of each `cell`. So we can know whether the current row has `rowSpan`:
|
||||
`@rc-component/virtual-list` provides the `extraRender` method, which will provide the row number currently rendered in virtual scrolling. We only need to execute `onCell` on each Record in this range to get the `rowSpan` and `colSpan` information of each `cell`. So we can know whether the current row has `rowSpan`:
|
||||
|
||||
```tsx
|
||||
// Fake code. Not used in real word
|
||||
|
||||
@@ -35,7 +35,7 @@ Table 通过 `virtual` 属性即可开启虚拟滚动能力。同时，原 Table
|
||||
|
||||
## 一些细节
|
||||
|
||||
antd 的 Table 底层使用了 `@rc-component/table` 组件，我们的虚拟滚动功能也是复用了上文提到的 `components` 属性。将中间的 `<tbody>` 替换为 `rc-virtual-list`，该组件广泛应用于 antd 的各个虚拟滚动场景中。例如 Select、Tree 都可以见到它的身影。而 `rc-virtual-list` 本身并不支持横向滚动能力，因而我们在这次改造中，也为其添加了横向滚动的支持。
|
||||
antd 的 Table 底层使用了 `@rc-component/table` 组件，我们的虚拟滚动功能也是复用了上文提到的 `components` 属性。将中间的 `<tbody>` 替换为 `@rc-component/virtual-list`，该组件广泛应用于 antd 的各个虚拟滚动场景中。例如 Select、Tree 都可以见到它的身影。而 `@rc-component/virtual-list` 本身并不支持横向滚动能力，因而我们在这次改造中，也为其添加了横向滚动的支持。
|
||||
|
||||
### 固定列
|
||||
|
||||
@@ -47,7 +47,7 @@ antd 的 Table 底层使用了 `@rc-component/table` 组件，我们的虚拟滚
|
||||
|
||||
<img alt="Stack Sticky" height="279" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HSW-S40yR_wAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
在虚拟滚动中，我们同样可以利用该特性。直接复用 `sticky` 样式，即可实现固定列的效果。而 `rc-virtual-list` 需要付出的仅仅是提供横向滚动，而不需要关心固定列的实现。
|
||||
在虚拟滚动中，我们同样可以利用该特性。直接复用 `sticky` 样式，即可实现固定列的效果。而 `@rc-component/virtual-list` 需要付出的仅仅是提供横向滚动，而不需要关心固定列的实现。
|
||||
|
||||
### 可展开
|
||||
|
||||
@@ -130,7 +130,7 @@ const Demo = () => {
|
||||
|
||||
<img alt="fully cut off" height="400" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_LBQRKPhLaIAAAAAAAAAAAAADrJ8AQ/original" />
|
||||
|
||||
`rc-virtual-list` 提供了 `extraRender` 方法，它会提供当前虚拟滚动中所渲染的行号。我们只需要对这个范围内的 Record 执行一次 `onCell` 获取每个 `cell` 的 `rowSpan` 和 `colSpan` 信息。既可以知道当前行是否存在对外的 `rowSpan` 依赖：
|
||||
`@rc-component/virtual-list` 提供了 `extraRender` 方法，它会提供当前虚拟滚动中所渲染的行号。我们只需要对这个范围内的 Record 执行一次 `onCell` 获取每个 `cell` 的 `rowSpan` 和 `colSpan` 信息。既可以知道当前行是否存在对外的 `rowSpan` 依赖：
|
||||
|
||||
```tsx
|
||||
// Fake code. Not used in real world
|
||||
|
||||
@@ -29,7 +29,7 @@ title: Third-Party Libraries
|
||||
| i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
||||
| Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||
| Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
||||
| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||
| Infinite Scroll | [@rc-component/virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||
| Map | [google-map-react](https://github.com/istarkov/google-map-react) [@uiw/react-amap](https://github.com/uiwjs/react-amap) |
|
||||
| Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](https://docs.videojs.com/tutorial-react.html) |
|
||||
| Context Menu | [react-contexify](https://github.com/fkhadra/react-contexify) |
|
||||
|
||||
@@ -30,7 +30,7 @@ title: 社区精选组件
|
||||
| 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
|
||||
| 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
|
||||
| Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
|
||||
| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||
| 无限滚动 | [@rc-component/virtual-list](https://github.com/react-component/virtual-list/) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
|
||||
| 地图 | [google-map-react](https://github.com/istarkov/google-map-react) [@uiw/react-amap 高德地图](https://github.com/uiwjs/react-amap) |
|
||||
| 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](https://docs.videojs.com/tutorial-react.html) |
|
||||
| 右键菜单 | [react-contexify](https://github.com/fkhadra/react-contexify) |
|
||||
|
||||
12
package.json
12
package.json
@@ -116,7 +116,7 @@
|
||||
"@ant-design/icons": "^6.1.0",
|
||||
"@ant-design/react-slick": "~1.1.2",
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@rc-component/cascader": "~1.8.0",
|
||||
"@rc-component/cascader": "~1.9.0",
|
||||
"@rc-component/checkbox": "~1.0.1",
|
||||
"@rc-component/collapse": "~1.1.2",
|
||||
"@rc-component/color-picker": "~3.0.3",
|
||||
@@ -139,17 +139,17 @@
|
||||
"@rc-component/rate": "~1.0.1",
|
||||
"@rc-component/resize-observer": "^1.0.1",
|
||||
"@rc-component/segmented": "~1.2.3",
|
||||
"@rc-component/select": "~1.2.4",
|
||||
"@rc-component/select": "~1.3.0",
|
||||
"@rc-component/slider": "~1.0.1",
|
||||
"@rc-component/steps": "~1.2.2",
|
||||
"@rc-component/switch": "~1.0.3",
|
||||
"@rc-component/table": "~1.8.2",
|
||||
"@rc-component/table": "~1.9.0",
|
||||
"@rc-component/tabs": "~1.6.0",
|
||||
"@rc-component/textarea": "~1.1.2",
|
||||
"@rc-component/tooltip": "~1.4.0",
|
||||
"@rc-component/tour": "~2.2.1",
|
||||
"@rc-component/tree": "~1.0.2",
|
||||
"@rc-component/tree-select": "~1.3.1",
|
||||
"@rc-component/tree": "~1.1.0",
|
||||
"@rc-component/tree-select": "~1.4.0",
|
||||
"@rc-component/trigger": "^3.7.1",
|
||||
"@rc-component/upload": "~1.1.0",
|
||||
"@rc-component/util": "^1.4.0",
|
||||
@@ -185,6 +185,7 @@
|
||||
"@octokit/rest": "^22.0.0",
|
||||
"@prettier/sync": "^0.6.1",
|
||||
"@qixian.cs/github-contributors-list": "^2.0.2",
|
||||
"@rc-component/virtual-list": "^1.0.2",
|
||||
"@size-limit/file": "^12.0.0",
|
||||
"@stackblitz/sdk": "^1.11.0",
|
||||
"@testing-library/dom": "^10.4.1",
|
||||
@@ -292,7 +293,6 @@
|
||||
"puppeteer": "^24.23.0",
|
||||
"rc-footer": "^0.6.8",
|
||||
"rc-tween-one": "^3.0.6",
|
||||
"rc-virtual-list": "^3.19.2",
|
||||
"react": "^19.2.0",
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^19.2.0",
|
||||
|
||||
3
tests/__mocks__/@rc-component/virtual-list.ts
Normal file
3
tests/__mocks__/@rc-component/virtual-list.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import List from '@rc-component/virtual-list/lib/mock';
|
||||
|
||||
export default List;
|
||||
@@ -1,3 +0,0 @@
|
||||
import List from 'rc-virtual-list/lib/mock';
|
||||
|
||||
export default List;
|
||||
Reference in New Issue
Block a user