From 63c6206192a8407ffe33c7fde3bbee97224fd144 Mon Sep 17 00:00:00 2001 From: Zeke Zhang <958414905@qq.com> Date: Sun, 3 Nov 2024 13:27:15 +0800 Subject: [PATCH] perf(useDataBlockRequest): prevent unnecessary re-renders --- .../antd/filter/useFilterActionProps.ts | 12 +++++++----- .../client/src/schema-component/antd/form-v2/hook.ts | 10 +++++----- .../src/schema-component/antd/grid-card/hooks.ts | 8 ++++---- .../src/schema-component/antd/table-v2/Table.tsx | 4 ++-- .../src/schema-component/hooks/useBlockSize.ts | 4 ++-- .../VariableInput/hooks/useFormVariable.ts | 8 ++++---- 6 files changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts b/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts index e008e6bb5f..0a18314920 100644 --- a/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts +++ b/packages/core/client/src/schema-component/antd/filter/useFilterActionProps.ts @@ -196,7 +196,7 @@ export const useFilterActionProps = () => { return useFilterFieldProps({ options, params: props?.params }); }; -export const useFilterFieldProps = ({ options, service, params }: { options: any[]; service?: any; params: any }) => { +export const useFilterFieldProps = ({ options, service, params }: { options: any[]; service?: any; params?: any }) => { const { getDataBlockRequest } = useDataBlockRequestGetter(); const { t } = useTranslation(); const field = useField(); @@ -205,9 +205,10 @@ export const useFilterFieldProps = ({ options, service, params }: { options: any const onSubmit = useCallback( (values) => { const _service = service || getDataBlockRequest(); + const _params = params || _service.state?.params?.[0] || _service.params; // filter parameter for the block - const defaultFilter = params.filter; + const defaultFilter = _params.filter; // filter parameter for the filter action const filter = removeNullCondition(values?.filter); @@ -228,13 +229,14 @@ export const useFilterFieldProps = ({ options, service, params }: { options: any field.title = t('Filter'); } }, - [dataLoadingMode, field, params?.filter, service, t, getDataBlockRequest], + [dataLoadingMode, field, getDataBlockRequest, params, service, t], ); const onReset = useCallback(() => { const _service = service || getDataBlockRequest(); + const _params = params || _service.state?.params?.[0] || _service.params; - const filter = params.filter; + const filter = _params.filter; const filters = _service?.params?.[1]?.filters || {}; delete filters[`filterAction`]; @@ -255,7 +257,7 @@ export const useFilterFieldProps = ({ options, service, params }: { options: any } _service?.run(...newParams); - }, [dataLoadingMode, field, params?.filter, service, t, getDataBlockRequest]); + }, [dataLoadingMode, field, getDataBlockRequest, params, service, t]); return { options, diff --git a/packages/core/client/src/schema-component/antd/form-v2/hook.ts b/packages/core/client/src/schema-component/antd/form-v2/hook.ts index 43749c1705..84499e2e58 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/hook.ts +++ b/packages/core/client/src/schema-component/antd/form-v2/hook.ts @@ -7,13 +7,13 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { theme } from 'antd'; import { useFieldSchema } from '@formily/react'; -import { useDataBlockHeight } from '../../hooks/useBlockSize'; +import { theme } from 'antd'; import { useDesignable } from '../../'; -import { useDataBlockRequest } from '../../../data-source'; -import { useFormDataTemplates } from './Templates'; import { useBlockHeightProps } from '../../../block-provider/hooks/useBlockHeightProps'; +import { useDataBlockRequestData } from '../../../data-source'; +import { useDataBlockHeight } from '../../hooks/useBlockSize'; +import { useFormDataTemplates } from './Templates'; export const useFormBlockHeight = () => { const height = useDataBlockHeight(); @@ -35,7 +35,7 @@ export const useFormBlockHeight = () => { const actionBarHeight = hasFormActions || designable ? token.controlHeight + (isFormBlock ? 1 : 2) * token.marginLG : token.marginLG; const blockTitleHeaderHeight = title ? token.fontSizeLG * token.lineHeightLG + token.padding * 2 - 1 : 0; - const { data } = useDataBlockRequest() || {}; + const data = useDataBlockRequestData(); const { count, pageSize } = (data as any)?.meta || ({} as any); const hasPagination = count > pageSize; const paginationHeight = hasPagination ? token.controlHeightSM + 1 * token.paddingLG : 0; diff --git a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts index 5e16c0c24f..3b51b565a5 100644 --- a/packages/core/client/src/schema-component/antd/grid-card/hooks.ts +++ b/packages/core/client/src/schema-component/antd/grid-card/hooks.ts @@ -7,11 +7,11 @@ * For more information, please refer to: https://www.nocobase.com/agreement. */ -import { SpaceProps, theme } from 'antd'; import { useFieldSchema } from '@formily/react'; -import { useDataBlockHeight } from '../../hooks/useBlockSize'; +import { SpaceProps, theme } from 'antd'; import { useDesignable } from '../../'; -import { useDataBlockRequest } from '../../../data-source'; +import { useDataBlockRequestData } from '../../../data-source'; +import { useDataBlockHeight } from '../../hooks/useBlockSize'; const spaceProps: SpaceProps = { size: ['large', 'small'], @@ -30,7 +30,7 @@ export const useGridCardBodyHeight = () => { const height = useDataBlockHeight(); const schema = useFieldSchema(); const hasActions = Object.keys(schema.parent.properties.actionBar?.properties || {}).length > 0; - const { data } = useDataBlockRequest() || {}; + const data = useDataBlockRequestData(); const { count, pageSize } = (data as any)?.meta || ({} as any); const hasPagination = count > pageSize; if (!height) { diff --git a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx index 3cc0eee120..5105046878 100644 --- a/packages/core/client/src/schema-component/antd/table-v2/Table.tsx +++ b/packages/core/client/src/schema-component/antd/table-v2/Table.tsx @@ -31,6 +31,7 @@ import { useCollection, useCollectionParentRecordData, useDataBlockRequest, + useDataBlockRequestData, useFlag, useSchemaInitializerRender, useTableSelectorContext, @@ -295,8 +296,7 @@ const usePaginationProps = (pagination1, pagination2) => { const { t } = useTranslation(); const field: any = useField(); const { token } = useToken(); - const { data } = useDataBlockRequest() || ({} as any); - const { meta } = data || {}; + const { meta } = useDataBlockRequestData() || {}; const { hasNext } = meta || {}; const pagination = useMemo( () => ({ ...pagination1, ...pagination2 }), diff --git a/packages/core/client/src/schema-component/hooks/useBlockSize.ts b/packages/core/client/src/schema-component/hooks/useBlockSize.ts index cf66526cbb..c7046cf879 100644 --- a/packages/core/client/src/schema-component/hooks/useBlockSize.ts +++ b/packages/core/client/src/schema-component/hooks/useBlockSize.ts @@ -13,7 +13,7 @@ import { theme } from 'antd'; import { debounce } from 'lodash'; import { useCallback, useMemo, useRef, useState } from 'react'; import { useDesignable } from '..'; -import { useCollection, useDataBlockRequest } from '../../'; +import { useCollection, useDataBlockRequestData } from '../../'; import { getPageSchema, useBlockHeightProps } from '../../block-provider/hooks'; import { useTableBlockContext } from '../../block-provider/TableBlockProvider'; import { HeightMode } from '../../schema-settings/SchemaSettingsBlockHeightItem'; @@ -92,7 +92,7 @@ const useTableHeight = () => { const schema = useFieldSchema(); const heightProps = tableHeightProps || blockHeightProps; const pageFullScreenHeight = useFullScreenHeight(heightProps); - const { data } = useDataBlockRequest() ?? {}; + const data = useDataBlockRequestData(); const { name } = useCollection(); const { count, pageSize } = (data as any)?.meta || ({} as any); const hasPagination = count > pageSize; diff --git a/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts b/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts index 0cd62465e8..489924edd8 100644 --- a/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts +++ b/packages/core/client/src/schema-settings/VariableInput/hooks/useFormVariable.ts @@ -12,7 +12,7 @@ import { Schema } from '@formily/json-schema'; import { useTranslation } from 'react-i18next'; import { useFormBlockContext } from '../../../block-provider/FormBlockProvider'; import { CollectionFieldOptions_deprecated } from '../../../collection-manager'; -import { useDataBlockRequest } from '../../../data-source'; +import { useDataBlockRequestData } from '../../../data-source'; import { useFlag } from '../../../flag-provider/hooks/useFlag'; import { useBaseVariable } from './useBaseVariable'; @@ -63,11 +63,11 @@ export const useFormVariable = ({ collectionName, collectionField, schema, noDis }; const useCurrentFormData = () => { - const ctx: any = useDataBlockRequest(); - if (ctx?.data?.data?.length > 1) { + const data = useDataBlockRequestData(); + if (data?.data?.length > 1) { return; } - return ctx?.data?.data?.[0] || ctx?.data?.data; + return data?.data?.[0] || data?.data; }; /**