Чем отличается стиль (компонент) и стиль (тэг) в вопросах производительности реакции?

Question

Я новичок в стилевых компонентах, и мне было интересно, что отличается стилем (компонентом) и стилем (тэгом) в вопросах производительности.

стилем (тэгом)

const StyledP = styled('p')``

export const StyledComponent = props => (
  <StyledP>{props.name}</StyledP>
)

в стиле (компонент)

const FunctionalComponent = props => (
  <p className={props.className}>{props.name}</p>
)

export const StyledComponent = styled(FunctionalComponent)`
`

Я посмотрел на этот комментарий и выяснил, использовал ли я styled(component).но я не знаю, в вопросах производительности реагировать.Может кто-нибудь объяснить, пожалуйста?

Answer 1

Это тот же API с несколькими дополнительными проверками на случай, если целью является компонент. Извлечено из styled конструктора исходного кода :

const isTargetStyledComp = isStyledComponent(target);

// fold the underlying StyledComponent attrs up (implicit extend)
const finalAttrs =
  // $FlowFixMe
  isTargetStyledComp && target.attrs
    ? Array.prototype.concat(target.attrs, attrs).filter(Boolean)
    : attrs;

// fold the underlying StyledComponent rules up (implicit extend)
const componentStyle = new ComponentStyle(
  isTargetStyledComp ? target.componentStyle.rules.concat(rules) : rules,
  finalAttrs,
  styledComponentId
);

// $FlowFixMe
WrappedStyledComponent.foldedComponentIds = isTargetStyledComp
  ? // $FlowFixMe
    Array.prototype.concat(target.foldedComponentIds, target.styledComponentId)
  : EMPTY_ARRAY;

WrappedStyledComponent.target = isTargetStyledComp ? target.target : target;

Подведем итог:

• Расширить атрибуты и правила базового стилизованного компонента с помощью правил производного стилизованного компонента.
• Хранить список componentIds, в случае вложенных styled(Component) расширений.
• Сохранить исходный целевой элемент (строку dom) в качестве цели для всех расширений.