我什么时候使用 attrs 与直接通过样式组件传递道具？

Question

对于何时应该使用 attrs 构造函数在 styled-components 中传递 props，我有点困惑：

const Example = styled.div.attrs(props => ({
  style: {
    color: props.color
  }
}))``;

当我应该直接通过它们时：

const Example = styled.div`
    color: ${props => props.color}
`

我知道第一种方法是更改​​内联样式，第二种方法是生成一个类，但 我不确定这些差异的含义。

我在控制台中看到一个错误，提示 “为组件 styled.div 生成了超过 200 个类。考虑使用 attrs 方法，以及经常更改样式的样式对象。”

但同时它在文档中说 “经验法则是当您希望样式化组件的每个实例都具有该属性时使用 attrs，并在每个实例需要不同的属性时直接传递道具。”

为什么不一直使用其中一种方法呢？我应该什么时候使用它们，为什么？

Answer 1

（TL；DR 结尾）

问题是您正在阅读两个不同的用例，并假设它们解释的是同一件事。

样式化组件.attrs 方法用于将道具传递给样式化组件。当文档说您应该使用.attrs“当您希望样式化组件的每个实例都具有该属性时”时，它们的意思是这样的：

const CheckboxInput = styled.input.attrs({ type: "checkbox" })`
   margin: 10px;
`;

这意味着当你使用<CheckboxInput />时，它默认是一个复选框，不需要每次都定义prop type="checkbox"。 这是.attrs 方法的主要目的。

所以您明白，当您将style 添加到该组件的attrs 时，它与将style 作为道具传递给常规的非样式化组件完全相同。它只是将该样式添加为内联样式，跳过样式组件可能进行的任何优化。通常不推荐内联样式，因为它们总是作为单独的样式附加到该组件的每个版本。示例：

// items is some array with 100 elements
items.map(item => (
  <button style={{ background: 'blue' }} >{item.text}</button>
));

这将生成 100 个按钮，每个按钮都有自己的 background: blue 样式实例。

使用样式化组件，您可以这样做：

const button = styled.button`
   background: blue;
`;

无论您有多少按钮，这只会生成一次样式。 因为它实际上生成了一个 CSS 类。

不幸的是，生成 CSS 类并不是一个轻量级的操作，所以如果你正在做动画或做任何经常改变样式的事情，建议使用内联样式。

TL;DR：

• 对不经常更改的静态样式和动态样式使用样式化组件；
• 对频繁更改的样式（例如动画）使用内联样式（通过.attrs）。