eact-Tricks zur Verbesserung der Codequalität und -leistung

React ist eine leistungsstarke JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. Mit nur wenigen Tricks können Sie saubereren, effizienteren und wartbareren Code schreiben. In diesem Artikel untersuchen wir fünf wichtige React-Tricks, die Ihnen helfen, leistungsfähigeren und lesbareren Code zu schreiben.

---

1. Verwenden Sie ternäre Operatoren anstelle von AND-Operatoren (&&) zum Rendern von Elementen

In React ist es üblich, Komponenten oder Elemente basierend auf bestimmten Bedingungen bedingt zu rendern. Die Verwendung des &&-Operators für bedingtes Rendern kann jedoch schwierig sein, wenn der ausgewertete Ausdruck zu einem falschen Wert führt (z. B. falsch, null, undefiniert, 0 oder ''). Um unbeabsichtigtes Renderverhalten zu vermeiden, verwenden Sie lieber einen ternären Operator.

Beispiel für &&-Verhalten:

Verwenden von && beim bedingten Rendern:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

• Das erste Beispiel ({0 &&

  Hello world 5

  }) rendert 0 in der Benutzeroberfläche, da 0 in JavaScript ein falscher Wert ist und React dies als falsch interpretiert. Anstatt jedoch nichts zu rendern, rendert React den falschen Wert (0) selbst.

• Das zweite Beispiel ({0 ?

  Hello world 6

  : null}) rendert nichts. Da die Bedingung 0 ist (was falsch ist), wird der ternäre Operator als Null ausgewertet und React rendert nichts.

Besserer Ansatz mit ternärem Operator:

Anstatt sich auf den &&-Operator zu verlassen, können Sie einen ternären Operator verwenden, um sicherzustellen, dass Sie den richtigen Fallback-Inhalt rendern, insbesondere wenn die Bedingung falsch ist.

{0 ? <h1>Hello world 5</h1> : null}

Wenn die Bedingung in diesem Fall falsch (0) ist, rendert React null, was dazu führt, dass nichts gerendert wird, was ein vorhersehbareres und beabsichtigteres Verhalten ermöglicht.

---

2. Lazy Initializer mit useState

Der useState-Hook von React kann eine Funktion als Anfangswert annehmen, sodass Sie den Status langsam initialisieren können. Dies ist besonders nützlich, wenn die Berechnung des Anfangszustands teuer ist oder wenn es auf einer Berechnung ankommt, die nur einmal ausgeführt werden sollte.

Warum verzögerte Initialisierung verwenden?

• Leistungsverbesserung: Wenn der Anfangszustand teure Berechnungen oder das Abrufen von Daten erfordert, hilft die verzögerte Initialisierung dabei, diese Kosten aufzuschieben, bis sie tatsächlich benötigt werden.
• Vermeiden Sie unnötige Berechnungen:Die Funktion, die Sie als Anfangswert an useState übergeben, wird während der Komponentenmontage nur einmal ausgeführt und bei nachfolgenden Renderings nicht neu berechnet.

Beispiel:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

In diesem Beispiel:

• useState(() => Math.random()) ruft die Funktion nur einmal beim ersten Rendern auf.
• Dadurch wird sichergestellt, dass die Zufallszahlengenerierung nur einmal erfolgt, was die Leistung verbessert, wenn die Berechnung teuer war.

---

3. Verwenden Sie Lazy Load-Komponenten, um die Leistung zu verbessern

React.lazy() und Suspense von React sind großartige Tools zum verzögerten Laden von Komponenten, mit denen Sie Ihr JavaScript in kleinere Pakete aufteilen und diese nur bei Bedarf laden können. Dies verkürzt die anfängliche Ladezeit erheblich und verbessert die Leistung Ihrer App.

Beispiel:

{0 ? <h1>Hello world 5</h1> : null}

In diesem Beispiel:

• Mit React.lazy() können Sie LazyComponent dynamisch importieren.
• Die Suspense-Komponente wird verwendet, um einen Ladezustand anzuzeigen, bis die verzögert geladene Komponente vollständig gerendert ist.

Durch die Verwendung von Lazy Loading lädt Ihre App nur die Komponenten, die für das anfängliche Rendern erforderlich sind, und ruft andere bei Bedarf ab, wodurch die Leistung verbessert wird, insbesondere bei großen Anwendungen.

---

4. Verwendung optionaler Verkettung in JavaScript

Wenn Sie mit JavaScript arbeiten, ist die optionale Verkettung (?.) ein Lebensretter beim Zugriff auf tief verschachtelte Eigenschaften von Objekten. Es verhindert Fehler, die auftreten, wenn versucht wird, auf Eigenschaften von undefiniert oder null zuzugreifen. Die optionale Verkettung ist in modernem JavaScript verfügbar und ermöglicht Ihnen den sicheren Zugriff auf Eigenschaften, ohne manuell nach Null oder Undefiniert suchen zu müssen.

Beispiel:

import React, { useState } from 'react';

const ExpensiveComponent: React.FC = () => {
  const [count, setCount] = useState(() => {
    // Expensive computation
    console.log('Computing initial state');
    return Math.random(); // For example, generate a random number
  });

  return <div>Initial Random Value: {count}</div>;
};

export default ExpensiveComponent;

In diesem Beispiel:

• data?.info?.address greift sicher auf die Adresseneigenschaft zu, ohne einen Fehler auszulösen, wenn Daten oder Informationen undefiniert oder null sind.
• Das ?? Der Operator stellt einen Standardwert bereit, wenn die Adresse nicht definiert ist.

Ohne optionale Verkettung müssten Sie jede Ebene manuell überprüfen, was schnell zu unübersichtlichem und schwerer lesbarem Code führen kann. Durch die optionale Verkettung bleibt alles sauber und fehlerfrei.

---

5. Verwenden Sie useRef für Formulare, um erneute Renderings zu vermeiden

Wenn Sie in React mit Formularen arbeiten und die Komponente nicht bei jeder Eingabeänderung neu gerendert werden muss, ist es besser, useRef anstelle von useState zu verwenden. useRef speichert den Wert des Eingabefelds direkt und löst kein erneutes Rendern aus, wenn sich der Wert ändert, wodurch es bei großen Formularen leistungsfähiger wird.

Beispiel:

{0 && <h1>Hello world 5</h1>}
{0 ? <h1>Hello world 6</h1> : null}

In diesem TypeScript-Beispiel:

• useRef wird verwendet, um den Eingabewert zu verfolgen, ohne dass die Komponente bei jeder Eingabeänderung neu gerendert wird.
• nameRef.current wird verwendet, um beim Absenden des Formulars direkt auf den Eingabewert zuzugreifen.

Die Verwendung von useRef ist besonders nützlich, wenn der Formularwert keine erneuten Renderings zur Validierung oder dynamischen Aktualisierungen auslösen muss, was es zu einer hervorragenden Wahl für leistungsempfindliche Formulare macht.

---

Fazit

Durch die Anwendung dieser fünf React-Tricks in Ihrem Code können Sie Leistung, Lesbarkeit und Wartbarkeit erheblich verbessern. Hier ist eine kurze Zusammenfassung:

1. Verwenden Sie ternäre Operatoren für bedingtes Rendern anstelle von &&.
2. Nutzen Sie die verzögerte Initialisierung in useState.
3. Implementieren Sie Lazy Loading für Komponenten, um die anfänglichen Ladezeiten zu verbessern.
4. Verwenden Sie optionale Verkettung für einen sichereren Zugriff auf Eigenschaften in JavaScript.
5. Verwenden Sie useRef in Formularen, um unnötige erneute Renderings zu vermeiden.

Mit diesen Techniken werden Ihre React-Anwendungen effizienter und einfacher zu warten, was zu besseren Benutzererlebnissen und einer reibungsloseren Entwicklung führt. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt voneact-Tricks zur Verbesserung der Codequalität und -leistung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!