ReactJS コンポーネントはどのようにして相互に効果的に通信するのでしょうか?

ReactJS のコンポーネントはどのように相互作用しますか?

ReactJS でアプリケーションを構築する場合、複数のコンポーネントが必要になるシナリオがよく発生します。データまたはイベントを対話および通信するため。このため、これらの対話を最適に促進するにはどうすればよいかという問題が生じる可能性があります。

コンポーネント通信のアプローチ

アプローチの選択は、コンポーネントの関係と階層によって異なります。

• シナリオ 1: フィルター -> List

  このシナリオでは、Filters コンポーネントは List コンポーネントの子です。 List コンポーネントは、ハンドラー関数を Filters コンポーネントに渡すことができます。フィルター入力が変更されると、ハンドラーを呼び出して、リストの状態を新しいフィルター値で更新できます。

• シナリオ 2: 親 ->フィルタとリスト

  フィルタとリストの両方が共通の親の子である場合、親は通信を処理できます。フィルターの状態を維持し、最新の値をフィルターとリストの両方に渡すことができます。

• シナリオ 3: 独立したコンポーネント

  親子関係がない場合、React はグローバル イベント システムの使用を推奨します。これは、componentDidMount() メソッドを使用してイベント リスナーを追加し、componentWillUnmount() を使用してイベント リスナーを削除することで実現できます。

コード例

シナリオ 1 (フィルター -> リスト)

// Filters.js
handleChange = () => {
  const value = this.input.value;
  this.props.updateFilter(value);
};

// List.js
handleFilterChange = (value) => this.setState({ filter: value });
<Filters onChange={this.handleFilterChange} />

シナリオ 2 (親 -> フィルターとリスト)

// Parent.js
filterChange = (value) => this.setState({ filter: value });

// Filters.js
render() {
  const { filter, updateFilter } = this.props;
  return <input value={filter} onChange={updateFilter} />;
}

// List.js
render() {
  const { filter, items } = this.props;
  return <ul>{items.filter(item => item.includes(filter)).map(...)}</ul>;
}

シナリオ 3 (グローバル イベント システム)

// GlobalEventEmitter.js
events = {};
on = (event, cb) => events[event] ? events[event].push(cb) : events[event] = [cb];
emit = (event, ...args) => events[event] ? events[event].forEach(cb => cb(...args)) : null;

// ComponentA.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

// ComponentB.js
emit("customEvent", { ... });
componentDidMount() {
  on("customEvent", (payload) => this.setState({ ...payload }));
}

以上がReactJS コンポーネントはどのようにして相互に効果的に通信するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。