スタイル反応コンポーネント：比較される7つの方法

複数のスタイルとベストプラクティスを備えたコンポーネントを反応します

適切なReactコンポーネントスタイルのメソッドの選択は静的ではなく、特定のユースケース、個人の好み、およびアーキテクチャの目標に依存します。この記事では、いくつかの一般的に使用されるReactコンポーネントスタイルの方法について説明し、その利点と短所を分析し、最終的に最適なソリューションを推奨します。

ターゲット：

• グローバルネームスペース
• 依存関係
• 再利用可能性
• スケーラビリティ
• 死んだコード除去

スタイルメソッド：

• インラインcss
• 通常のcss
JSライブラリのCSS
• css
• CSSモジュール
• sass＆scss
• 少ない
• スタイル可能

インラインcss

• 依存関係：なし
• 難易度：シンプル
• レビュー：最悪

インラインCSSは、スタイルをHTMLまたはJSX要素に直接書き込みます。実装は簡単ですが、再利用性とスケーラビリティが低くなります。

例：

import React from "react";

const spanStyles = {
  color: "#fff",
  borderColor: "#00f"
};

const Button = props => (
   style={{
    color: "#fff",
    borderColor: "#00f"
  }}>
     style={spanStyles}>Button Name>
  >
);

通常のcss

• 依存関係：なし
• 難易度：シンプル
• 評価：それでもOK

通常のCSSは、複数のページと要素でスタイルを多重化できるインラインCSSよりも優れた、シンプルで簡単なアプローチです。しかし、大規模なプロジェクトでは、統一されたスタイルガイドはありません。これは、メンテナンスの困難につながる可能性があります。

例：

/* styles.css */

a:link {
  color: gray;
}
a:visited {
  color: green;
}
a:hover {
  color: rebeccapurple;
}
a:active {
  color: teal;
}

import React from "react";
import "styles.css";

const Footer = () => (
  >
    © 2020
    <a> href="https://www.php.cn/link/6b41fd33b36a1ce27fc0a3b8f9d8df4c"></a>Find me on Twitter>
  >
);

export default Footer;

css in js

JSテクノロジーのCSSは、JavaScriptを使用してスタイルを整え、CSSを生成し、DOMに追加します。スタイルの範囲と動的スタイルの機能を備えていますが、依存関係を導入します。

jss

依存関係：React-jss
難易度：シンプル
レビュー：悪いことではありません

JSSを使用すると、スタイルをJavaScriptを使用して宣言的に記述できます。

例：（省略、元の例は長い）

スタイルのコンポーネント

依存関係：スタイルコンポーネント
難易度：中
レビュー：悪いことではありません

スタイルのコンポーネントを使用して、タグテンプレートリテラルを使用して、通常の反応コンポーネントをスタイリングおよび作成します。

例：（省略、元の例は長い）

CSSモジュール

依存関係：css-roader
難易度：難易度（ローダーの構成が必要）
レビュー：Good

CSSモジュールは、一意のクラス名を生成することにより、グローバルスコープの問題を回避しますが、構成は比較的複雑です。

例：（省略、元の例は長い）

sass＆scss

依存関係：node-sass
難易度：シンプル
レビュー：Best

SASSは、変数、ネストされたルール、ミキシンなどの機能を備えた強力なCSSプリプロセッサであり、スタイルの保守性とスケーラビリティを改善します。

例：（省略、元の例は長い）

少ない

依存関係：LEST、LESS-ROADER
難易度：シンプル
評価：良い

はSASSに似ていますが、構文はわずかに異なります。

例：（省略、元の例は長い）

stylable

• 依存関係：stylable、 @stylable/webpack-plugin
• 難易度：難易度
• レビュー：Good

Stylableは、コンポーネントスタイルをスコープすることができ、カスタム擬似クラスなどの機能を備えたプリプロセッサでもあります。

例：（省略、元の例は長い）

練習と比較

著者はさまざまな方法を試し、最終的にSCSSが最良の選択であると考えました。

SCSSの利点：

CSS構文と同様に、簡単に学ぶことができます。
変数、ネスト、混合、機能などの関数をサポートして、コードの保守性と再利用性を向上させます。
CREATE REACTアプリは箱から出してサポートします。

要約

この記事では、さまざまなReactコンポーネントスタイルの方法を比較し、SCSを最適なソリューションとして推奨しています。 CSSプリプロセッサとして、SCSSは開発効率とコードの品質を大幅に改善できる多くの強力な機能を提供します。
FAQ ：（省略、元のテキストには詳細なFAQが含まれています）

以上がスタイル反応コンポーネント：比較される7つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。