reagieren Komponenten mit mehreren Stilen und Best Practices

Die Auswahl der Methode des richtigen React -Komponentenstils ist nicht statisch, sondern h?ngt von den spezifischen Anwendungsfall, pers?nlichen Vorlieben und architektonischen Zielen ab. In diesem Artikel werden mehrere h?ufig verwendete React -Komponenten -Stilmethoden er?rtert, ihre Vor- und Nachteile analysiert und letztendlich die beste L?sung empfehlen.

Ziel:

• globaler Namespace
• Abh?ngigkeiten
• Wiederverwendbarkeit
• Skalierbarkeit
• Dead Code Elimination

Stilmethode:

• Inline CSS
• normales CSS
• CSS in der JS -Bibliothek
• CSS -Modul
• sass & scss
• weniger
• stilable

Inline CSS

• Abh?ngigkeiten: Keine
• Schwierigkeitsgrad: Einfach
• Bewertung: Worst

Inline CSS schreibt Stile direkt an HTML- oder JSX -Elemente. Obwohl es einfach zu implementieren, hat es eine schlechte Wiederverwendbarkeit und Skalierbarkeit.

Beispiel:

import React from "react";

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

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

normales CSS

• Abh?ngigkeiten: Keine
• Schwierigkeitsgrad: Einfach
• Evaluierung: immer noch ok

gew?hnliches CSS ist ein einfacher und unkomplizierter Ansatz, besser als Inline -CSS, bei dem Stile mit mehreren Seiten und Elementen multiplexiert werden k?nnen. In gro?en Projekten gibt es jedoch keinen einheitlichen Stilhandbuch, der zu Wartungsschwierigkeiten führen kann.

Beispiel:

/* 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="http://www.miracleart.cn/link/6b41fd33b36a1ce27fc0a3b8f9d8df4c"></a>Find me on Twitter>
  >
);

export default Footer;

CSS in JS

CSS in der JS -Technologie verwendet JavaScript, um CSS zu stylen, zu generieren und dem DOM hinzuzufügen. Es verfügt über Stilumfang und dynamische Stilfunktionalit?t, führt jedoch Abh?ngigkeiten ein.

JSS

• Abh?ngigkeiten: React-JSS
• Schwierigkeitsgrad: Einfach
• Bewertung: nicht schlecht

JSS erm?glicht es, Styles mit JavaScript deklarativ zu schreiben.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

Stil-Komponenten

• Abh?ngigkeiten: Stilkomponenten
• Schwierigkeitsgrad: Medium
• Bewertung: nicht schlecht

Stilkomponenten verwenden Tag-T-Template-Literale, um normale React-Komponenten zu stylen und zu erstellen.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

CSS -Modul

• Abh?ngigkeiten: CSS-Lader
• Schwierigkeitsgrad: Schwierigkeitsgrad (erfordert eine Laderkonfiguration)
• Bewertung: Good

Das CSS -Modul vermeidet globale Umfangsprobleme, indem sie eindeutige Klassennamen generiert, die Konfiguration ist jedoch relativ kompliziert.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

sass & scss

• Abh?ngigkeiten: Knotensass
• Schwierigkeitsgrad: Einfach
• Bewertung: Best

SASS ist ein leistungsstarker CSS -Pr?prozessor mit Merkmalen wie Variablen, verschachtelten Regeln und Mixins, wodurch die Wartbarkeit und Skalierbarkeit von Stilen verbessert wird.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

weniger

• Abh?ngigkeiten: Weniger, weniger Lader
• Schwierigkeitsgrad: Einfach
• Bewertung: Gut

weniger ?hnlich wie SASS, hat aber eine etwas andere Syntax.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

stilable

• Abh?ngigkeiten: Stilbar, @stilable/webpack-plugin
• Schwierigkeitsgrad: Schwierigkeit
• Bewertung: Good

Stylable ist auch ein Pr?prozessor, der Komponentenstile umfassen und Funktionen wie benutzerdefinierte Pseudoklassen verfügt.

Beispiel: (weggelassen, das ursprüngliche Beispiel ist l?nger)

übung und Vergleich

Der Autor probierte eine Vielzahl von Methoden aus und dachte schlie?lich, dass SCSS die beste Wahl sei.

Vorteile von SCSS:

• ?hnlich wie bei der CSS -Syntax ist es leicht zu lernen.
• unterstützt Funktionen wie Variablen, Verschachtelung, Mischung und Funktionen, um die Wartbarkeit und Wiederverwendbarkeit von Code zu verbessern.
• React App Create App -Unterstützung für die Box.

Beispiel für die Verwendung von SCSS: (weggelassen, das ursprüngliche Beispiel ist l?nger)

Zusammenfassung

Dieser Artikel vergleicht eine Vielzahl von React -Komponenten -Stilmethoden und empfiehlt SCSS als beste L?sung. Als CSS -Pr?prozessor bietet SCSS viele leistungsstarke Funktionen, die die Entwicklungseffizienz und die Codequalit?t erheblich verbessern k?nnen.

FAQ: (weggelassen, der ursprüngliche Text enth?lt detaillierte FAQ)

Das obige ist der detaillierte Inhalt vonStyle React -Komponenten: 7 Wege verglichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!