Daripada Heist Strategy to React State: Cara data mengalir antara komponen

Apabila saya mula mengekod, saya cuba mengejar sintaksis, tetapi saya perlu memikirkan reka bentuk dan aliran data apabila projek saya berkembang. Mulakan sahaja pengekodan sesuatu yang tidak berfungsi lagi.

Untuk menjadikan masalah ini lebih khusus, mari kita bincangkan cara komponen React boleh menghantar data antara mereka. Mari berseronok dan bayangkan Apl React kami sebagai sekumpulan pencuri berpengalaman dari Ocean's Eleven (Saya harap anda sudah cukup umur untuk mengingati filem ini bersama Brad Pitt dan George Cloney muda). Watak utama, Danny Ocean, seorang pencuri yang baru dibebaskan bersyarat, mengumpulkan sepasukan sebelas penjenayah mahir untuk melakukan rompakan yang rumit. Sasaran mereka: merompak tiga kasino Las Vegas yang paling dilindungi—Bellagio, Mirage, dan MGMGrand—secara serentak, semuanya dimiliki oleh Terry Benedict yang kejam. Pasukan ini menghadapi liku-liku, panggilan rapat, dan gerakan bijak untuk melakukan salah satu rompakan paling berani dalam sejarah sinematik. Jadi, mari kita bayangkan bahawa komponen React adalah penjenayah yang perlu berkomunikasi secara rahsia.

PS: Saya tidak sempat menonton filem ini lagi, jadi saya membuat beberapa contoh daripada cuba mencari padanan tepat dalam plot.
PS2: Ok. Saya habis menonton separuh daripada filem itu kerana ia sangat bagus.

Mari kita mulakan

1. Berkongsi Data Menggunakan Panggilan Balik

Dalam React, panggil balik ialah cara biasa untuk berkongsi data antara komponen, khususnya daripada anak kepada komponen induknya. Corak ini membenarkan data mengalir ke atas dalam hierarki komponen.
Jadi, Rusty (Brad Pitt) pergi ke perlumbaan untuk mencari penipu yang telah bersara, Saul Bloom dan menyerahkan nota dengan jemputan untuk menyertai rompakan. Saul memutuskan untuk pergi selepas menerima nota.

// 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. Berkongsi Data Menggunakan Negeri

Namun, bagaimana jika maklumat perlu diberikan oleh semua anak kapal? Katakan rancangan strategi rompakan ialah keadaan kongsi. Komponen induk (seperti Danny Ocean) menguruskan rancangan; semua anak kapal memerlukan akses kepada maklumat ini. Mungkin mereka menggunakan beberapa dokumen Google yang diparolkan di mana Danny menyiarkan rancangan itu, dan ahli membacanya atau mengemas kininya.
Dalam React, keadaan digunakan untuk berkongsi dan mengurus data dalam dan antara komponen. Apabila keadaan dipindahkan kepada komponen induk yang sama, ia boleh bertindak sebagai satu sumber kebenaran untuk komponen anaknya, membolehkan perkongsian data yang mudah.

// 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. Berkongsi data menggunakan Acara Tersuai

Pelan sudah sedia, dan Ocean’s Eleven perlu menyemak kasino. Walau bagaimanapun, menghantar nota kertas terlalu perlahan di dalam bangunan dan menggunakan komputer riba adalah menyusahkan. Jadi mereka perlu membuat keputusan terlebih dahulu tentang tanda-tanda pasti. Sebagai contoh, Frank Catto, yang akan memainkan watak croupier yang didiskreditkan dalam rancangan itu, melihat cara Saul masuk dan mengetahui bahawa rompakan itu bermula.
Contoh ini menggambarkan peristiwa tersuai dalam React. Di sini, mereka tidak terbina dalam seperti JavaScript vanila. Walau bagaimanapun, anda masih boleh mencapai seni bina dipacu acara tersuai menggunakan alatan seperti kelas EventEmitter atau perpustakaan pihak ketiga seperti PubSub atau EventTarget. Dalam kehidupan sebenar, kami menggunakan corak ini, dan komponen yang perlu disambungkan tidak rapat, jadi penggerudian prop tidak masuk akal. Contohnya, jika kita perlu menunjukkan sepanduk jualan selepas modul ditutup.

Berikut ialah kod untuk metafora Ocean.

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. Berkongsi data menggunakan API Saluran Penyiaran

Dalam persediaan sebelumnya, ahli pasukan sekurang-kurangnya dapat melihat satu sama lain, tetapi bagaimana jika mereka berada di tempat yang berbeza dan tidak dapat berkomunikasi secara langsung? Satu-satunya penjimat ialah Broadcast Channel API.
API Saluran Penyiaran ialah penyelesaian asli penyemak imbas untuk berkongsi data antara tab penyemak imbas, tetingkap atau iframe daripada asal yang tepat. Ia bertindak sebagai saluran komunikasi untuk menyiarkan mesej ke semua konteks yang berkaitan.
Basher Tarr, pakar perobohan dan penggodam krew pada titik paling penting dalam filem, mematikan elektrik di kasino menggunakan peranti EMP (Electromagnetic Pulse). Kemudian semua orang tahu bahawa inilah masanya untuk memecah masuk ke bilik kebal.

// 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
fungsi LivingstonDell() {
  const sendSignal = (topik, mesej) => {
    eventBus.publish(topik, mesej);
  };

  kembali (
    <div>



<p>Saya akan berbesar hati menerima sebarang cadangan dan pembetulan daripada kolej kerana saya yakin terdapat banyak cara untuk memperhalusi artikel ini. <br>
Saya juga ingin membuat bahagian dua artikel ini yang menerangkan sambungan menggunakan iframes, integrasi-melalui-back-end-websocket, integrasi-melalui-back-end-long-polling, integrasi-melalui-storage (indeks db, contohnya ), penyepaduan-melalui-URL, penyepaduan-melalui-elemen-domestik-ketiga. Tetapi ia akan menjadi.</p>

<p>Terima kasih kerana membaca</p>


          </div>

            
        

Atas ialah kandungan terperinci Daripada Heist Strategy to React State: Cara data mengalir antara komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!