perf(useDataBlockRequest): prevent unnecessary re-renders

This commit is contained in:
Zeke Zhang 2024-11-03 13:27:15 +08:00
parent 583ab0b54b
commit 63c6206192
6 changed files with 24 additions and 22 deletions

View File

@ -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<Field>();
@ -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,

View File

@ -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;

View File

@ -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) {

View File

@ -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 }),

View File

@ -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;

View File

@ -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;
};
/**