fix: 减少开启 ReactDOM.unstable_batchedUpdates 后的重渲染次数

antvis · Nov 11, 2024 · 153e88a · 153e88a
1 parent e565b8a
commit 153e88a
Show file tree

Hide file tree

Showing 8 changed files with 36 additions and 22 deletions.
diff --git a/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts b/packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
@@ -773,24 +773,24 @@ describe('PivotSheet Tests', () => {
 
   test('should rebuild hidden columns detail by status', async () => {
     // 重新更新, 但是没有隐藏列信息
-    await s2.render({ reloadData: false, reBuildHiddenColumnsDetail: true });
+    await s2.render({ reloadData: false, rebuildHiddenColumnsDetail: true });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(0);
 
     s2.store.set('hiddenColumnsDetail', [
       null,
     ] as unknown as HiddenColumnsInfo[]);
 
-    // 重新更新, 有隐藏列信息, 但是 reBuildHiddenColumnsDetail 为 false
+    // 重新更新, 有隐藏列信息, 但是 rebuildHiddenColumnsDetail 为 false
     await s2.render({
       reloadData: false,
-      reBuildHiddenColumnsDetail: false,
+      rebuildHiddenColumnsDetail: false,
     });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(0);
 
-    // 重新更新, 有隐藏列信息, 且 reBuildHiddenColumnsDetail 为 true
-    await s2.render({ reloadData: false, reBuildHiddenColumnsDetail: true });
+    // 重新更新, 有隐藏列信息, 且 rebuildHiddenColumnsDetail 为 true
+    await s2.render({ reloadData: false, rebuildHiddenColumnsDetail: true });
 
     expect(mockHideColumnsByThunkGroup).toHaveBeenCalledTimes(1);
   });

diff --git a/packages/s2-core/src/common/interface/s2Options.ts b/packages/s2-core/src/common/interface/s2Options.ts
@@ -386,5 +386,5 @@ export interface S2RenderOptions {
   /**
    * 是否重新生成列头隐藏信息
    */
-  reBuildHiddenColumnsDetail?: boolean;
+  rebuildHiddenColumnsDetail?: boolean;
 }
diff --git a/packages/s2-core/src/sheet-type/spread-sheet.ts b/packages/s2-core/src/sheet-type/spread-sheet.ts
@@ -423,7 +423,7 @@ export abstract class SpreadSheet extends EE {
     const {
       reloadData = true,
       rebuildDataSet = false,
-      reBuildHiddenColumnsDetail = true,
+      rebuildHiddenColumnsDetail = true,
     } = options || {};
 
     this.emit(S2Event.LAYOUT_BEFORE_RENDER);
@@ -439,7 +439,7 @@ export abstract class SpreadSheet extends EE {
 
     this.buildFacet();
 
-    if (reBuildHiddenColumnsDetail) {
+    if (rebuildHiddenColumnsDetail) {
       await this.initHiddenColumnsDetail();
     }
 
@@ -456,7 +456,7 @@ export abstract class SpreadSheet extends EE {
       s2.render({
         reloadData: true;
         rebuildDataSet: true;
-        reBuildHiddenColumnsDetail: true;
+        rebuildHiddenColumnsDetail: true;
       })
    */
   public async render(options?: S2RenderOptions | boolean): Promise<void> {

diff --git a/packages/s2-core/src/utils/hide-columns.ts b/packages/s2-core/src/utils/hide-columns.ts
@@ -131,7 +131,7 @@ export const hideColumns = async (
     spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
     await spreadsheet.render({
       reloadData: false,
-      reBuildHiddenColumnsDetail: false,
+      rebuildHiddenColumnsDetail: false,
     });
   };
 

diff --git a/packages/s2-react/src/hooks/useSpreadSheet.ts b/packages/s2-react/src/hooks/useSpreadSheet.ts
@@ -1,7 +1,8 @@
+/* eslint-disable max-lines-per-function */
 import type { S2DataConfig, S2Options, ThemeCfg } from '@antv/s2';
 import { PivotSheet, SpreadSheet, TableSheet } from '@antv/s2';
 import { useUpdate, useUpdateEffect } from 'ahooks';
-import { identity } from 'lodash';
+import { identity, isEqual } from 'lodash';
 import React from 'react';
 import type { SheetComponentOptions, SheetComponentProps } from '../components';
 import { getSheetComponentOptions } from '../utils';
@@ -106,10 +107,11 @@ export function useSpreadSheet(props: SheetComponentProps) {
 
       updatePrevDepsRef.current = [dataCfg, options!, themeCfg!];
 
+      let rerender = false;
       let reloadData = false;
       let rebuildDataSet = false;
 
-      if (!Object.is(prevDataCfg, dataCfg)) {
+      if (!isEqual(prevDataCfg, dataCfg)) {
         // 列头变化需要重新计算初始叶子节点
         if (
           prevDataCfg?.fields?.columns?.length !==
@@ -119,24 +121,33 @@ export function useSpreadSheet(props: SheetComponentProps) {
         }
 
         reloadData = true;
+        rerender = true;
         s2Ref.current?.setDataCfg(dataCfg);
       }
 
-      if (!Object.is(prevOptions, options)) {
-        if (!Object.is(prevOptions?.hierarchyType, options?.hierarchyType)) {
+      if (!isEqual(prevOptions, options)) {
+        if (!isEqual(prevOptions?.hierarchyType, options?.hierarchyType)) {
           rebuildDataSet = true;
           reloadData = true;
+          rerender = true;
           s2Ref.current?.setDataCfg(dataCfg);
         }
 
         s2Ref.current?.setOptions(options as S2Options);
         s2Ref.current?.changeSheetSize(options!.width, options!.height);
       }
 
-      if (!Object.is(prevThemeCfg, themeCfg)) {
+      if (!isEqual(prevThemeCfg, themeCfg)) {
+        rerender = true;
         s2Ref.current?.setThemeCfg(themeCfg);
       }
 
+      if (!rerender) {
+        setLoading(false);
+
+        return;
+      }
+
       /**
        * onUpdate 交出控制权
        * 由传入方决定最终的 render 模式

diff --git a/s2-site/docs/api/basic-class/spreadsheet.zh.md b/s2-site/docs/api/basic-class/spreadsheet.zh.md
@@ -47,7 +47,7 @@ s2.isPivotMode()
 | setOptions | 更新表格配置                                                                                                                 | (options: [S2Options](/docs/api/general/S2Options), reset?: boolean) => void |  `reset` 参数需在 `@antv/s2^1.34.0`版本使用  |
 | resetDataCfg | 重置表格数据                                                                                                                 | () => void | |
 | resetOptions | 重置表格配置                                                                                                                 | () => void |   |
-| render | 重新渲染表格，如果 `reloadData` = true, 则会重新计算数据，`rebuildDataSet` = true, 重新构建数据集，`reBuildHiddenColumnsDetail` = true 重新构建隐藏列信息 | `(reloadData?: boolean \| { reloadData?: boolean, rebuildDataSet?: boolean; reBuildHiddenColumnsDetail?: boolean }) => Promise<void>` |    |
+| render | 重新渲染表格，如果 `reloadData` = true, 则会重新计算数据，`rebuildDataSet` = true, 重新构建数据集，`rebuildHiddenColumnsDetail` = true 重新构建隐藏列信息 | `(reloadData?: boolean \| { reloadData?: boolean, rebuildDataSet?: boolean; rebuildHiddenColumnsDetail?: boolean }) => Promise<void>` |    |
 | destroy | 销毁表格                                                                                                                   | `() => void` |    |
 | setThemeCfg | 更新主题配置 （含主题 schema, 色板，主题名）                                                                                            | (themeCfg: [ThemeCfg](/docs/api/general/S2Theme/#themecfg)) => void |    |
 | setTheme | 更新主题 （只包含主题 scheme)                                                                                                    | (theme: [S2Theme](/docs/api/general/S2Theme/#s2theme)) => void |    |

diff --git a/s2-site/docs/api/components/sheet-component.zh.md b/s2-site/docs/api/components/sheet-component.zh.md
@@ -354,7 +354,7 @@ type SheetComponentOptions = S2Options<
 | -- | -- | -- | -- | --- |
 | reloadData | 是否重新加载数据 | `boolean` |  |  |
 | rebuildDataSet | 是否重新生成数据集 | `boolean` |  |  |
-| reBuildHiddenColumnsDetail | 是否重新生成列头隐藏信息 | `boolean` |  |  |
+| rebuildHiddenColumnsDetail | 是否重新生成列头隐藏信息 | `boolean` |  |  |
 
 <embed src="@/docs/common/view-meta.zh.md"></embed>
 <embed src="@/docs/common/interaction.zh.md"></embed>
diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md
@@ -621,17 +621,20 @@ render 函数的参数从 `boolean` 扩展为 `boolean | object`, 当为 `boolea
 + s2.render({ reloadData: false }) // 等价于 s2.render(false)
 + s2.render({
 +   reloadData: false,
-+   reBuildHiddenColumnsDetail: false,
++   rebuildHiddenColumnsDetail: false,
 + });
 ```
 
 `reBuildDataSet` 重命名为 `rebuildDataSet`:
+`reBuildHiddenColumnsDetail` 重命名为 `rebuildHiddenColumnsDetail`:
 
 ```diff
-+ s2.render({
--   reBuildDataSet: false,
-+   rebuildDataSet: false,
-+ });
+s2.render({
+-  reBuildDataSet: false,
++  rebuildDataSet: false,
+-  reBuildHiddenColumnsDetail: false,
++  rebuildHiddenColumnsDetail: false,
+});
 ```
 
 #### 小计总计配置参数变更