Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Nov 14, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
153e88a
fix: 减少开启 ReactDOM.unstable_batchedUpdates 后的重渲染次数
lijinke666 Nov 11, 2024
4af50b5
test: 补充单测
lijinke666 Nov 12, 2024
2d74602
fix: 比较 dataCfg 使用 Object.is
lijinke666 Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
wjgogogo marked this conversation as resolved.
Show resolved Hide resolved

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);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/src/common/interface/s2Options.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -386,5 +386,5 @@ export interface S2RenderOptions {
/**
* 是否重新生成列头隐藏信息
*/
reBuildHiddenColumnsDetail?: boolean;
rebuildHiddenColumnsDetail?: boolean;
}
6 changes: 3 additions & 3 deletions packages/s2-core/src/sheet-type/spread-sheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -439,7 +439,7 @@ export abstract class SpreadSheet extends EE {

this.buildFacet();

if (reBuildHiddenColumnsDetail) {
if (rebuildHiddenColumnsDetail) {
await this.initHiddenColumnsDetail();
}

Expand All @@ -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> {
Expand Down
2 changes: 1 addition & 1 deletion packages/s2-core/src/utils/hide-columns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const hideColumns = async (
spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
await spreadsheet.render({
reloadData: false,
reBuildHiddenColumnsDetail: false,
rebuildHiddenColumnsDetail: false,
});
};

Expand Down
98 changes: 60 additions & 38 deletions packages/s2-react/__tests__/unit/hooks/useSpreadSheet-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ describe('useSpreadSheet tests', () => {
fields: S2DataConfig['fields'] = mockDataConfig.fields,
): SheetComponentProps => {
return {
sheetType: 'pivot' as const,
spreadsheet: () =>
new PivotSheet(getContainer(), mockDataConfig, s2Options as S2Options),
options: s2Options,
Expand All @@ -35,9 +36,7 @@ describe('useSpreadSheet tests', () => {

test('should build spreadSheet', async () => {
const props = getConfig();
const { result } = renderHook(() =>
useSpreadSheet({ ...props, sheetType: 'pivot' }),
);
const { result } = renderHook(() => useSpreadSheet({ ...props }));

await waitFor(() => {
expect(result.current.s2Ref).toBeDefined();
Expand All @@ -47,7 +46,6 @@ describe('useSpreadSheet tests', () => {
test('should cannot change table size when width or height updated and disable adaptive', async () => {
const props = {
...getConfig(),
sheetType: 'pivot' as const,
adaptive: false,
};
const { result } = renderHook(() => useSpreadSheet(props));
Expand Down Expand Up @@ -126,7 +124,6 @@ describe('useSpreadSheet tests', () => {

const props = {
...getConfig(),
sheetType: 'pivot' as const,
onDestroy: onDestroyFromProps,
};
const { result, unmount } = renderHook(() => useSpreadSheet(props));
Expand Down Expand Up @@ -160,7 +157,6 @@ describe('useSpreadSheet tests', () => {

const props = {
...getConfig(),
sheetType: 'pivot' as const,
onMounted,
};
const { result } = renderHook(() => useSpreadSheet(props));
Expand All @@ -173,48 +169,74 @@ describe('useSpreadSheet tests', () => {
});
});

test('should call onUpdate and onUpdateAfterRender when sheet updated', async () => {
const onUpdate = jest.fn();
const onUpdateAfterRender = jest.fn();

const props = {
...getConfig(),
sheetType: 'pivot' as const,
onUpdate,
onUpdateAfterRender,
};
const { rerender } = renderHook(
(innerProps) => useSpreadSheet(innerProps),
{
initialProps: props,
test.each([
{
updatedProps: {
options: { width: 200 },
},
);

await waitFor(() => {
expect(onUpdate).toHaveBeenCalledTimes(0);
expect(onUpdateAfterRender).toHaveBeenCalledTimes(0);
});

act(() => {
rerender({ ...props, options: { width: 200 } });
});

await waitFor(() => {
expect(onUpdate).toHaveBeenCalledWith({
updateOptions: {
rebuildDataSet: false,
reloadData: false,
},
},
{
updatedProps: {
themeCfg: { name: 'dark' },
},
updateOptions: {
rebuildDataSet: false,
reloadData: false,
},
},
{
updatedProps: {
dataCfg: { fields: ['test'] },
},
updateOptions: {
rebuildDataSet: false,
reloadData: true,
},
},
])(
'should call onUpdate and onUpdateAfterRender when sheet %o updated',
async ({ updatedProps, updateOptions }) => {
const onUpdate = jest.fn();
const onUpdateAfterRender = jest.fn();

const props = {
...getConfig(),
onUpdate,
onUpdateAfterRender,
};
const { rerender } = renderHook(
(innerProps) => useSpreadSheet(innerProps),
{
initialProps: props,
},
);

await waitFor(() => {
expect(onUpdate).toHaveBeenCalledTimes(0);
expect(onUpdateAfterRender).toHaveBeenCalledTimes(0);
});
expect(onUpdateAfterRender).toHaveBeenCalledTimes(1);
});
});

act(() => {
rerender({ ...props, ...updatedProps });
});

await waitFor(() => {
expect(onUpdate).toHaveBeenCalledWith(updateOptions);
expect(onUpdateAfterRender).toHaveBeenCalledTimes(1);
});
},
);

test('should use custom render mode by onUpdate', async () => {
const onUpdate = jest.fn((options) => ({ ...options, reloadData: true }));
const onUpdateAfterRender = jest.fn();

const props = {
...getConfig(),
sheetType: 'pivot' as const,
onUpdate,
onUpdateAfterRender,
};
Expand All @@ -226,7 +248,7 @@ describe('useSpreadSheet tests', () => {
);

act(() => {
rerender({ ...props, options: { width: 200 } });
rerender({ ...props, options: { width: 300 } });
});

await waitFor(() => {
Expand Down
19 changes: 15 additions & 4 deletions packages/s2-react/src/hooks/useSpreadSheet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -106,6 +107,7 @@ export function useSpreadSheet(props: SheetComponentProps) {

updatePrevDepsRef.current = [dataCfg, options!, themeCfg!];

let rerender = false;
let reloadData = false;
let rebuildDataSet = false;

Expand All @@ -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 (prevOptions?.hierarchyType !== options?.hierarchyType) {
rebuildDataSet = true;
reloadData = true;
s2Ref.current?.setDataCfg(dataCfg);
}

rerender = true;
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) {
wjgogogo marked this conversation as resolved.
Show resolved Hide resolved
setLoading(false);

return;
}

/**
* onUpdate 交出控制权
* 由传入方决定最终的 render 模式
Expand Down
2 changes: 1 addition & 1 deletion s2-site/docs/api/basic-class/spreadsheet.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | |
Expand Down
2 changes: 1 addition & 1 deletion s2-site/docs/api/components/sheet-component.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
13 changes: 8 additions & 5 deletions s2-site/docs/manual/migration-v2.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
```

#### 小计总计配置参数变更
Expand Down
Loading