chore: Improve perf of tabs scroll (#433)

* chore: Update docs

* chore: Perf of scroll list

* chore: clean up lint

docs/examples/overflow.tsx

@@ -4,7 +4,7 @@ import '../../assets/index.less';
 
 const tabs: React.ReactElement[] = [];
 
-for (let i = 0; i < 50; i += 1) {
+for (let i = 0; i < 200; i += 1) {
   tabs.push(
     <TabPane key={i} tab={`Tab ${i}`}>
       Content of {i}

docs/examples/renderTabBar-dragable.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-named-as-default-member */
 import React from 'react';
 import { DndProvider, DragSource, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';

src/TabNavList/OperationNode.tsx

@@ -23,6 +23,7 @@ export interface OperationNodeProps {
   locale?: TabsLocale;
   removeAriaLabel?: string;
   onTabClick: (key: React.Key, e: React.MouseEvent | React.KeyboardEvent) => void;
+  tabMoving?: boolean;
 }
 
 function OperationNode(
@@ -76,7 +77,7 @@ function OperationNode(
       selectedKeys={[selectedKey]}
       aria-label={dropdownAriaLabel !== undefined ? dropdownAriaLabel : 'expanded dropdown'}
     >
-      {tabs.map(tab => {
+      {tabs.map((tab) => {
         const removable = editable && tab.closable !== false && !tab.disabled;
         return (
           <MenuItem
@@ -88,29 +89,29 @@ function OperationNode(
           >
             {/* {tab.tab} */}
             <span>{tab.tab}</span>
-            {
-              removable && <button
+            {removable && (
+              <button
                 type="button"
                 aria-label={removeAriaLabel || 'remove'}
                 tabIndex={0}
                 className={`${dropdownPrefix}-menu-item-remove`}
-                onClick={e => {
+                onClick={(e) => {
                   e.stopPropagation();
                   onRemoveTab(e, tab.key);
                 }}
               >
-              {tab.closeIcon || editable.removeIcon || '×'}
+                {tab.closeIcon || editable.removeIcon || '×'}
               </button>
-            }
+            )}
           </MenuItem>
-        )
+        );
       })}
     </Menu>
   );
 
   function selectOffset(offset: -1 | 1) {
-    const enabledTabs = tabs.filter(tab => !tab.disabled);
-    let selectedIndex = enabledTabs.findIndex(tab => tab.key === selectedKey) || 0;
+    const enabledTabs = tabs.filter((tab) => !tab.disabled);
+    let selectedIndex = enabledTabs.findIndex((tab) => tab.key === selectedKey) || 0;
     const len = enabledTabs.length;
 
     for (let i = 0; i < len; i += 1) {
@@ -178,7 +179,7 @@ function OperationNode(
   }
 
   const overlayClassName = classNames({
-    [`${dropdownPrefix}-rtl`]: rtl
+    [`${dropdownPrefix}-rtl`]: rtl,
   });
 
   const moreNode: React.ReactElement = mobile ? null : (
@@ -218,4 +219,10 @@ function OperationNode(
   );
 }
 
-export default React.forwardRef(OperationNode);
+export default React.memo(
+  React.forwardRef(OperationNode),
+  (_, next) =>
+    // https://github.com/ant-design/ant-design/issues/32544
+    // We'd better remove syntactic sugar in `rc-menu` since this has perf issue
+    next.tabMoving,
+);

src/TabNavList/index.tsx

@@ -498,6 +498,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
         prefixCls={prefixCls}
         tabs={hiddenTabs}
         className={!hasDropdown && operationsHiddenClassName}
+        tabMoving={!!lockAnimation}
       />
 
       <ExtraContent position="right" extra={extra} prefixCls={prefixCls} />