test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

perf: Improve Components render perfermance when it's not reponsive (#34122)

Browse Source 
* perf: Improve List render perfermance when grid is undefined

https://github.com/ant-design/ant-design/pull/34106/files#diff-9e016ea02fe7dd0ea42d8774d29d45e1a10b8dd108de9c89d50c828c74b993b8R146-R151

* chore: do not export useBreakpoint param

Co-authored-by: zombiej <smith3816@gmail.com>
This commit is contained in:
afc163 2022-02-21 16:48:39 +08:00 committed by GitHub
parent 246f90f03e
commit 07dec4cb00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/avatar/avatar.tsx
View File

@ -102,7 +102,10 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
const size = customSize === 'default' ? groupSize : customSize;
const screens = useBreakpoint();
const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some(key =>
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
);
const screens = useBreakpoint(needResponsive);
const responsiveSizeStyle: React.CSSProperties = React.useMemo(() => {
if (typeof size !== 'object') {
return {};

7
components/grid/index.tsx
View File

@ -1,6 +1,11 @@
import Row from './row';
import Col from './col';
import useBreakpoint from './hooks/useBreakpoint';
import useInternalBreakpoint from './hooks/useBreakpoint';
// Do not export params
function useBreakpoint() {
return useInternalBreakpoint();
}
export { RowProps } from './row';

5
components/list/index.tsx
View File

@ -213,7 +213,10 @@ function List<T>({
}
}
const screens = useBreakpoint();
const needResponsive = Object.keys(grid || {}).some(key =>
['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key),
);
const screens = useBreakpoint(needResponsive);
const currentBreakpoint = React.useMemo(() => {
for (let i = 0; i < responsiveArray.length; i += 1) {
const breakpoint: Breakpoint = responsiveArray[i];

5
components/pagination/Pagination.tsx
View File

@ -39,9 +39,10 @@ const Pagination: React.FC<PaginationProps> = ({
size,
locale: customLocale,
selectComponentClass,
responsive,
...restProps
}) => {
const { xs } = useBreakpoint();
const { xs } = useBreakpoint(responsive);
const { getPrefixCls, direction } = React.useContext(ConfigContext);
const prefixCls = getPrefixCls('pagination', customizePrefixCls);
@ -91,7 +92,7 @@ const Pagination: React.FC<PaginationProps> = ({
const renderPagination = (contextLocale: PaginationLocale) => {
const locale = { ...contextLocale, ...customLocale };
const isSmall = size === 'small' || !!(xs && !size && restProps.responsive);
const isSmall = size === 'small' || !!(xs && !size && responsive);
const selectPrefixCls = getPrefixCls('select', customizeSelectPrefixCls);
const extendedClassName = classNames(
{

8
components/steps/index.tsx
View File

@ -1,5 +1,4 @@
import * as React from 'react';
import omit from 'rc-util/lib/omit';
import RcSteps from 'rc-steps';
import type { ProgressDotRender } from 'rc-steps/lib/Steps';
import CheckOutlined from '@ant-design/icons/CheckOutlined';
@ -44,8 +43,8 @@ interface StepsType extends React.FC<StepsProps> {
}
const Steps: StepsType = props => {
const { percent, size, className, direction, responsive } = props;
const { xs } = useBreakpoint();
const { percent, size, className, direction, responsive, ...restProps } = props;
const { xs } = useBreakpoint(responsive);
const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext);
const getDirection = React.useCallback(
@ -98,7 +97,8 @@ const Steps: StepsType = props => {
return (
<RcSteps
icons={icons}
{...omit(props, ['percent', 'responsive'])}
{...restProps}
size={size}
direction={getDirection()}
stepIcon={stepIconRender}
prefixCls={prefixCls}