Style React -Komponenten: 7 Wege verglichen

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="https://www.php.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!