當我開始編碼時，我主要試圖趕上語法，但當我的專案成長時，我需要考慮設計和資料流。開始編寫一些不再起作用的程式碼。
為了讓這個問題更具體，讓我們來討論一下 React 元件如何在它們之間傳遞資料。讓我們玩得開心，把我們的React 應用想像成一群來自《十一羅漢》的經驗豐富的小偷（我希望你已經足夠大了，還記得年輕的布拉德·皮特和喬治·克魯尼主演的這部電影）。主角丹尼·奧森 (Danny Ocean) 是一位剛被假釋的小偷，他組建了一支由 11 名熟練罪犯組成的團隊來完成一場精心策劃的搶劫。他們的目標是：同時搶劫拉斯維加斯最受保護的三家賭場——貝拉吉歐(Bellagio)、幻影(Mirage) 和米高梅大賭場(MGMGrand)——這三家賭場均歸無情的特里·本尼迪克特(Terry Benedict) 所有。團隊面臨曲折、千鈞一髮和巧妙的策略，以完成電影史上最大膽的搶劫之一。所以，讓我們想像一下 React 元件是需要秘密通訊的罪犯。
PS：我沒有時間再看這部電影，所以我編了一些例子，而不是試圖在情節中尋找完全匹配。
PS2：好的。我看完了一半的電影，因為它太好了。
我們開始吧
在 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>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>
);
};
但是，如果需要所有船員都提供資訊怎麼辦？假設搶劫策略的計劃是共享狀態。父組件（如 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>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>
);
};
計畫已經準備好了，十一羅漢需要去賭場檢查一下。然而，在大樓內發送紙本票據速度太慢，使用筆記型電腦也不方便。因此他們需要提前決定某些跡象。例如，弗蘭克·卡托（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>? 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>
);
}
在先前的設定中，團隊成員至少可以看到彼此，但如果他們位於不同的地方，無法直接溝通怎麼辦？唯一的保護者是 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>?️ 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中文網其他相關文章！
