web-dev-qa-db-ja.com

Reactのスタイル付きコンポーネントvs jss vs感情

私は（CTOとして）最良の選択を理解しようとしています

  • jss
  • 感情
  • スタイル付きコンポーネント。

質問は非常に主観的なトピックなので、「広すぎる」または「オフトピック」の質問は作らないようにします。だれも全体に答えない場合、私は（ここに）質問に自分自身で答えようとします。非常に閉じた質問をします。

  • それらのうちの3つが「コンパイル」できる方法（外部css、<style> 鬼ごっこ、 style=属性）？
  • そのうちの3つは、CRAとスムーズに統合できます（調整しすぎず、イジェクトせずに）。
  • オープンソースのPOV（年齢、コミュニティ、プラグイン、バッキング）はどうですか？
  • パフォーマンスはどうですか？

この質問を閉じたくないので、コード形式の意見を望んでおらず、主観的なPOVは避けたいです。

cssreactjsstyled-componentsjssemotion
15
Cyril CHAPON

非常に短い答え（一般的にはもっと多くの答えがあります）

  1. CSSテンプレート文字列

SCは実行時にCSSを使用してテンプレート文字列を解析します。 Emotionには、解析されたものを実行時に最終的なCSSをより速くレンダリングできる形式で準備するためのバベルプラグインがあります。 JSSは現在 基本テンプレート文字列 のみをサポートし、それ以外の場合はオブジェクトを使用します（テンプレート文字列のサポートを追加する計画があります）

  1. スタイルルールの更新

SCとEmotionは、動的スタイルを更新すると新しいCSSルールを生成します。JSSは既存のルールを更新します（更新されたルールは、開発ツールの[スタイル]タブに表示されますが、スタイルタグには表示されません）： reproduction

  1. Reactへの依存

SCは反応のみです。 Emotionには、反応なしで使用できる構文があります（css``）。 JSSには、jss（コア、反応なし）、react-jss（HOCインジェクションクラス）、styled-jss（SCのようなAPI）という個別のパッケージがあります。

  1. プラグイン

現在、JSSのみがプラグインをサポートしています。

  1. 静的抽出

    現在、完全な静的抽出をサポートしているのはEmotionのみです。 JSSも取り組んでいます。スタイルを個別のファイル（something.styles.js）に入れ、webpackプラグインを使用してそれらを抽出する場合（ただし、動的な値はありません）、JSSを使用して静的抽出を取得できます。

  2. パフォーマンス

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

  1. それらはすべて、styleタグを使用して実際のCSSを生成します。
1
Oleg Isonen

上記の回答のように、私はjssや感情についても聞いたことがありません。おそらく、Reactとの組み合わせではそれほど一般的ではないためです。私は通常のCSS、インラインスタイル、CSSモジュール、そして最新のスタイルコンポーネントを使用しています。

簡単に操作できるスタイル付きコンポーネントが好きです。だからあなたの質問（のいくつか）に答えてください。

  1. 画像を参照してください。これは、スタイル付きコンポーネントを使用してコンパイルする方法です。ユニークなクラスを作成します。
  2. イジェクトする必要はありません。 npmからインポートして使用するだけです
  3. それがますます人気になり、コミュニティがそれを気に入っているようだと思います。常に異なる意見があり、コンポーネントにスタイル設定とJSコードを混在させたくない人もたくさんいます。
  4. 実際にはパフォーマンスを確認していませんが、高速のようです。 =）

enter image description here

0
weibenfalk