Стилизованный компонент против jss против эмоций для React

Я пытаюсь понять лучший выбор (как технический директор) между

  • jss
  • эмоция
  • стилизованный компонент.

Я постараюсь не делать вопрос «слишком широким» или «не по теме», потому что это очень субъективная тема. Я постараюсь ответить (здесь) на вопрос сам, если никто не ответит целиком, и задам очень закрытые вопросы:

  • Как все три из них могут "скомпилироваться" (внешний CSS, тег <style>, style= атрибуты)?
  • Как все три из них могут плавно интегрироваться с CRA (без особых настроек и без выброса)?
  • А как насчет точки зрения OpenSource (возраст, сообщество, плагины, поддержка)?
  • А что насчет производительности?

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


reactjs css emotion styled-components jss
person Cyril CHAPON    schedule 15.11.2018    source источник
comment
Я впервые слышу о jss и emotion. Стиль-компонент, похоже, набирает популярность.   -  person lomse    schedule 15.11.2018
comment
Для записи JSS был принят materialUI.   -  person theFreedomBanana    schedule 24.01.2020

Ответы (2)


arrow_upward
21
arrow_downward

Очень короткий ответ (в общем, это намного больше)

  1. Строки шаблона CSS

SC анализирует строки шаблона с помощью CSS во время выполнения. У Emotion есть плагин babel для подготовки этих проанализированных вещей в формате, который может быстрее рендерить окончательный CSS во время выполнения. JSS в настоящее время поддерживает только базовые строки шаблона и в других отношениях использует объекты (есть планы добавить лучшую поддержку для строки шаблона)

  1. Обновление правил стиля

SC и Emotion генерируют новые правила CSS при обновлении динамических стилей, JSS обновляет существующие правила (обратите внимание, что обновленные правила можно увидеть на вкладке стилей инструментов разработчика, но не в теге стиля): воспроизведение

  1. Зависимость от React

SC только реагирует. Emotion имеет синтаксис, который можно использовать без реакции (css ''). JSS имеет отдельные пакеты: jss (ядро, без реакции), react-jss (классы внедрения HOC), styled-jss (SC как API).

  1. Плагины

В настоящее время только JSS поддерживает плагины.

  1. Статическое извлечение

    В настоящее время только Emotion поддерживает полное статическое извлечение. JSS тоже работает над этим. Вы можете получить статическое извлечение с помощью JSS сегодня, если вы поместите стили в отдельные файлы (something.styles.js) и извлеките их с помощью плагина webpack (однако без динамических значений).

  2. Представление

http://necolas.github.io/react-native-web/benchmarks/ < / а>

  1. Все они генерируют настоящий CSS с помощью тега стиля.
person Oleg Isonen    schedule 16.11.2018
comment
AFAIK, если вы пишете библиотеку, тогда стилизованные компоненты должны быть указаны как peerDependencies, знаете ли вы, относится ли это также к styled-jss? - person Sagiv b.g; 20.03.2021

arrow_upward
0
arrow_downward

Как и в приведенном выше ответе, я тоже не слышал о jss и эмоциях. Вероятно, потому, что они не так распространены в сочетании с React. Я сам использовал обычный CSS, встроенные стили, модули CSS, а теперь и последние стилизованные компоненты.

Мне нравятся стилизованные компоненты, с ними легко работать. Так что ответ на (некоторые) ваши вопросы есть.

  1. См. Изображение. Вот как он компилируется со стилизованными компонентами. Создает уникальные классы.
  2. Не нужно извлекать. Просто импортируйте его из npm и используйте
  3. Думаю, он становится все более популярным и нравится сообществу. Всегда есть разные мнения, и многие не любят смешивать стили и JS-код в компонентах.
  4. На самом деле не проверял производительность, но вроде быстро. знак равно

введите здесь описание изображения

person weibenfalk    schedule 15.11.2018
comment
Просто хочу упомянуть, что в 1) имена классов можно сделать так, чтобы они выглядели намного лучше, используя babel-plugin для стилизованных компонентов, и вы даже можете использовать этот плагин, не выходя из cra, используя макросы babel. Просто включите вместо него styled-components / macro. - person Magnus Jeffs Tovslid; 14.12.2018