Andere State-Management-Strategie.

React Prop Drilling ist ein Drilling der Daten von der übergeordneten Komponente zur untergeordneten Komponente. Dabei werden die Daten übergeben, die in allen Ebenen zugänglich sein sollen.

Die Daten werden an die untergeordnete Komponente weitergeleitet, die Daten mithilfe verschiedener Protokolle entweder anzeigt oder abruft. Wir führen viel Caching durch, um ein erneutes Rendern der Reaktionskomponente zu vermeiden, aber wenn unsere Anwendung komplex und tief verschachtelt ist. Das erneute Rendern erfolgt immer dann, wenn die Requisiten aktualisiert werden.

Lassen Sie uns das Bohren mit Propellern verstehen, aber versuchen Sie es

Wenn Sie beispielsweise eine Komponentenhierarchie wie diese haben:

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

Wenn ParentComponent einige Daten hat, die TargetComponent benötigt, umfasst das Prop-Drilling die Weiterleitung dieser Daten von ParentComponent über IntermediateComponent1 und IntermediateComponent2, bevor sie schließlich TargetComponent erreichen. Jede Zwischenkomponente empfängt die Daten als Requisiten und gibt sie an die nächste Ebene weiter.

function App() {

  const [user, setUser] = useState({ name: "John Doe" });

return (

    


      

    


  );

}

function ParentComponent({ user }) {

  return (

    


      

    


  );

}

function Child({ user }) {

  return (

    


      

    


  );

}

function Grandchild({ user }) {

  return 
Hello, {user.name}!
;

}

Propellerbohrungen: Gut oder schlecht?

Die Antwort darauf ist kein einfaches Ja/Nein, sie hängt ganz von Ihrem Anwendungsfall ab. Es gibt verschiedene Faktoren wie Kontext und Umfang Ihrer Bewerbung.

• Kleine Projekte: Für kleinere Projekte, bei denen es sich hauptsächlich um einfache Websites wie Portfolios oder einfache Produktseiten handelt, ist die Verwendung von Propellerbohrungen in Ordnung. Es macht keinen Sinn, für solche Anwendungen das gesamte Statusverwaltungstool wie mobx oder Redux einzurichten.

• Das State Management hat das Projekt unnötig komplex gemacht, aber dies kann durch Propellerbohrungen leicht vermieden werden.

Verwendung von Propellerbohren in React.

1. *Datenfreigabe
   * Prop Drilling wird häufig verwendet, wenn eine tief verschachtelte untergeordnete Komponente Zugriff auf Daten oder Funktionen einer übergeordneten Komponente benötigt. Wenn beispielsweise eine übergeordnete Komponente den Status der Anwendung oder eine Funktion enthält, die den Status aktualisiert, und eine untergeordnete Komponente auf diesen Status zugreifen oder ihn ändern muss, ist Prop Drilling eine Möglichkeit, diese Daten oder Funktion zugänglich zu machen.

2. *Expliziter Datenfluss
   * Einer der Hauptvorteile des Propellerbohrens besteht darin, dass es einen klaren und eindeutigen Datenfluss innerhalb der Anwendung aufrechterhält. Indem Requisiten durch jede Komponente geleitet werden, ist immer klar, woher die Daten kommen und wie sie weitergegeben werden, was das Debuggen und das Verständnis des Codes vereinfachen kann.

3. *Einfachheit in kleinen Anwendungen
   * Bei kleineren Anwendungen oder wenn die Komponentenhierarchie relativ flach ist, ist das Propellerbohren eine unkomplizierte Lösung, die keine zusätzlichen Tools oder Bibliotheken erfordert. Es ermöglicht Entwicklern, den Status zu verwalten und Daten zu übergeben, ohne dass Komplexität entsteht.

Alternative zum Propellerbohren in React.

1. Kontext-API reagieren

• Was es ist: Eine integrierte Funktion in React, die es Ihnen ermöglicht, Daten im gesamten Komponentenbaum zu teilen, ohne Requisiten auf jeder Ebene manuell weitergeben zu müssen.

• Verwendungszweck: Geeignet zum Teilen globaler Daten wie Themen, Benutzerauthentifizierungsstatus oder Gebietsschemaeinstellungen.

• Sie können die Kontext-API verwenden, um zu vermeiden, dass Requisiten jede Ebene des Komponentenbaums durchlaufen. Mit dem Kontext können Sie einen globalen Status erstellen, auf den jede Komponente zugreifen kann, ohne dass Requisiten manuell durch jede Ebene geleitet werden müssen.

Vorteile:

• Reduziert die Notwendigkeit von Propellerbohrungen.

• Vereinfacht den Datenaustausch über mehrere Komponenten hinweg.

Nachteile:

• Kann versteckte Abhängigkeiten einführen, wodurch Komponenten weniger wiederverwendbar werden.

• Übermäßiger Gebrauch kann das Debuggen komplexer machen.

2. Zustandsverwaltungsbibliotheken (z. B. Redux, MobX)

• Was sie sind: Externe Bibliotheken, die eine strukturierte Möglichkeit zum Verwalten und Teilen des Anwendungsstatus bieten.

• Wann zu verwenden: Ideal für große Anwendungen, bei denen die Zustandsverwaltung komplex ist und eine vorhersehbare Struktur erfordert.

Vorteile:

• Zentralisiert die staatliche Verwaltung.

• Erleichtert das Debuggen und Testen.

• Unterstützt Zeitreise-Debugging und andere erweiterte Funktionen.

Nachteile:

• Fügt zusätzliche Komplexität und Lernkurve hinzu.

• Kann für einfache Anwendungen übertrieben sein.

3. Benutzerdefinierte Haken

• Was sie sind: Wiederverwendbare Funktionen in React, die zustandsbehaftete Logik kapseln, sodass Sie Logik problemlos zwischen Komponenten teilen können.

• Wann zu verwenden: Nützlich zum Teilen von Logik und zustandsbehaftetem Verhalten ohne Prop-Drilling.

Vorteile:

• Fördert die Wiederverwendung und Sauberkeit des Codes.

• Hält die Komponenten prägnant und fokussiert.

Nachteile:

• Möglicherweise nicht für alle Datenfreigabeszenarien geeignet.

• Erfordert Kenntnisse der React Hooks API.

4. Zusammensetzung und Komponenten höherer Ordnung

• Was sie sind: Muster, mit denen Sie Komponenten verbessern können, indem Sie sie mit zusätzlicher Funktionalität versehen.

• Wann zu verwenden: Nützlich zum Einfügen von Requisiten und Verhalten in Komponenten, ohne deren Struktur zu ändern.

Vorteile:

• Fördert wiederverwendbaren und zusammensetzbaren Code.

• Kann einige Fälle von Propellerbohrungen vermeiden.

Nachteile:

• Kann den Komponentenbaum komplexer machen.

• Der Datenfluss kann im Vergleich zur expliziten Übergabe von Requisiten schwieriger zu verfolgen sein.

Nachteile von Requisiten Bohren in React

1. Code-Lesbarkeit: Das Bohren von Requisiten kann das Verständnis von Komponenten erschweren, da Sie die Requisite durch mehrere Ebenen des Komponentenbaums verfolgen müssen.

2. Wartung: Wenn Ihre Anwendung wächst, wird die Verwaltung und Umgestaltung dieses Codes schwieriger. Das Ändern der Requisitenstruktur kann umständlich werden, wenn viele Komponenten beteiligt sind.

3. Leistung: Unnötige erneute Renderings können auftreten, wenn sich Requisiten auf einer höheren Ebene ändern und über mehrere Ebenen weitergegeben werden, selbst wenn nur die tief verschachtelte Komponente die Daten benötigt.

4. Skalierbarkeitsprobleme: Wenn Anwendungen wachsen und Komponentenbäume tiefer werden, kann das Bohren von Propellern umständlich und schwierig zu verwalten sein. Dies kann zu ausführlichem Code führen und die Wartung erschweren.

5. Redundante Requisiten: Zwischenkomponenten sind gezwungen, Requisiten zu empfangen und weiterzugeben, die sie nicht verwenden, was zu unnötiger Kopplung und potenzieller Verwirrung führt.

6. Wartungsschwierigkeit: Das Aktualisieren oder Refactoring von Komponenten kann fehleranfällig werden, da Änderungen in der Datenstruktur möglicherweise Aktualisierungen über mehrere Komponentenebenen hinweg erfordern.

Letzte Gedanken

Hoffentlich verstehen Sie das Prop Drilling in React, eine Technik zum Weiterleiten von Daten durch mehrere Ebenen von Komponenten. Während das Bohren von Stützen bei kleinen Anwendungen mit einfachen Komponentenstrukturen gut funktioniert, kann es mit zunehmenden Anwendungen umständlich und schwierig zu verwalten sein.

Zu den Herausforderungen gehören eine verminderte Lesbarkeit des Codes, Wartungsschwierigkeiten und Leistungsprobleme aufgrund unnötiger erneuter Renderings. Um diese Einschränkungen zu überwinden, werden Alternativen wie die React Context API, Zustandsverwaltungsbibliotheken (z. B. Redux, MobX) und benutzerdefinierte Hooks vorgeschlagen, die jedoch ihre eigene Komplexität mit sich bringen.

Im Wesentlichen ist das Bohren von Propellern zwar in bestimmten Szenarien nützlich, es ist jedoch wichtig, skalierbarere Lösungen in Betracht zu ziehen, wenn Ihr Projekt wächst.

Über den Autor

Apoorv ist ein erfahrener Softwareentwickler. Sie können sich über **soziale Netzwerke verbinden.
Abonnieren Sie den Newsletter von Apoorv für die neuesten kuratierten Inhalte.