React でコンポーネント間通信を効果的に管理するにはどうすればよいですか?

React のコンポーネント間通信

React では、複数のコンポーネント間で状態を維持するのが難しい場合があります。関連コンポーネント間の通信を容易にする方法は次のとおりです。

シナリオ 1: リストの子としてフィルターする

ハンドラーを親 (リスト) から子 (フィルター)。フィルターが変更されると、Filters のハンドラーは親のメソッドを呼び出して状態を更新し、List での再レンダリングをトリガーします。

シナリオ 2: フィルターとリストの共通の親

通信を委任する親コンポーネントを導入します。親はフィルターにハンドラーを渡し、フィルターが変更されるとフィルターとリストの両方の状態を更新します。

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

親子関係がある場合は、グローバル イベント システムの使用を検討してください。 「filterUpdated」などのイベント名を定義し、フィルター コンポーネントとリスト コンポーネントの両方でそれをサブスクライブします。フィルタの変更時にイベントをトリガーし、サブスクライブされたコンポーネントに状態を更新するように通知します。

例:

// Global events file
export const myEmitter = new EventEmitter();

// Filters component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterChange() {
  // Emit event and pass new filter value
  myEmitter.emit('filterUpdated', newFilterValue);
}

// List component
componentDidMount() {
  myEmitter.on('filterUpdated', this.handleFilterUpdate);
}

handleFilterUpdate(newFilterValue) {
  // Update state
  this.setState({ filterValue: newFilterValue });
}

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