Стилизованный компонент против JSS против эмоций для React - PullRequest
0 голосов
/ 15 ноября 2018

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

  • Jss
  • эмоции
  • стиль-компонент.

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

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

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

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

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

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

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

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

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

  1. Зависимость от реакции

СЦ реагирует только. Emotion имеет синтаксис, который можно использовать без реакции (css``). JSS имеет отдельные пакеты: jss (ядро, не реагирует), response-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 с помощью тега стиля.
0 голосов
/ 15 ноября 2018

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

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

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

enter image description here

...