Schreiben Sie React-Komponenten wie ein Profi: Eine Blaupause für Anfänger

Schreiben Sie eine React-Komponente wie ein Profi: Ein Anfängerleitfaden von Zero to Hero

---

Einführung

React ist eine der beliebtesten JavaScript-Bibliotheken zum Erstellen von Benutzeroberflächen. Unabhängig davon, ob Sie Anfänger oder erfahrener Entwickler sind, ist die Beherrschung der Kunst des Erstellens und Verbesserns von Komponenten der Schlüssel zum Erstellen skalierbarer Anwendungen. In diesem Leitfaden behandeln wir alles, was Sie über das Schreiben von React-Komponenten, deren Erweiterung mit Higher-Order Components (HOCs), die Verwendung von Hooks zum Abrufen von Daten und die Kontrolle von Nebenwirkungen wissen müssen. Am Ende sind Sie in der Lage, React-Anwendungen wie ein Profi zu erstellen und zu strukturieren.

---

Was ist eine Reaktionskomponente?

Eine React-Komponente ist im Wesentlichen eine JavaScript-Funktion oder -Klasse, die UI-Elemente mithilfe von JSX (einer Syntaxerweiterung von JavaScript) ausgibt. Mit Komponenten können Sie die Benutzeroberfläche in unabhängige, wiederverwendbare Teile aufteilen.

Hier ist ein Beispiel einer einfachen Funktionskomponente:

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

Warum Komponenten wichtig sind: Komponenten sind die Bausteine ​​jeder React-Anwendung. Sie helfen dabei, komplexe Benutzeroberflächen in kleinere, überschaubare Teile zu zerlegen.

---

Verbessern von Komponenten mit Komponenten höherer Ordnung (HOCs)

Was sind HOCs?

Eine Komponente höherer Ordnung ist eine Funktion, die eine Komponente übernimmt und eine neue erweiterte Komponente zurückgibt. HOCs werden verwendet, um Logik über mehrere Komponenten hinweg wiederzuverwenden.

Hier ist ein Beispiel für ein HOC, das Protokollierungsfunktionen hinzufügt:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

In diesem Beispiel umschließt das withLogging HOC die WelcomeMessage-Komponente und protokolliert die Requisiten jedes Mal, wenn die Komponente gerendert wird. Dadurch können Sie bestehende Komponenten mit zusätzlichen Funktionen wie Protokollierung, Authentifizierungsprüfungen usw. erweitern, ohne die ursprüngliche Komponente zu ändern.

---

Daten mit Hooks abrufen

Mit den integrierten Hooks von React können Sie Funktionskomponenten Status- und Lebenszyklusfunktionen hinzufügen. Einer der wichtigsten Hooks zum Abrufen von Daten ist useEffect.

Beispiel zum Abrufen von Daten:

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

Das passiert:

• useState verwaltet den Ladezustand und die abgerufenen Daten.
• useEffect wird verwendet, um Daten abzurufen, wenn die Komponente zum ersten Mal gerendert wird.
• Die Komponente gibt einen Ladezustand oder die abgerufenen Daten bedingt wieder.

Warum Hooks wichtig sind: Hooks wie useState und useEffect machen die Verwaltung von Status und Nebenwirkungen (wie das Abrufen von Daten) viel einfacher, insbesondere in Funktionskomponenten.

---

Nebenwirkungen mit useEffect kontrollieren

Der useEffect-Hook von React ist entscheidend für die Handhabung von Nebenwirkungen wie API-Aufrufen, Timern oder manuellen DOM-Manipulationen.

Effekte ohne Reinigung:

Nicht alle Effekte erfordern eine Bereinigung. Das Abrufen von Daten beim Mounten einer Komponente erfordert beispielsweise keine Bereinigung. Sie können useEffect für diese Art von Vorgängen verwenden.

import React from 'react';

function WelcomeMessage() {
  return <h1>Welcome to React</h1>;
}

export default WelcomeMessage;

Das leere Array ([]) stellt sicher, dass dieser Effekt nur einmal ausgeführt wird, und imitiert das Verhalten von ComponentDidMount.

Auswirkungen bei der Bereinigung:

Bestimmte Nebeneffekte wie das Einrichten eines Abonnements oder eines Timers erfordern eine Bereinigung, wenn die Komponente nicht bereitgestellt wird, um Speicherverluste zu vermeiden.

Beispiel:

function withLogging(WrappedComponent) {
  return function EnhancedComponent(props) {
    console.log('Component is rendering with props:', props);
    return <WrappedComponent {...props} />;
  };
}

// Usage
const WelcomeWithLogging = withLogging(WelcomeMessage);

In diesem Beispiel richten wir einen Timer in useEffect ein und geben eine Bereinigungsfunktion zurück, um das Intervall zu löschen, wenn die Komponente nicht gemountet wird.

Warum die Bereinigung wichtig ist: Ohne Bereinigung könnten Effekte wie Abonnements oder Intervalle auch dann weiter ausgeführt werden, wenn die Komponente nicht mehr vorhanden ist, was zu Leistungsproblemen führen kann.

---

Zusammenbau der App

Nachdem wir nun die Bausteine ​​gesehen haben, bauen wir eine kleine App zusammen, die Daten abruft, Komponenten-Renderings protokolliert und die Daten anzeigt.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default DataFetcher;

In diesem Beispiel:

• DataFetcher ruft Daten von einer API ab und zeigt sie an.
• Das withLogging HOC umschließt DataFetcher, um seinen Renderzyklus zu protokollieren.
• Die App-Komponente fügt alles zusammen und zeigt einen Header und die von DataFetcher abgerufenen Daten an.

---

FAQs

Was ist JSX?

JSX ist eine Syntaxerweiterung für JavaScript, die HTML ähnelt. Es ermöglicht Ihnen, UI-Elemente in JavaScript zu schreiben.

Warum useEffect verwenden?

Mit useEffect können Sie Nebenwirkungen wie das Abrufen von Daten oder das Bearbeiten des DOM in einer Funktionskomponente bewältigen.

Was sind Komponenten höherer Ordnung (HOCs)?

HOCs sind Funktionen, die eine Komponente übernehmen und eine erweiterte Komponente zurückgeben, sodass Sie die Komponentenlogik wiederverwenden können.

---

Abschluss

In diesem Leitfaden haben wir alles behandelt, was Sie brauchen, um beim Schreiben von React-Komponenten vom Nullpunkt zum Helden zu werden. Vom Verständnis grundlegender Komponenten über deren Erweiterung mit Komponenten höherer Ordnung bis hin zum Umgang mit Nebenwirkungen mit useEffect verfügen Sie jetzt über eine solide Grundlage zum Erstellen skalierbarer und wiederverwendbarer Komponenten. Mit etwas Übung beherrschen Sie diese Konzepte und sind in der Lage, mit fortgeschritteneren React-Anwendungen umzugehen. Codieren Sie weiter!

Das obige ist der detaillierte Inhalt vonSchreiben Sie React-Komponenten wie ein Profi: Eine Blaupause für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!