mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-24 15:38:45 +08:00
Merge pull request #28792 from zxc0328/config-provider-fix
fix: add memorization for ConfigProvider (#27617)
This commit is contained in:
二货机器人
GitHub
commit
aea8c34958
84
components/config-provider/__tests__/memo.test.js
Normal file
84
components/config-provider/__tests__/memo.test.js
Normal file
@ -0,0 +1,84 @@
|
||||
import React, { useState } from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import ConfigProvider from '..';
|
||||
import Tooltip from '../../tooltip';
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/27617
|
||||
describe('ConfigProvider', () => {
|
||||
const Child = ({ spy }) => {
|
||||
React.useEffect(() => spy());
|
||||
return <div />;
|
||||
};
|
||||
|
||||
const Sibling = ({ spy }) => (
|
||||
<Tooltip>
|
||||
<Child spy={spy} />
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
it('should not generate new context config when render', () => {
|
||||
const MemoedSibling = React.memo(Sibling);
|
||||
const spy = jest.fn();
|
||||
const App = () => {
|
||||
const [pageHeader, setPageHeader] = useState({ ghost: true });
|
||||
const [, forceRender] = React.useReducer(v => v + 1, 1);
|
||||
|
||||
return (
|
||||
<ConfigProvider pageHeader={pageHeader}>
|
||||
<button type="button" className="render" onClick={() => forceRender()}>
|
||||
Force Render
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="setState"
|
||||
onClick={() => setPageHeader({ ghost: false })}
|
||||
>
|
||||
Change Config
|
||||
</button>
|
||||
<MemoedSibling spy={spy} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
wrapper.find('.render').simulate('click');
|
||||
expect(spy.mock.calls.length).toEqual(1);
|
||||
|
||||
wrapper.find('.setState').simulate('click');
|
||||
expect(spy.mock.calls.length).toEqual(2);
|
||||
});
|
||||
|
||||
it('should not generate new context config in nested ConfigProvider when render', () => {
|
||||
const MemoedSibling = React.memo(Sibling);
|
||||
const spy = jest.fn();
|
||||
const App = () => {
|
||||
const [pageHeader, setPageHeader] = useState({ ghost: true });
|
||||
const [, forceRender] = React.useReducer(v => v + 1, 1);
|
||||
|
||||
return (
|
||||
<ConfigProvider pageHeader={pageHeader}>
|
||||
<ConfigProvider>
|
||||
<button type="button" className="render" onClick={() => forceRender()}>
|
||||
Force Render
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="setState"
|
||||
onClick={() => setPageHeader({ ghost: false })}
|
||||
>
|
||||
Change Config
|
||||
</button>
|
||||
<MemoedSibling spy={spy} />
|
||||
</ConfigProvider>
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const wrapper = mount(<App />);
|
||||
wrapper.find('.render').simulate('click');
|
||||
expect(spy.mock.calls.length).toEqual(1);
|
||||
|
||||
wrapper.find('.setState').simulate('click');
|
||||
expect(spy.mock.calls.length).toEqual(2);
|
||||
});
|
||||
});
|
||||
@ -36,13 +36,15 @@ export interface ConfigConsumerProps {
|
||||
};
|
||||
}
|
||||
|
||||
const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
|
||||
return suffixCls ? `ant-${suffixCls}` : 'ant';
|
||||
};
|
||||
|
||||
export const ConfigContext = React.createContext<ConfigConsumerProps>({
|
||||
// We provide a default function for Context without provider
|
||||
getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
|
||||
return suffixCls ? `ant-${suffixCls}` : 'ant';
|
||||
},
|
||||
getPrefixCls: defaultGetPrefixCls,
|
||||
|
||||
renderEmpty: defaultRenderEmpty,
|
||||
});
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
// TODO: remove this lint
|
||||
// SFC has specified a displayName, but not worked.
|
||||
/* eslint-disable react/display-name */
|
||||
import * as React from 'react';
|
||||
import { FormProvider as RcFormProvider } from 'rc-field-form';
|
||||
import { ValidateMessages } from 'rc-field-form/lib/interface';
|
||||
import useMemo from 'rc-util/lib/hooks/useMemo';
|
||||
import { RenderEmptyHandler } from './renderEmpty';
|
||||
import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
|
||||
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
||||
@ -68,6 +66,125 @@ export interface ConfigProviderProps {
|
||||
dropdownMatchSelectWidth?: boolean;
|
||||
}
|
||||
|
||||
interface ProviderChildrenProps extends ConfigProviderProps {
|
||||
parentContext: ConfigConsumerProps;
|
||||
legacyLocale: Locale;
|
||||
}
|
||||
|
||||
const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
|
||||
const {
|
||||
children,
|
||||
getTargetContainer,
|
||||
getPopupContainer,
|
||||
renderEmpty,
|
||||
csp,
|
||||
autoInsertSpaceInButton,
|
||||
form,
|
||||
input,
|
||||
locale,
|
||||
pageHeader,
|
||||
componentSize,
|
||||
direction,
|
||||
space,
|
||||
virtual,
|
||||
dropdownMatchSelectWidth,
|
||||
legacyLocale,
|
||||
parentContext,
|
||||
} = props;
|
||||
|
||||
const getPrefixCls = React.useCallback(
|
||||
(suffixCls: string, customizePrefixCls?: string) => {
|
||||
const { prefixCls } = props;
|
||||
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
|
||||
const mergedPrefixCls = prefixCls || parentContext.getPrefixCls('');
|
||||
|
||||
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
||||
},
|
||||
[parentContext.getPrefixCls],
|
||||
);
|
||||
|
||||
const config = {
|
||||
...parentContext,
|
||||
csp,
|
||||
autoInsertSpaceInButton,
|
||||
locale: locale || legacyLocale,
|
||||
direction,
|
||||
space,
|
||||
virtual,
|
||||
dropdownMatchSelectWidth,
|
||||
getPrefixCls,
|
||||
};
|
||||
if (getTargetContainer) {
|
||||
config.getTargetContainer = getTargetContainer;
|
||||
}
|
||||
|
||||
if (getPopupContainer) {
|
||||
config.getPopupContainer = getPopupContainer;
|
||||
}
|
||||
|
||||
if (renderEmpty) {
|
||||
config.renderEmpty = renderEmpty;
|
||||
}
|
||||
|
||||
if (pageHeader) {
|
||||
config.pageHeader = pageHeader;
|
||||
}
|
||||
|
||||
if (input) {
|
||||
config.input = input;
|
||||
}
|
||||
|
||||
if (form) {
|
||||
config.form = form;
|
||||
}
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/27617
|
||||
const memoedConfig = useMemo(
|
||||
() => config,
|
||||
config,
|
||||
(prevConfig: Record<string, any>, currentConfig) => {
|
||||
const prevKeys = Object.keys(prevConfig);
|
||||
const currentKeys = Object.keys(currentConfig);
|
||||
return (
|
||||
prevKeys.length !== currentKeys.length ||
|
||||
prevKeys.some(key => prevConfig[key] !== currentConfig[key])
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
let childNode = children;
|
||||
// Additional Form provider
|
||||
let validateMessages: ValidateMessages = {};
|
||||
|
||||
if (locale && locale.Form && locale.Form.defaultValidateMessages) {
|
||||
validateMessages = locale.Form.defaultValidateMessages;
|
||||
}
|
||||
if (form && form.validateMessages) {
|
||||
validateMessages = { ...validateMessages, ...form.validateMessages };
|
||||
}
|
||||
|
||||
if (Object.keys(validateMessages).length > 0) {
|
||||
childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
|
||||
}
|
||||
|
||||
const childrenWithLocale =
|
||||
locale === undefined ? (
|
||||
childNode
|
||||
) : (
|
||||
<LocaleProvider locale={locale} _ANT_MARK__={ANT_MARK}>
|
||||
{childNode}
|
||||
</LocaleProvider>
|
||||
);
|
||||
|
||||
return (
|
||||
<SizeContextProvider size={componentSize}>
|
||||
<ConfigContext.Provider value={memoedConfig}>{childrenWithLocale}</ConfigContext.Provider>
|
||||
</SizeContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
ConfigContext: typeof ConfigContext;
|
||||
} = props => {
|
||||
@ -82,110 +199,17 @@ const ConfigProvider: React.FC<ConfigProviderProps> & {
|
||||
}
|
||||
}, [props.direction]);
|
||||
|
||||
const getPrefixClsWrapper = (context: ConfigConsumerProps) => (
|
||||
suffixCls: string,
|
||||
customizePrefixCls?: string,
|
||||
) => {
|
||||
const { prefixCls } = props;
|
||||
|
||||
if (customizePrefixCls) return customizePrefixCls;
|
||||
|
||||
const mergedPrefixCls = prefixCls || context.getPrefixCls('');
|
||||
|
||||
return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls;
|
||||
};
|
||||
|
||||
const renderProvider = (context: ConfigConsumerProps, legacyLocale: Locale) => {
|
||||
const {
|
||||
children,
|
||||
getTargetContainer,
|
||||
getPopupContainer,
|
||||
renderEmpty,
|
||||
csp,
|
||||
autoInsertSpaceInButton,
|
||||
form,
|
||||
input,
|
||||
locale,
|
||||
pageHeader,
|
||||
componentSize,
|
||||
direction,
|
||||
space,
|
||||
virtual,
|
||||
dropdownMatchSelectWidth,
|
||||
} = props;
|
||||
|
||||
const config: ConfigConsumerProps = {
|
||||
...context,
|
||||
getPrefixCls: getPrefixClsWrapper(context),
|
||||
csp,
|
||||
autoInsertSpaceInButton,
|
||||
locale: locale || legacyLocale,
|
||||
direction,
|
||||
space,
|
||||
virtual,
|
||||
dropdownMatchSelectWidth,
|
||||
};
|
||||
|
||||
if (getTargetContainer) {
|
||||
config.getTargetContainer = getTargetContainer;
|
||||
}
|
||||
|
||||
if (getPopupContainer) {
|
||||
config.getPopupContainer = getPopupContainer;
|
||||
}
|
||||
|
||||
if (renderEmpty) {
|
||||
config.renderEmpty = renderEmpty;
|
||||
}
|
||||
|
||||
if (pageHeader) {
|
||||
config.pageHeader = pageHeader;
|
||||
}
|
||||
|
||||
if (input) {
|
||||
config.input = input;
|
||||
}
|
||||
|
||||
if (form) {
|
||||
config.form = form;
|
||||
}
|
||||
|
||||
let childNode = children;
|
||||
// Additional Form provider
|
||||
let validateMessages: ValidateMessages = {};
|
||||
|
||||
if (locale && locale.Form && locale.Form.defaultValidateMessages) {
|
||||
validateMessages = locale.Form.defaultValidateMessages;
|
||||
}
|
||||
if (form && form.validateMessages) {
|
||||
validateMessages = { ...validateMessages, ...form.validateMessages };
|
||||
}
|
||||
|
||||
if (Object.keys(validateMessages).length > 0) {
|
||||
childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
|
||||
}
|
||||
|
||||
const childrenWithLocale =
|
||||
locale === undefined ? (
|
||||
childNode
|
||||
) : (
|
||||
<LocaleProvider locale={locale || legacyLocale} _ANT_MARK__={ANT_MARK}>
|
||||
{childNode}
|
||||
</LocaleProvider>
|
||||
);
|
||||
|
||||
return (
|
||||
<SizeContextProvider size={componentSize}>
|
||||
<ConfigContext.Provider value={config}>{childrenWithLocale}</ConfigContext.Provider>
|
||||
</SizeContextProvider>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<LocaleReceiver>
|
||||
{(_, __, legacyLocale) => (
|
||||
<ConfigConsumer>
|
||||
{context => renderProvider(context, legacyLocale as Locale)}
|
||||
{context => (
|
||||
<ProviderChildren
|
||||
parentContext={context}
|
||||
legacyLocale={legacyLocale as Locale}
|
||||
{...props}
|
||||
/>
|
||||
)}
|
||||
</ConfigConsumer>
|
||||
)}
|
||||
</LocaleReceiver>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user