reactjs - 将 *all* styled-system 属性添加到 styled-component 对性能有何影响？

Question

当使用 styled-system 和 styled-components 时，加载比我可能使用的更多的 Prop 对性能有什么影响？

例如，这是我目前拥有的基本 Div 组件，但还有大量我未使用的其他 Prop -- 例如，fontSize 和 fontSizeProps 作为许多其他示例中的两个。

import React from 'react';
import { themed } from 'Utils/theme.helpers';
import styled from 'styled-components';
import {
 alignSelf,
 AlignSelfProps,
 height,
 HeightProps,
 maxHeight,
 MaxHeightProps,
 maxWidth,
 MaxWidthProps,
 minHeight,
 MinHeightProps,
 minWidth,
 MinWidthProps,
 order,
 OrderProps,
 overflow,
 OverflowProps,
 space,
 SpaceProps,
 width,
 WidthProps,
} from 'styled-system';

export type DivProps = React.PureComponent<JSX.IntrinsicElements['div']> &
 AlignSelfProps &
 OrderProps &
 OverflowProps &
 SpaceProps &
 WidthProps &
 MaxWidthProps &
 MinWidthProps &
 MaxHeightProps &
 HeightProps &
 MinHeightProps;

export const Div = styled.div<DivProps>(
    {
 boxSizing: 'border-box',
    },
 space,
 width,
 minWidth,
 maxWidth,
 height,
 minHeight,
 maxHeight,
 order,
 alignSelf,
 overflow,
 themed('container')
);

Answer 1

可以忽略不计。

1. 前 3 个空 div 是没有 Prop 的样式系统组件。
2. 彩色 div 来自您的 Div 示例，每个 1 个颜色 Prop 。
3. 最后一个样式化的 div 只是一个没有样式化系统的样式化组件。

我想您可以使用更复杂的组件将其扩展，但我认为渲染时间将以线性时间增长。