強盗戦略から反応状態まで: コンポーネント間のデータの流れ

コーディングを始めたときは、主に構文を理解しようとしましたが、プロジェクトが大きくなると、デザインとデータ フローについて考える必要がありました。もう機能しないものをコーディングし始めてください。

この問題をより具体的にするために、React コンポーネントがコンポーネント間でデータを渡す方法について説明します。私たちの React アプリを、『オーシャンズ 11』の経験豊かな泥棒のグループとして想像して楽しんでみましょう (若きブラッド ピットとジョージ クローニーが出演したこの映画を覚えている年齢になっていることを願っています)。主人公のダニー・オーシャンは仮釈放されたばかりの泥棒で、11人の熟練犯罪者からなるチームを編成し、手の込んだ強盗を成功させます。彼らの目標は、ラスベガスで最も保護されている 3 つのカジノ (ベラージオ、ミラージュ、MGM グランド) を同時に強盗することであり、すべて冷酷なテリー ベネディクトが所有していたものです。映画史上最も大胆な強盗を成功させるために、チームは紆余曲折、危機一髪、巧妙な策略に直面する。そこで、React コンポーネントが秘密裏に通信する必要がある犯罪者であると想像してみましょう。

追伸: この映画をもう一度見る時間がなかったので、プロット内で完全に一致するものを見つける代わりに、いくつかの例を作成しました。
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>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. 状態を使用したデータの共有

しかし、乗組員全員から情報を提供する必要がある場合はどうすればよいでしょうか?強盗戦略の計画が共有状態であるとします。親コンポーネント (Danny Ocean など) が計画を管理します。すべての乗組員がこの情報にアクセスする必要があります。おそらく彼らは、ダニーが計画を投稿し、メンバーがそれを読んだり更新したりする仮釈放された Google ドキュメントを使用しているのでしょう。
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>
   );
 };

3. カスタム イベントを使用したデータの共有

計画は準備ができたので、オーシャンズ イレブンはカジノをチェックする必要があります。しかし、建物内では紙のメモを送るのは遅すぎるし、ラップトップを使用するのは不便です。したがって、確実な兆候について事前に決定する必要があります。たとえば、この計画で信用のない売春婦を演じるフランク・カットーは、ソールがやって来る様子を見て、強盗が始まることを知ります。
この例では、React のカスタム イベントを示します。ここでは、通常の JavaScript のように組み込みではありません。ただし、EventEmitter クラスなどのツールや、PubSub や EventTarget などのサードパーティ ライブラリを使用して、カスタムのイベント駆動型アーキテクチャを実現することはできます。実際にはこのパターンを使用しますが、接続する必要があるコンポーネントが近くにないため、支柱の穴あけは意味がありません。たとえば、モジュールが閉じられた後にセール バナーを表示する必要がある場合です。

これがオーシャンのメタファーのコードです。

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. ブロードキャスト チャネル API を使用したデータの共有

前の設定では、チーム メンバーは少なくともお互いの姿を見ることができましたが、もし彼らが別の場所にいて、直接通信できなかったらどうなるでしょうか?唯一の節約手段はブロードキャスト チャネル API です。
ブロードキャスト チャネル API は、正確なオリジンからブラウザのタブ、ウィンドウ、または iframe 間でデータを共有するためのブラウザ ネイティブ ソリューションです。これは、接続されているすべてのコンテキストにメッセージをブロードキャストするための通信チャネルとして機能します。
映画の最も重要なポイントで乗組員の解体専門家でありハッカーであるバッシャー・ターは、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>
 );
}

// リビングストンデル.js
関数リビングストンデル() {
  const sendSignal = (トピック, メッセージ) => {
    イベントバス.パブリッシュ(トピック、メッセージ);
  };

  戻る （
    <div>



<p>この記事を改良する方法はたくさんあると確信しているので、大学からの提案や修正は喜んで受け付けます。 <br>
また、iframe、バックエンド Web ソケットを介した統合、バックエンド ロング ポーリングを介した統合、ストレージを介した統合 (インデックス データベースなど) を使用した接続を説明するこの記事のパート 2 も作成したいと考えています。 )、URL を介した統合、サードダム要素を介した統合。しかし、そうなります。</p>

<p>読んでいただきありがとうございます</p>


          </div>

            
        

以上が強盗戦略から反応状態まで: コンポーネント間のデータの流れの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。