javascript - 何时使用 attrs 与直接通过样式组件传递 props ？

Question

我对何时应该使用 attrs 构造函数在样式组件中传递 props 感到有点困惑:

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

当我应该直接传递它们时:

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

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

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

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

为什么不一直使用其中一种方法呢？我应该什么时候使用每一种以及为什么？

Answer 1

(TL；DR在最后)

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

样式组件 .attrs方法用于将 props 传递给样式化组件。当文档说你应该使用 .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；博士:

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