Reactコンポーネント通信の詳細な説明

コンポーネント通信の概要

コンテンツ

コンポーネントは独立した閉じた単位であり、デフォルトでは独自のデータのみを使用できます。
コンポーネント化プロセスでは、完全な機能を複数のコンポーネントに分割して、アプリケーション全体の機能をより完成させます。
このプロセスでは、複数のコンポーネントが何らかのデータを共有することが避けられません。
これらの機能を実現するためには、コンポーネントの独立性や閉鎖性を打破し、外部との通信を可能にする必要があります。このプロセスはコンポーネント通信です。

3つの方法

親コンポーネントと子コンポーネント間
兄弟コンポーネント間
コンポーネントレベル全体

まとめ

コンポーネント内の状態はプライベートです。つまり、コンポーネントの状態はコンポーネント内でのみ使用でき、コンポーネントの外部で直接使用することはできません。

コンポーネントコミュニケーション - 父から息子へ

コンテンツ：

親コンポーネントは渡される状態データを提供する
サブコンポーネントタグに属性を追加し、その値は状態のデータになります。
子コンポーネントは、propsを通じて親コンポーネントから渡されたデータを受け取ります。

コアコード

親コンポーネントはデータを提供し、それを子コンポーネントに渡します。

クラス Parent は React.Component を拡張します {
    状態 = { lastName: '王' }
    与える（） {
        戻る （
            <div>
                子コンポーネントにデータを渡します: <Child name={this.state.lastName} />
            </div>
        ）
    }
}

サブコンポーネントがデータを受信

関数Child(props) {
	return <div>子コンポーネントはデータを受け取ります: {props.name}</div>
}

コンポーネント通信 - 子から親へ

アイデア

コールバック関数を使用すると、親コンポーネントがコールバックを提供し、子コンポーネントがそれを呼び出し、渡されるデータがコールバック関数のパラメーターとして使用されます。

ステップ

1. 親コンポーネント

1. コールバック関数 f を定義します（データを受信するために使用されます）

2. 関数fを属性の値として子コンポーネントに渡す

2. サブコンポーネント

1. 小道具を使ってfを取得する

2. fを呼び出して子コンポーネントのデータを渡す

コアコード

親コンポーネントは関数を提供し、それを子コンポーネントに渡します

クラス Parent は React.Component を拡張します {
    州： {
      数: 100
    }
    f = (数値) => {
        console.log('サブコンポーネントデータを受信しました', num)
    }
    与える（） {
        戻る （
            <div>
            	子コンポーネント: <Child f={this.f} />
            </div>
        ）
    }
}

子コンポーネントは関数を受け取り、

クラスChildはReact.Componentを拡張します。
    ハンドルクリック = () => {
      // 親コンポーネントから渡されたプロパティを呼び出し、パラメータ this.props.f(100) を渡します。
    }
    戻る （
    	<button onClick={this.handleClick}>クリックすると親コンポーネントにデータが渡されます</button>
    ）
}

まとめ

子から親へ: 親コンポーネントで定義されたメソッドを子コンポーネントで呼び出し、必要に応じてパラメータを渡します。

コンポーネント通信 - ブラザーコンポーネント

React には兄弟コンポーネントというものはなく、状態の昇格のみがあります。

アイデア

共有状態を、状態を管理する最も近い共通の親コンポーネントに昇格する
考察：州の改善
共通の親コンポーネントの責任:
- 共有状態の提供
- 共有状態を操作するためのメソッドを提供する
通信したい子コンポーネントは、propsを通じて状態または状態を操作するメソッドを受け取るだけでよい。

コアコード

parent.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
'react-dom' から ReactDOM をインポートします。
'./Jack' から Jack をインポートします
'./Rose' から Rose をインポートします
クラスAppはComponentを拡張します{
  // 1. 状態が親コンポーネントに昇格される state = {
    メッセージ: ''、
  }
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ジャックは言う={this.changeMsg}></ジャック>
        2. 子コンポーネントにステータスを表示する*/
        <ローズ メッセージ = {this.state.msg}></ローズ>
      </div>
    ）
  }
  changeMsg = (メッセージ) => {
    this.setState({
      メッセージ、
    })
  }
}
// レンダリングコンポーネント ReactDOM.render(<App />, document.getElementById('root'))

Son1.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
デフォルトのクラスJackをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <h3>私はジャックコンポーネントです</h3>
        <button onClick={this.say}>発言</button>
      </div>
    ）
  }
  言う = () => {
    this.props.say('あなたがジャンプすると私が見る')
  }
}

Son2.js

React をインポートします。{ コンポーネント } を 'react' からインポートします。
デフォルトクラスRoseをエクスポートし、Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <h3>私はローズコンポーネントです - {this.props.msg}</h3>
      </div>
    ）
  }
}

コンポーネント通信 - レベル間コンポーネント通信

Vueでクロスレベルコンポーネント通信を使用する場合は、Contextを使用する必要があります。

コンテキストを使用する手順

3 つのステップがあります。

1. createContextメソッドをインポートして呼び出し、結果からプロバイダとコンシューマのコンポーネントを分解します。

'react' から {createContext} をインポートします。
const { プロバイダー、コンシューマー } = createContext()

2. プロバイダコンポーネントを使用してルートコンポーネントをラップし、値属性を通じて共有するデータを提供します。

戻る （
  <プロバイダー値={ここに渡すデータを入力してください}>
  	<ルートコンポーネントの内容/>
  </プロバイダー>
）

3. 子孫コンポーネントでは、ステップ2でエクスポートしたコンシューマーコンポーネントでコンポーネント全体をラップします。

戻る （
	<消費者>
  	{
      （データ） => {
      	// ここでのパラメータデータはプロバイダーから渡されたデータを自動的に受け取ります // console.log(data)
      	<コンポーネントコンテンツ> を返します。
    	}
    }
  </消費者>
）

着陸コード

context.jsファイルを作成する

'react' から {createContext} をインポートします。
const { プロバイダー、コンシューマー } = createContext()
エクスポート { コンシューマー、プロバイダー }

ルートコンポーネントの変換

'./context' から { Provider } をインポートします。
与える （） {
    戻る （
      <プロバイダー値={{ num: this.state.num }}>
        <div>
          ルート コンポーネント、番号: {this.state.num}
          <親 />
          <おじさん />
        </div>
      </プロバイダー>
    ）
  }

子孫コンポーネントUncle.jsを変換する

'react' から React をインポートします
'./context' から Consumer をインポートします。
デフォルトのクラスUncleをエクスポートし、React.Componentを拡張します。
  与える （） {
    戻る （
      <消費者>
        {(データ) => {
          <div>I am Uncle コンポーネント、{data.num} を返します。
        }}
      </消費者>
    ）
  }
}