Von der Heist-Strategie zum Reaktionszustand: Wie Daten zwischen Komponenten fließen

Als ich mit dem Codieren begann, versuchte ich hauptsächlich, mit der Syntax Schritt zu halten, aber als meine Projekte wuchsen, musste ich über Design und Datenfluss nachdenken. Fangen Sie einfach an, etwas zu programmieren, das nicht mehr funktioniert.

Um dieses Problem konkreter zu machen, besprechen wir, wie React-Komponenten Daten zwischen ihnen weitergeben können. Lasst uns etwas Spaß haben und uns unsere React App als eine Gruppe erfahrener Diebe aus Ocean’s Eleven vorstellen (ich hoffe, ihr seid alt genug, um euch an diesen Film mit dem jungen Brad Pitt und George Cloney zu erinnern). Die Hauptfigur, Danny Ocean, ein kürzlich auf Bewährung entlassener Dieb, stellt ein Team aus elf erfahrenen Kriminellen zusammen, um einen aufwändigen Raubüberfall zu begehen. Ihr Ziel: gleichzeitig drei der am besten geschützten Casinos in Las Vegas auszurauben – Bellagio, Mirage und MGMGrand – alle im Besitz des skrupellosen Terry Benedict. Das Team muss sich Wendungen, knappen Entscheidungen und cleveren Manövern stellen, um einen der gewagtesten Raubüberfälle in der Filmgeschichte zu bewerkstelligen. Stellen wir uns also vor, dass React-Komponenten Kriminelle sind, die heimlich kommunizieren müssen.

PS: Ich hatte keine Zeit, diesen Film noch einmal anzusehen, also habe ich mir einige Beispiele ausgedacht, anstatt zu versuchen, genaue Übereinstimmungen in der Handlung zu finden.
PS2: Ok. Ich habe mir die Hälfte des Films zu Ende angesehen, weil er so gut ist.

Lasst uns beginnen

1. Datenaustausch mithilfe von Rückrufen

In React sind Rückrufe eine gängige Methode, um Daten zwischen Komponenten auszutauschen, insbesondere von einer untergeordneten zur übergeordneten Komponente. Dieses Muster ermöglicht den Datenfluss nach oben in der Komponentenhierarchie.
Also macht sich Rusty (Brad Pitt) auf die Suche nach einem pensionierten Betrüger, Saul Bloom, und überreicht ihm einen Zettel mit einer Einladung zur Teilnahme an einem Raubüberfall. Saul beschloss zu gehen, nachdem er eine Nachricht erhalten hatte.

// Danny (Parent Component)
const SaulBloom = () => {
   const [secretMessage, setSecretMessage] = useState("");
   // Callback to handle the message from Rusty
   const handleRustyMessage = (message) => {
     setSecretMessage(message);
   };
   return (
     <div>
       <h1>SaulBloom Secret Message: {secretMessage}</h1>
       <Rusty sendToDanny={handleRustyMessage} />
     </div>
   );
 };

  // Rusty (Child Component)
 const Rusty = ({ sendToDanny }) => {
   const sendSignal = () => {
     sendToSaul("All clear, move to the vault!"); // Sending secret signal
   };
    return (
     <div>
       <h2>Rusty: Sending Signal</h2>
       <button onClick={sendSignal}>Send Secret Message</button>
     </div>
   );
 };

2. Teilen von Daten mithilfe des Status

Was aber, wenn Informationen von allen Besatzungsmitgliedern bereitgestellt werden müssen? Nehmen wir an, der Plan der Heist-Strategie ist der Shared State. Die übergeordnete Komponente (wie Danny Ocean) verwaltet den Plan; Alle Besatzungsmitglieder benötigen Zugriff auf diese Informationen. Möglicherweise verwenden sie ein auf Bewährung freigegebenes Google-Dokument, in dem Danny den Plan gepostet hat und die Mitglieder ihn gelesen oder aktualisiert haben.
In React wird der Status verwendet, um Daten innerhalb und zwischen Komponenten zu teilen und zu verwalten. Wenn der Zustand zu einer gemeinsamen übergeordneten Komponente erhoben wird, kann er als einzige Quelle der Wahrheit für seine untergeordneten Komponenten fungieren und so einen einfachen Datenaustausch ermöglichen.

// Danny (Parent Component)
const SaulBloom = () => {
   const [secretMessage, setSecretMessage] = useState("");
   // Callback to handle the message from Rusty
   const handleRustyMessage = (message) => {
     setSecretMessage(message);
   };
   return (
     <div>
       <h1>SaulBloom Secret Message: {secretMessage}</h1>
       <Rusty sendToDanny={handleRustyMessage} />
     </div>
   );
 };

  // Rusty (Child Component)
 const Rusty = ({ sendToDanny }) => {
   const sendSignal = () => {
     sendToSaul("All clear, move to the vault!"); // Sending secret signal
   };
    return (
     <div>
       <h2>Rusty: Sending Signal</h2>
       <button onClick={sendSignal}>Send Secret Message</button>
     </div>
   );
 };

3. Teilen von Daten mithilfe benutzerdefinierter Ereignisse

Der Plan ist fertig und Ocean’s Eleven muss das Casino überprüfen. Allerdings ist das Versenden von Papiernotizen innerhalb des Gebäudes zu langsam und die Verwendung eines Laptops ist unpraktisch. Sie müssen sich also im Voraus über sichere Anzeichen entscheiden. Frank Catto zum Beispiel, der im Plan einen in Verruf geratenen Croupier spielen wird, sieht, wie Saul hereinkommt und weiß, dass der Überfall beginnt.
Dieses Beispiel veranschaulicht benutzerdefinierte Ereignisse in React. Hier sind sie nicht wie Vanilla-JavaScript integriert. Sie können jedoch immer noch eine benutzerdefinierte ereignisgesteuerte Architektur erreichen, indem Sie Tools wie die EventEmitter-Klasse oder Bibliotheken von Drittanbietern wie PubSub oder EventTarget verwenden. Im wirklichen Leben verwenden wir dieses Muster, und die Komponenten, die verbunden werden müssen, liegen nicht nahe beieinander, sodass das Bohren von Requisiten keinen Sinn ergibt. Zum Beispiel, wenn wir nach dem Schließen des Moduls ein Verkaufsbanner anzeigen müssen.

Hier ist der Code für Oceans Metapher.

function CrewMeeting() {
 const [plan, setPlan] = useState('Rob Bellagio at 11 PM');
 const updatePlan = () => {
   setPlan('Rob Bellagio and MGM Grand at 10 PM');
 };
 return (
   <div>
     <h1>? Ocean's Eleven Heist Plan</h1>
     <p>Current Plan: {plan}</p>
     <button onClick={updatePlan}>Update Plan</button>
     <div>
       <CrewMember name="Danny Ocean" plan={plan} />
       <CrewMember name="Rusty Ryan" plan={plan} />
       <CrewMember name="Linus Caldwell" plan={plan} />
     </div>
   </div>
 );
}

function CrewMember({ name, plan }) {
 return (
   <div >
     <h3>? {name}</h3>
     <p>? Plan: {plan}</p>
   </div>
 );
}

4. Teilen von Daten mithilfe der Broadcast Channel API

Im vorherigen Setup konnten sich die Teammitglieder zumindest sehen, aber was wäre, wenn sie sich an verschiedenen Orten befanden und nicht direkt kommunizieren könnten? Der einzige Sparer ist die Broadcast Channel API.
Die Broadcast Channel API ist eine browsernative Lösung zum Teilen von Daten zwischen Browser-Tabs, Fenstern oder Iframes vom genauen Ursprung. Es fungiert als Kommunikationskanal, um Nachrichten an alle verbundenen Kontexte zu senden.
Basher Tarr, der Abbruchexperte und Hacker der Crew, schaltet an der entscheidenden Stelle des Films den Strom im Casino mit einem EMP-Gerät (Elektromagnetischer Impuls) ab. Dann weiß jeder, dass es Zeit ist, in den Tresorraum einzubrechen.

// create eventBus.js
const eventBus = new EventTarget();
//event emitter component
function SaulBloom() {
 const sendArrivalSignal = () => {
   console.log('?️ Saul Bloom: Enters the casino as the wealthy foreigner.');
   // Emit the custom event 'heistStart'
   eventBus.dispatchEvent(new CustomEvent('heistStart', { detail: 'Saul has arrived' }));
 };
 return (
   <div >
     <h2>?️ Saul Bloom</h2>
     <button onClick={sendArrivalSignal}>Enter Casino</button>
   </div>
 );
}

// LivingstonDell.js
Funktion LivingstonDell() {
  const sendSignal = (Thema, Nachricht) => {
    eventBus.publish(topic, message);
  };

  zurückkehren (
    <div>



<p>Ich freue mich über alle Vorschläge und Korrekturen von Hochschulen, da ich mir ziemlich sicher bin, dass es viele Möglichkeiten gibt, diesen Artikel zu verfeinern. <br>
Ich möchte auch einen zweiten Teil dieses Artikels erstellen, in dem die Verbindungen mithilfe von Iframes, Integration-through-Back-End-Websocket, Integration-through-Back-End-Long-Polling, Integration-through-Storages (z. B. Index-Datenbank) erläutert werden ), Integration-durch-URL, Integration-durch-Third-Dom-Element. Aber es wird sein.</p>

<p>Danke fürs Lesen</p>


          

            
        

Das obige ist der detaillierte Inhalt vonVon der Heist-Strategie zum Reaktionszustand: Wie Daten zwischen Komponenten fließen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!