Reactでコンポーネントがどのように通信するかの詳細な説明

1. 何ですか

コンポーネント間の通信は、次の 2 つの単語に分けることができます。

コンポーネント
コミュニケーション

Vueシリーズの記事を振り返ると、コンポーネントはvueの最も強力な機能の1つであり、コンポーネント化はReact

vueと比較すると、 Reactコンポーネントはより柔軟で多様であり、さまざまな方法で多くの種類のコンポーネントに分割できます。

通信とは、特定の目的を達成するために、送信者が特定の媒体を介して特定の形式で受信者に情報を送信するプロセスを指します。広い意味では、あらゆる情報トラフィックは通信です。

コンポーネント間の通信とは、コンポーネントが特定の目的を達成するために何らかの方法で情報を送信することを意味します。

2. コミュニケーションの方法

コンポーネントを転送する方法は多数あり、送信者と受信者に応じて次のように分けられます。

親コンポーネントから子コンポーネントへの受け渡し
子コンポーネントが親コンポーネントに渡される
兄弟コンポーネント間の通信
親コンポーネントから子孫コンポーネントへの受け渡し
非リレーショナルコンポーネント転送

親コンポーネントから子コンポーネントへの受け渡し

Reactのデータフローは一方向なので、親コンポーネントから子コンポーネントに渡すのが最も一般的な方法です。

親コンポーネントが子コンポーネントを呼び出すときは、子コンポーネントタグでパラメータを渡すだけでよく、子コンポーネントはprops属性を通じて親コンポーネントから渡されたパラメータを受け取ることができます。

関数 EmailInput(props) {
  戻る （
    <ラベル>
      メールアドレス: <input value={props.email} />
    </ラベル>
  );
}

定数要素 = <EmailInput email="[email protected]" />;

子コンポーネントが親コンポーネントに渡される

子コンポーネントと親コンポーネントの通信の基本的な考え方は、親コンポーネントが子コンポーネントに関数を渡し、この関数のコールバックを通じて子コンポーネントから渡された値を取得することです。

親コンポーネントの対応するコードは次のとおりです。

ParentsクラスはComponentを拡張します{
  コンストラクタ() {
    素晴らしい（）;
    この状態 = {
      価格: 0
    };
  }

  アイテム価格を取得する(e) {
    this.setState({
      価格：
    });
  }

  与える（） {
    戻る （
      <div>
        <div>価格: {this.state.price}</div>
        {/* 子コンポーネントに関数を渡す*/
        <子 getPrice={this.getItemPrice.bind(this)} />
      </div>
    );
  }
}

サブコンポーネントの対応するコードは次のとおりです。

クラスChildはComponentを拡張します{
  クリックグッズ(e) {
    // この関数に値を渡します this.props.getPrice(e);
  }

  与える（） {
    戻る （
      <div>
        <button onClick={this.clickGoods.bind(this, 100)}>商品1</button>
        <button onClick={this.clickGoods.bind(this, 1000)}>商品2</button>
      </div>
    );
  }
}

兄弟コンポーネント間の通信

兄弟コンポーネント間でデータが転送される場合、親コンポーネントはデータの相互通信を実現するための中間層として機能します。

クラス Parent は React.Component を拡張します {
  コンストラクタ(props) {
    スーパー(小道具)
    this.state = {count: 0}
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  与える（） {
    戻る （
      <div>
        <兄弟A
          カウント = {this.state.count}
        />
        <兄弟B
          onClick={this.setCount}
        />
      </div>
    );
  }
}

親コンポーネントから子孫コンポーネントへの受け渡し

グローバルデータと同様に、親コンポーネントが子孫コンポーネントにデータを渡すことはよくあります。

contextを使用すると、コンポーネントが相互に通信できるようになり、データを共有したり、他のデータが対応するデータを読み取ったりできるようになります。

React.createContextを使用してcontextを作成する

 const PriceContext = React.createContext('price')

contextが正常に作成されると、その下にProviderコンポーネントが存在し、データソースが作成され、 Consumerコンポーネントがデータの受信に使用されます。使用例は次のとおりです。

Providerコンポーネントは、 value属性を使用して、子孫コンポーネントにデータを渡します。

<PriceContext.Provider 値 = {100}>
</価格コンテキスト.プロバイダー>

Providerによって渡されたデータを取得する場合は、 Consumerコンポーネントを介してデータを受信するか、 contextTypeプロパティを使用します。その方法は次のとおりです。

クラスMyClassはReact.Componentを拡張します{
  静的コンテキストタイプ = PriceContext;
  与える（） {
    価格を this.context とします。
    /* この値に基づいてレンダリングを実行します*/
  }
}

消費者コンポーネント:

<価格コンテキスト.消費者>
    { /* これは関数です */ }
    {
        価格 => <div>価格：{price}</div>
    }
</PriceContext.Consumer>

非リレーショナルコンポーネント転送

コンポーネント間の関係が複雑な場合は、 reduxなどのグローバルリソースとしてデータを管理し、通信を実現することをお勧めします。 reduxの使用については後で詳しく説明します

結論

React一方向のデータフローであるため、基本的な考え方は、コンポーネントは受信したデータを変更せず、データの変更のみをリッスンすることです。データが変更されると、既存の値を変更するのではなく、受信した新しい値を使用します。

したがって、通信プロセス中に、データの保存場所は親の場所に保存されることがわかります。

React におけるコンポーネント間の通信方法についてはこれで終わりです。React コンポーネント間の通信の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: