Когда я использую attrs против передачи реквизитов непосредственно с styled-компонентами?

Question

Я немного смущен тем, когда мне следует использовать конструктор attrs для передачи реквизитов в styleled-компонентах:

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

и когда мне просто нужно передать их напрямую:

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

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

Я видел ошибка в консоли: «Для компонента styleled.div создано более 200 классов. Попробуйте использовать метод attrs вместе с объектом стиля для часто изменяемых стилей."

Но в то же время в документах говорится: «1016 *« Практическое правило - использовать attrs, если вы хотите, чтобы каждый экземпляр компонента со стилем имел эту подпорку, и передавать пропы напрямую, когда каждому экземпляру нужен свой экземпляр ».

Почему бы просто не использовать один из этих методов все время? Когда я должен использовать каждый из них и почему?

Answer 1

(TL; DR в конце)

Проблема в том, что вы читаете о двух отдельных сценариях использования и предполагаете, что они объясняют одно и то же.

Стиль Компоненты .attrs метод предназначен для передачи реквизитов в стилизованный компонент . Когда в документах говорится, что вы должны использовать .attrs ", когда вы хотите, чтобы каждый экземпляр стилизованного компонента имел эту опору ", они означают что-то вроде этого:

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

Это означает, что что при использовании <CheckboxInput /> это будет флажок по умолчанию, нет необходимости каждый раз определять проп 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.

С помощью Styled Components вы сделаете следующее:

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

Это сгенерирует стиль только один раз, независимо от того, сколько у вас кнопок. Поскольку он на самом деле генерирует CSS класс .

К сожалению, генерация CSS классов не является легкой операцией, поэтому, например, если вы делаете анимацию или делаете что-то, что изменяет стиль часто рекомендуется вместо go со встроенными стилями.

TL; DR:

• Используйте стилизованные компоненты для стати c стилей и динамические c стили, которые меняются не очень часто;
• Используйте встроенные стили (до .attrs) для часто меняющихся стилей, например для анимации.