從搶劫策略到反應狀態：數據如何在組件之間流動

當我開始編碼時，我主要試圖趕上語法，但當我的專案成長時，我需要考慮設計和資料流。開始編寫一些不再起作用的程式碼。

為了讓這個問題更具體，讓我們來討論一下 React 元件如何在它們之間傳遞資料。讓我們玩得開心，把我們的React 應用想像成一群來自《十一羅漢》的經驗豐富的小偷（我希望你已經足夠大了，還記得年輕的布拉德·皮特和喬治·克魯尼主演的這部電影）。主角丹尼·奧森 (Danny Ocean) 是一位剛被假釋的小偷，他組建了一支由 11 名熟練罪犯組成的團隊來完成一場精心策劃的搶劫。他們的目標是：同時搶劫拉斯維加斯最受保護的三家賭場——貝拉吉歐(Bellagio)、幻影(Mirage) 和米高梅大賭場(MGMGrand)——這三家賭場均歸無情的特里·本尼迪克特(Terry Benedict) 所有。團隊面臨曲折、千鈞一髮和巧妙的策略，以完成電影史上最大膽的搶劫之一。所以，讓我們想像一下 React 元件是需要秘密通訊的罪犯。

PS：我沒有時間再看這部電影，所以我編了一些例子，而不是試圖在情節中尋找完全匹配。
PS2：好的。我看完了一半的電影，因為它太好了。

我們開始吧

1. 使用回調共享數據

在 React 中，回呼是元件之間共享資料的常見方法，特別是從子元件到父元件。這種模式允許資料在組件層次結構中向上流動。
於是，拉斯蒂（布萊德彼特飾）前往尋找退休騙子索爾布魯姆，並遞給他一張紙條，邀請他參與搶劫。索爾收到紙條後決定前往。

// 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. 使用狀態共享數據

但是，如果需要所有船員都提供資訊怎麼辦？假設搶劫策略的計劃是共享狀態。父組件（如 Danny Ocean）管理計劃；所有船員都需要存取此資訊。也許他們正在使用一些假釋的谷歌文檔，丹尼在其中發布了計劃，並且成員閱讀或更新了它。
在 React 中，狀態用於在元件內部和元件之間共用和管理資料。當狀態提升到公共父元件時，它可以充當其子元件的單一事實來源，從而實現輕鬆的資料共享。

// 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. 使用自訂事件共享數據

計畫已經準備好了，十一羅漢需要去賭場檢查一下。然而，在大樓內發送紙本票據速度太慢，使用筆記型電腦也不方便。因此他們需要提前決定某些跡象。例如，弗蘭克·卡托（Frank Catto）將在計劃中扮演一個名譽掃地的荷官，他看到索爾如何進來，就知道搶劫開始了。
此範例說明了 React 中的自訂事件。在這裡，它們不像普通 JavaScript 那樣是內建的。但是，您仍然可以使用 EventEmitter 類別等工具或 PubSub 或 EventTarget 等第三方程式庫來實作自訂事件驅動架構。在現實生活中，我們使用這種模式，並且需要連接的組件並不靠近，因此 props 鑽孔沒有意義。例如，如果我們需要在模組關閉後顯示促銷橫幅。

這是海洋隱喻的密碼。

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.使用Broadcast Channel API共享數據

在先前的設定中，團隊成員至少可以看到彼此，但如果他們位於不同的地方，無法直接溝通怎麼辦？唯一的保護者是 Broadcast Channel API。
Broadcast Channel API 是一種瀏覽器本機解決方案，用於在瀏覽器標籤、視窗或 iframe 之間共用來自確切來源的資料。它充當通訊通道，向所有連接的上下文廣播訊息。
巴舍爾·塔爾 (Basher Tarr) 是劇組的爆破專家和駭客，在電影中最關鍵的時刻，他使用 EMP 裝置（電磁脈衝）關閉了賭場的電源。然後每個人都知道是時候闖入金庫了。

// 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
函數利文斯頓戴爾() {
  const sendSignal = (主題, 訊息) => {
    eventBus.publish（主題，訊息）；
  };

  返回 （
    <div>



<p>我很高興收到大學的任何建議和更正，因為我很確定有很多方法可以改進這篇文章。 <br>
我還想創建本文的第二部分，解釋使用iframe、透過後端websocket 整合、透過後端長輪詢整合、透過儲存整合（例如索引資料庫）的連接)、透過URL 整合、透過第三個dom 元素集成。但一定會的。 </p>

<p>感謝您的閱讀</p>


          </div>

            
        

以上是從搶劫策略到反應狀態：數據如何在組件之間流動的詳細內容。更多資訊請關注PHP中文網其他相關文章！