De la stratégie de braquage à l'état de réaction : comment les données circulent entre les composants

Quand j'ai commencé à coder, j'essayais principalement de rattraper mon retard en syntaxe, mais j'avais besoin de penser à la conception et au flux de données lorsque mes projets grandissaient. Commencez simplement à coder quelque chose qui ne fonctionne plus.

Pour rendre ce problème plus spécifique, discutons de la manière dont les composants React peuvent transmettre des données entre eux. Amusons-nous un peu et imaginons notre application React comme un groupe de voleurs expérimentés d'Ocean's Eleven (j'espère que vous êtes assez vieux pour vous souvenir de ce film avec les jeunes Brad Pitt et George Cloney). Le personnage principal, Danny Ocean, un voleur récemment libéré sur parole, rassemble une équipe de onze criminels qualifiés pour réaliser un braquage élaboré. Leur objectif : voler simultanément trois des casinos les plus protégés de Las Vegas – Bellagio, Mirage et MGMGrand –, tous appartenant à l'impitoyable Terry Benedict. L'équipe fait face à des rebondissements, des incidents rapprochés et des manœuvres intelligentes pour réussir l'un des braquages ​​les plus audacieux de l'histoire du cinéma. Imaginons donc que les composants de React soient des criminels qui ont besoin de communiquer secrètement.

PS : je n'ai pas eu le temps de revoir ce film, alors j'ai inventé quelques exemples au lieu d'essayer de trouver des correspondances exactes dans l'intrigue.
PS2 : D’accord. J'ai fini de regarder la moitié du film parce qu'il est tellement bon.

Commençons

1. Partager des données à l'aide de rappels

Dans React, les rappels sont un moyen courant de partager des données entre composants, en particulier d'un enfant vers son composant parent. Ce modèle permet aux données de circuler vers le haut dans la hiérarchie des composants.
Ainsi, Rusty (Brad Pitt) part à la course pour retrouver un escroc à la retraite, Saul Bloom, et lui remet un mot l'invitant à participer à un braquage. Saul a décidé de partir après avoir reçu une note.

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

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

2. Partage de données à l'aide de l'état

Cependant, que se passe-t-il si des informations doivent être fournies par tous les membres de l'équipage ? Disons que le plan de la stratégie de braquage est l’État partagé. Le composant parent (comme Danny Ocean) gère le plan ; tous les membres de l'équipage doivent avoir accès à ces informations. Peut-être qu'ils utilisent un document Google en liberté conditionnelle dans lequel Danny a publié le plan et que les membres l'ont lu ou mis à jour.
Dans React, l'état est utilisé pour partager et gérer les données au sein et entre les composants. Lorsque l'État est élevé à un composant parent commun, il peut agir comme une source unique de vérité pour ses composants enfants, permettant un partage facile des données.

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

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

3. Partage de données à l'aide d'événements personnalisés

Le plan est prêt et Ocean’s Eleven doit vérifier le casino. Cependant, l’envoi de notes papier est trop lent à l’intérieur du bâtiment et l’utilisation d’un ordinateur portable n’est pas pratique. Ils doivent donc décider à l’avance de certains signes. Par exemple, Frank Catto, qui jouera un croupier discrédité dans le plan, voit comment Saul entre et sait que le braquage commence.
Cet exemple illustre des événements personnalisés dans React. Ici, ils ne sont pas intégrés comme le JavaScript Vanilla. Cependant, vous pouvez toujours réaliser une architecture personnalisée basée sur les événements à l'aide d'outils tels que la classe EventEmitter ou de bibliothèques tierces telles que PubSub ou EventTarget. Dans la vraie vie, nous utilisons ce modèle, et les composants qui doivent se connecter ne sont pas proches, donc le perçage d'accessoires n'a pas de sens. Par exemple, si nous devons afficher une bannière de vente après la fermeture du module.

Voici le code de la métaphore d’Océan.

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 id="Ocean-s-Eleven-Heist-Plan">? 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>
       <crewmember name="Rusty Ryan" plan="{plan}"></crewmember>
       <crewmember name="Linus Caldwell" plan="{plan}"></crewmember>
     </div>
   </div>
 );
}

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

4. Partage de données à l'aide de l'API Broadcast Channel

Dans la configuration précédente, les membres de l'équipe pouvaient au moins se voir, mais que se passerait-il s'ils se trouvaient à des endroits différents et ne pouvaient pas communiquer directement ? Le seul économiseur est l'API Broadcast Channel.
L'API Broadcast Channel est une solution native du navigateur permettant de partager des données entre les onglets, les fenêtres ou les iframes du navigateur à partir de l'origine exacte. Il agit comme un canal de communication pour diffuser des messages à tous les contextes connectés.
Basher Tarr, l'expert en démolition de l'équipe et hacker au moment le plus crucial du film, coupe l'électricité du casino à l'aide d'un appareil EMP (Electromagnétique Pulse). Alors tout le monde sait qu’il est temps de s’introduire dans le coffre-fort.

// 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 id="Saul-Bloom">?️ Saul Bloom</h2>
     <button onclick="{sendArrivalSignal}">Enter Casino</button>
   </div>
 );
}

// LivingstonDell.js
fonction LivingstonDell() {
  const sendSignal = (sujet, message) => {
    eventBus.publish(sujet, message);
  } ;

  retour (
    <div>



<p>Je serai heureux de recevoir toutes les suggestions et corrections des collèges car je suis presque sûr qu'il existe de nombreuses façons d'affiner cet article. <br>
Je souhaite également créer une deuxième partie de cet article expliquant les connexions utilisant les iframes, l'intégration via le back-end-websocket, l'intégration via le back-end-long-polling, l'intégration via les stockages (index db, par exemple ), intégration via une URL, intégration via un élément tiers dom. Mais ce sera le cas.</p>

<p>Merci d'avoir lu</p>


          </div>

            
        

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!