fix(useVirtualScroll): optimize visibleData rendering logic (#3863)

* fix: simplify virtual scroll condition checks

* docs(list): remove unused sections

* chore(changelog): correct formatting

* chore(useVirtualScroll): rename

* chore: update demo

* chore: correct typos

* chore: update CHANGELOG.md

* chore: typo

* chore: update CHANGELOG.md

Author: RylanBot

packages/components/hooks/useVirtualScroll.ts

@@ -212,9 +212,8 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
         // 如果之前存在滚动，基于原先数据计算位置
         const currentScrollTop = container.current?.scrollTop || 0;
         let currentIndex = Math.floor(currentScrollTop / tScroll.rowHeight);
-        const prevScrollTopHeightList = trScrollTopHeightList.current;
-        for (let i = 0; i < prevScrollTopHeightList?.length; i++) {
-          if (prevScrollTopHeightList[i] >= currentScrollTop) {
+        for (let i = 0; i < scrollTopHeightList?.length; i++) {
+          if (scrollTopHeightList[i] >= currentScrollTop) {
             currentIndex = i;
             break;
           }
@@ -226,8 +225,8 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
 
         let translateY = startIndex * tScroll.rowHeight;
 
-        if (prevScrollTopHeightList?.length > 0 && startIndex > 0) {
-          const prevHeight = prevScrollTopHeightList[Math.min(startIndex - 1, prevScrollTopHeightList.length - 1)] || 0;
+        if (scrollTopHeightList?.length > 0 && startIndex > 0) {
+          const prevHeight = scrollTopHeightList[Math.min(startIndex - 1, scrollTopHeightList.length - 1)] || 0;
           translateY = Math.max(0, prevHeight);
         }
 

packages/components/list/List.tsx

@@ -101,7 +101,7 @@ const List = forwardRefWithStatics(
 
     const renderContent = () => (
       <>
-        {isVirtualScroll && virtualConfig.visibleData.length ? (
+        {isVirtualScroll ? (
           <>
             <div style={cursorStyle}></div>
             <ul className={`${COMPONENT_NAME}__inner`} style={listStyle}>

packages/components/list/_example/scroll.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { List } from 'tdesign-react';
 
 import type { ListProps } from 'tdesign-react';
@@ -9,16 +9,16 @@ export default function BasicList() {
   const [listData, setListData] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [pageNum, setPageNum] = useState(1);
-  const pageSize = 5;
 
   const dataSource: any = [];
-  const total = 30;
+  const total = 3000;
+  const pageSize = 50;
   for (let i = 0; i < total; i++) {
     dataSource.push({
       id: i,
       content: '列表内容列表内容列表内容',
       icon: 'https://tdesign.gtimg.com/list-icon.png',
-      title: '列表主内容',
+      title: `列表标题 ${i + 1}`,
     });
   }
 

packages/components/list/list.md

@@ -1,21 +1,5 @@
 :: BASE_DOC ::
 
-### 斑马纹区分列表
-
-{{ stripe }}
-
-### 异步加载的列表
-
-{{ asyncLoading }}
-
-### 带头部及尾部的列表
-
-{{ header-footer }}
-
-### 带滚动事件的列表
-
-{{ scroll }}
-
 ## API
 ### List Props
 

packages/components/menu/SubMenu.tsx

@@ -193,7 +193,7 @@ const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
 
   useRipple(subMenuDom);
 
-  // pupup 导航
+  // popup 导航
   const isPopUp = expandType === 'popup';
   // 当前二级导航激活
   const isActive = checkSubMenuChildrenActive(children, active) || active === value;

packages/components/select/base/PopupContent.tsx

@@ -234,7 +234,7 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
       {!loading && !isEmpty && renderOptions(renderedOptions)}
     </div>
   );
-  if (isVirtual && visibleData.length) {
+  if (isVirtual) {
     return (
       <>
         {panelTopContent}

packages/components/table/_example/filter-controlled.tsx

@@ -102,8 +102,8 @@ const columns: TableProps['columns'] = [
 // eslint-disable-next-line
 // function IconText(props = {}) {
 //   // 根据不同的 Props，允许定义不同的筛选图标（col, colIndex 在 Table 组件内部已经注入）
-//   const { col, colIndx } = props;
-//   console.log(col, colIndx);
+//   const { col, colIndex } = props;
+//   console.log(col, colIndex);
 //   if (col.colKey === 'email') return <div>EmailIcon</div>;
 //   return <i>Icon</i>;
 // }

packages/components/tree/__tests__/tree.test.tsx

@@ -246,7 +246,7 @@ describe('Tree test', () => {
         ],
       },
     ];
-    it('wehen props.line is customized, it works fine', async () => {
+    it('when props.line is customized, it works fine', async () => {
       const { container } = await renderTreeWithProps({
         data,
         expandAll: true,
@@ -256,7 +256,7 @@ describe('Tree test', () => {
       expect(container.querySelectorAll('.custom-line').length).toBe(6);
     });
 
-    it('wehen props.line is a customized function, it works fine', async () => {
+    it('when props.line is a customized function, it works fine', async () => {
       const line: any = () => <span className="custom-line"></span>;
       const { container } = await renderTreeWithProps({
         data,

packages/tdesign-react/CHANGELOG.md

@@ -7,7 +7,7 @@ spline: explain
 
 ## 🌈 1.15.3 `2025-09-29` 
 ### 🐞 Bug Fixes
-- `Select`: 修复 OptionGroup 的 style 与 className 没有生效的问题 @uyarn ([#3855](https://github.com/Tencent/tdesign-react/pull/3855))
+- `Select`: 修复 `OptionGroup` 的 `style` 与 `className` 没有生效的问题 @uyarn ([#3855](https://github.com/Tencent/tdesign-react/pull/3855))
 
 ## 🌈 1.15.2 `2025-09-29` 
 ### 🚀 Features
@@ -19,11 +19,11 @@ spline: explain
 - `TagInput`: 修复 `onBlur` 中的 `inputValue` 始终为空的问题 @RylanBot ([#3841](https://github.com/Tencent/tdesign-react/pull/3841))
 - `Cascader`: 修复 `single` 模式下，选中唯一的子节点时，父节点意外被高亮的问题 @RylanBot ([#3840](https://github.com/Tencent/tdesign-react/pull/3840))
 - `DateRangePickerPanel`: 修复 `preset` 涉及跨年份的日期时，点击面板后无法同步的问题 @RylanBot ([#3818](https://github.com/Tencent/tdesign-react/pull/3818))
-- `EnhancedTable`: 修复节点拖拽后，再点击展开时，位置被重置的问题 ([#3780](https://github.com/Tencent/tdesign-react/pull/3780))
+- `EnhancedTable`: 修复节点拖拽后，再点击展开时，位置被重置的问题 @RylanBot ([#3780](https://github.com/Tencent/tdesign-react/pull/3780))
 - `Table`: @RylanBot 
   - 修复开启 `multipleSort` 但没有声明 `sort` 或 `defaultSort` 时，`onSortChange` 始终返回 `undefined` 的问题 ([#3824](https://github.com/Tencent/tdesign-react/pull/3824))
-  -  修复同时开启虚拟滚动与设置 `firstFullRow` / `lastFullRow` 等情况时，最后一行内容被遮挡的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
-  -  修复 `fixedRows` / `firstFullRow` / `lastFullRow` 无法在虚拟滚动下组合使用的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
+  - 修复同时开启虚拟滚动与设置 `firstFullRow` / `lastFullRow` 等情况时，最后一行内容被遮挡的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
+  - 修复 `fixedRows` / `firstFullRow` / `lastFullRow` 无法在虚拟滚动下组合使用的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
   - 修复虚拟滚动初始化时滚动条长度异常的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
   - 修复固定表头与固定列无法对齐的问题 ([#3792](https://github.com/Tencent/tdesign-react/pull/3792))
   - 修复 `pagination` 为非受控时，必须声明 `defaultCurrent` 才能正确分页的问题 ([#3822](https://github.com/Tencent/tdesign-react/pull/3822))
@@ -33,12 +33,12 @@ spline: explain
   - 修复自定义 `popupVisible={false}` 时，`onBlur` 不生效的问题
   - 修复开启 `multiple` 时，`onBlur` 缺少 `tagInputValue` 参数的问题
 - `Select`: 
-  - 修复使用 `keys`  配置  `content` 作为 `label` 或 `value` 无法生效的问题 @RylanBot @uyarn ([#3829](https://github.com/Tencent/tdesign-react/pull/3829))
-  - 修复动态切换到虚拟滚动时，出现白屏和滚动条被意外重置的问题 @RylanBot ([#3836](https://github.com/Tencent/tdesign-react/pull/3836))
+  - 修复使用 `keys` 配置 `content` 作为 `label` 或 `value` 无法生效的问题 @RylanBot @uyarn ([#3829](https://github.com/Tencent/tdesign-react/pull/3829))
+  - 修复动态切换到虚拟滚动时，出现白屏和滚动条被意外重置的问题 @RylanBot ([#3792](https://github.com/Tencent/tdesign-react/pull/3792)) ([#3836](https://github.com/Tencent/tdesign-react/pull/3836))
   - 修复开启虚拟滚动且动态更新数据，展示数据不同步的问题 @huangchen1031 ([#3839](https://github.com/Tencent/tdesign-react/pull/3839))
 - `List`: 
   - 修复开启虚拟滚动后，`ListItem` 的部分 API 无法生效的问题 @FlowerBlackG ([#3835](https://github.com/Tencent/tdesign-react/pull/3835))
-  - 修复动态切换到虚拟滚动时，滚动条被意外重置的问题 @RylanBot ([#3836](https://github.com/Tencent/tdesign-react/pull/3836))
+  - 修复动态切换到虚拟滚动时，滚动条被意外重置的问题 @RylanBot ([#3792](https://github.com/Tencent/tdesign-react/pull/3792)) ([#3836](https://github.com/Tencent/tdesign-react/pull/3836))
 
 ## 🌈 1.15.1 `2025-09-12` 
 ### 🐞 Bug Fixes