styled(component) 和 styled(tagname) 在 react 的性能问题上有什么不同？

Question

我是 styled-components 的新手，我想知道 styled(component) 和 styled(tagname) 在 react 的性能问题上有什么不同。

样式化（标记名）

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)`
`

我看了这个comment 并发现我是否使用 styled(component)。但我不知道反应的性能问题。有人可以解释一下吗？

Answer 1

它与 API 相同，只是在目标是组件的情况下进行了一些额外的检查。从 styled 构造函数中提取 source code :

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 字符串）作为所有扩展的目标。

styled(component) 和 styled(tagname) 在 react 的性能问题上有什么不同？

What is different styled(component) and styled(tagname) in performance issues of react?

reactjs

styled-components

样式化（标记名）

样式化（组件）