スタイルのコンポーネント:効率的にjsファイルでCSSを記述します.

4930 ワード
react javascript css テキストリンク
反応してWebアプリケーションを構築するだけでは、コンポーネントを一緒に構成し、ロジックが正しく動作することを確認することではありません.それは間違いなく最も重要な部分です.少なくとも、それは反応を使用する最大の理由です.しかし、建物の反応アプリはまた、それらのアプリのスタイルについてです.
我々は、Webアプリケーションが良いとスタイリングはまた、コンポーネントの構築の重要な一部であることを確認したい.
スタイリングされたコンポーネントは、スタイリングがそのコンポーネントにのみ適用されるプレスタイルのコンポーネントを提供するJavaScriptとCSSルールでタグ付けされたテンプレートリテラルを使用しているJSスタイリングライブラリのCSSです.

The button JavaScript変数とバックチックで定義されたスタイルは、プレーンなCSSスタイルです.また、簡潔なCSSスタイルでネストされたスタイルプロパティを見ることもできます.
これはスタイルのコンポーネントがJavaScriptでCSSをレンダリングする方法です.

コンポーネントの反応


スタイルに対応するコンポーネントには、2つの方法があります.

インラインスタイリング


const style = {
  color: 'blue',
};

function App() {
  return <div style={style}>Hello World!</div>;
}
インラインスタイリングは、他のCSS規則をオーバーライドする最も高い特異性値の1つを持っています.それが持続可能でスケーラブルでないので、この方法は非常に落胆します.

エクスターナルスタイリング


CSSを外部のcssファイルに使う伝統的な方法がありますclassName 支柱
return (
  <div className="red-text"> some text </span>
)
コンポーネントツリーが大きくなるにつれて、CSSファイルは大きく、不器用で複雑になり始める.これに対する1つの大きなもう一つの解決策は、Sassの使用です.SASSに役立ちますが、最終的に同じ問題をSSSファイルのプロジェクトのために必要なファイルを扱うことができます.
最後に、JSのCSSは、JavaScriptをスタイルコンポーネントに使用するテクニックです.このJavaScriptがブラウザによって解析されると、CSSはスタイル要素として生成され<head></head> HTMLドキュメントの.

スタイルコンポーネントを使用する理由

  • カスタムプレスタイルのコンポーネントを構築する自由があります.あなたはもはやJSファイルとCSSファイル間の切り替えを維持する必要はありませんが、1つの移動であなたのスタイルの反応コンポーネントを構築することができます.
    • const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

return (
  <div>
    <Button>Normal Button</Button>
  </div>
);
  • クラス名のバグはありません.スタイルコンポーネントは、スタイルの一意のクラス名を生成します.あなたは重複、重複やミススペルを心配する必要はありません.
  • Sassのパワーを使用してください.スタイルのコンポーネントを使用するときに簡単にネストのようなsassのような機能を使用することができます.
  • CSSの削除が簡単.クラス名があなたのコードベースのどこかで使われるかどうか知ることは難しいです.スタイルのすべてのビットは、特定のコンポーネントに関連付けられているようにスタイルのコンポーネントは、明らかになります.コンポーネントが未使用(ツールを検出することができます)と削除されると、すべてのスタイルが削除されます.
  • シンプルなダイナミックスタイリング.その小道具やグローバルなテーマに基づいて構成要素のスタイリングを適応簡単かつ直感的に手動でクラスの数十を管理することなく.
  • 自動ベンダーの事前固定.現在の標準にCSSを書き、スタイルのコンポーネントに残りを処理させます.
    あなたが知っていると愛、ちょうど個々のコンポーネントにバインドCSSを書いている間、これらの利点のすべてを得る.
  • 無痛のメンテナンス.あなたのコンポーネントに影響を与えるスタイリングを見つけるために別のファイル間で狩りをする必要はありませんので、メンテナンスはどのように大きなコードベースは、ケーキの一部です.
  • 自動臨界CSS.スタイルのコンポーネントは、コンポーネントがページ上でレンダリングされ、それらのスタイルと何も、完全に自動的に注入を追跡します.コード分割と組み合わせて、これはユーザーが必要なコードの最小量をロードすることを意味します.

    • それはあなたのパフォーマンスがかかりますか？


    ネイティブのCSSインラインスタイルを使用していない場合は、スタイリングに使用することを選択した任意のオープンソースライブラリといくつかのパフォーマンスのオーバーヘッドを持つ可能性が常にあります.しかし、あなたが得る小さいパフォーマンスオーバーヘッドは、あなたがスタイルの部品から得る力と柔軟性のために支払う価格です.
    良いことは、スタイルのコンポーネントは、すべての新しいリリースでライブラリのパフォーマンスを向上させるに焦点を当てていることです.それは良くなっています.

    結論


    スタイルのコンポーネントは、非常に奨励され、プロジェクトの長期的な生存性を証言GitHubで33000以上のメンバーと、急速に増加しているコミュニティを持っています.それはちょうど良くなっている.
    ハッピーコーディング!
    Linux環境redis-4.0.8インストールチュートリアル
    asp.Net sessionの失効時間を設定する多くの方法