React ist eines der beliebtesten Frontend-Frameworks für JavaScript. Im Gegensatz zu anderen Frameworks wie Angular ist es sehr unparteiisch. Daher liegt es an Ihnen zu entscheiden, wie Sie Ihren React-Code schreiben oder strukturieren möchten.

Dieser Artikel untersucht einige Praktiken, die Sie befolgen sollten, um die Leistung Ihrer React-Anwendung zu verbessern.

1. Funktionale Komponenten und Hooks anstelle von Klassen verwenden

In React ist das möglich Klassen- oder Funktionskomponenten mit Haken verwenden. Sie sollten jedoch häufiger funktionale Komponenten und Hooks verwenden, da sie im Vergleich zu Klassen zu prägnanterem und lesbarerem Code führen.

Betrachten Sie die folgende Klassenkomponente, die Daten von der NASA-API anzeigt.

Klasse NasaData erweitert React. Komponente {
 Konstruktor (Requisiten) {
 Super (Requisiten);
 this.state = {
 Daten: [],
 };
 }
 KomponenteDidMount() {
 bringen(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {





instagram viewer


 this.setState({
 Daten: json,
 });
 });
 }
 rendern() {
 const { data } = this.state;
 if (!data.length)
 Rückkehr (


 Daten werden abgerufen... 
{" "}



 );
 Rückkehr (
 <>
 Abrufen von Daten mithilfe der Klassenkomponente 
{" "}
 {data.map((Element) => (
{Artikel.Titel}

 ))}
 );
 }
}

Die gleiche Komponente kann mit Hooks geschrieben werden.

const NasaData = () => {
 const [data, setdata] = useState (null);
 useEffect(() => {
 bringen(" https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY")
 .then((res) => res.json())
 .then((json) => {
 setdata (json);
 });
 }, [Daten]);
 Rückkehr (
 <>
 Abrufen von Daten mithilfe der Klassenkomponente 
{" "}
 {data.map((Element) => (
{Artikel.Titel}

 ))}
 );
};

Obwohl der obige Codeblock dasselbe tut wie die Klassenkomponente, ist er weniger komplex, minimal und leicht verständlich, was zu einer besseren Entwicklererfahrung beiträgt.

2. Vermeiden Sie die Verwendung von Status (wenn möglich)

Der React-Status verfolgt die Daten, die bei Änderung die React-Komponente zum erneuten Rendern veranlassen. Vermeiden Sie beim Erstellen von React-Anwendungen die Verwendung von Status so weit wie möglich, denn je mehr Status Sie verwenden, desto mehr Daten müssen Sie in Ihrer App verfolgen.

Eine Möglichkeit, die Verwendung des Zustands zu minimieren, besteht darin, ihn nur bei Bedarf zu deklarieren. Wenn Sie beispielsweise Benutzerdaten von einer API abrufen, speichern Sie das gesamte Benutzerobjekt im Status, anstatt die einzelnen Eigenschaften zu speichern.

Anstatt dies zu tun:

const [Benutzername, SetBenutzername] = useState('')
const [Passwort, setpassword] = useState('')

Mach das:

const [user, setuser] = useState({})

Bei der Entscheidung für eine Projektstruktur Entscheiden Sie sich für eine komponentenzentrierte. Das bedeutet, alle Dateien zu einer Komponente in einem Ordner zu haben.

Wenn Sie eine erstellen Navigationsleiste Komponente, erstellen Sie einen Ordner namens Navigationsleiste enthält die Navigationsleiste Komponente selbst, das Stylesheet und andere JavaSript- und Asset-Dateien, die in der Komponente verwendet werden.

Ein einziger Ordner, der alle Dateien einer Komponente enthält, erleichtert die Wiederverwendung, Freigabe und Fehlerbehebung. Wenn Sie sehen möchten, wie eine Komponente funktioniert, müssen Sie nur einen einzigen Ordner öffnen.

4. Vermeiden Sie die Verwendung von Indizes als Key Props

React verwendet Schlüssel, um Elemente in einem Array eindeutig zu identifizieren. Mit Schlüsseln kann React feststellen, welches Element geändert, hinzugefügt oder aus dem Array entfernt wurde.

Meistens verwenden Sie beim Rendern von Arrays den Index als Schlüssel.

const Elemente = () => {
 const arr = ["Element1", "Element2", "Element3", "Element4", "Element5"];
 Rückkehr (
 <>
 {arr.map((Element, Index) => {
{Elem}
;
 })}
 );
};

Obwohl dies manchmal funktioniert, kann die Verwendung des Index als Schlüssel zu Problemen führen, insbesondere wenn die Liste voraussichtlich geändert wird. Betrachten Sie diese Liste.

const arr = ["Element1", "Element2", "Element3", "Element4", "Element5"];

Derzeit ist der erste Listeneintrag „Gegenstand 1“ befindet sich am Index Null, aber wenn Sie am Anfang der Liste ein weiteres Element hinzugefügt haben, wird „Gegenstand 1” Index würde sich auf 1 ändern, was das Verhalten Ihres Arrays ändert.

Die Lösung besteht darin, einen eindeutigen Wert als Index zu verwenden, um sicherzustellen, dass die Identität des Listenelements beibehalten wird.

5. Entscheiden Sie sich nach Möglichkeit für Fragmente anstelle von Divs

React-Komponenten müssen Code zurückgeben, der in einem einzigen Tag verpackt ist, normalerweise a oder ein Reaktionsfragment. Sie sollten sich nach Möglichkeit für Fragmente entscheiden.

Verwenden erhöht die DOM-Größe, insbesondere in großen Projekten, denn je mehr Tags oder DOM-Knoten Sie haben, desto mehr Speicher benötigt Ihre Website und desto mehr Leistung verbraucht ein Browser, um Ihre Website zu laden. Dies führt zu einer geringeren Seitengeschwindigkeit und möglicherweise zu einer schlechten Benutzererfahrung.

Ein Beispiel für die Beseitigung unnötiger tags verwendet sie nicht, wenn ein einzelnes Element zurückgegeben wird.

konstante Schaltfläche = () => {
 Rückkehr Anzeige;
};

6. Befolgen Sie Namenskonventionen

Sie sollten beim Benennen von Komponenten immer PascalCase verwenden, um sie von anderen JSX-Dateien zu unterscheiden, die keine Komponenten sind. Zum Beispiel: Textfeld, Navigationsmenü, und SuccessButton.

Verwenden Sie camelCase für Funktionen, die in React-Komponenten deklariert sind, wie z handleInput() oder showElement().

7. Vermeiden Sie sich wiederholenden Code

Wenn Sie bemerken, dass Sie doppelten Code schreiben, konvertieren Sie ihn in Komponenten, die wiederverwendet werden können.

Beispielsweise ist es sinnvoller, eine Komponente für Ihr Navigationsmenü zu erstellen, anstatt den Code wiederholt in jede Komponente zu schreiben, die ein Menü benötigt.

Das ist der Vorteil einer komponentenbasierten Architektur. Sie können Ihr Projekt in kleine Komponenten zerlegen, die Sie in Ihrer Anwendung wiederverwenden können.

8. Verwenden Sie die Objektdestrukturierung für Requisiten

Anstatt das Props-Objekt zu übergeben, verwenden Sie die Objektdestrukturierung, um den Prop-Namen zu übergeben. Dadurch entfällt die Notwendigkeit, jedes Mal auf das Props-Objekt zu verweisen, wenn Sie es verwenden müssen.

Das Folgende ist beispielsweise eine Komponente, die Requisiten unverändert verwendet.

const Button = (Requisiten) => {
 Rückkehr {props.text};
};

Bei der Objektdestrukturierung beziehen Sie sich direkt auf den Text.

const Button = ({text}) => {
 Rückkehr {Text};
};

9. Dynamisches Rendern von Arrays mit Map

Verwenden Karte() um wiederholte HTML-Blöcke dynamisch zu rendern. Sie können zum Beispiel verwenden Karte() um eine Liste von Elementen zu rendern Stichworte.

const Elemente = () => {
 const arr = ["Element1", "Element2", "Element3", "Element4", "Element5"];
 Rückkehr (
 <>
 {arr.map((Element, Index) => {
{Elem}
;
 })}
 );
 };

Zu Vergleichszwecken können Sie die Liste hier ohne rendern Karte(). Dieser Ansatz ist sehr repetitiv.

konstante Liste = () => {
 Rückkehr (


Gegenstand 1

Artikel2

Artikel3

Artikel4

Artikel5




 );
};

10. Schreiben Sie Tests für jede Reaktionskomponente

Schreiben Sie Tests für die von Ihnen erstellten Komponenten, da dies die Fehlermöglichkeiten reduziert. Durch Tests wird sichergestellt, dass sich die Komponenten wie erwartet verhalten. Eines der gängigsten Test-Frameworks für React ist Jest und bietet eine Umgebung, in der Sie Ihre Tests ausführen können.

Obwohl React in Bezug auf die Verwendung etwas flexibel ist, hilft Ihnen das Befolgen bestimmter Praktiken, das Beste aus Ihrer Erfahrung herauszuholen.

Wenn Sie diese Tipps befolgen, denken Sie an Ihr spezielles Projekt und Ihre Ziele; einige werden in bestimmten Fällen relevanter sein als andere.

So verwenden Sie APIs in React mit Fetch und Axios

Möchten Sie wissen, wie man APIs verwendet? Zu verstehen, wie APIs in React verwendet werden, ist ein Schlüsselelement der API-Nutzung.

Lesen Sie weiter

Über den Autor