React에서 컴포넌트 간 통신을 효과적으로 관리하는 방법은 무엇입니까?

React의 구성 요소 간 통신

React에서는 여러 구성 요소에 걸쳐 상태를 유지하는 것이 어려울 수 있습니다. 관련 구성 요소 간의 통신을 용이하게 하는 방법은 다음과 같습니다.

시나리오 #1: 목록의 하위로 필터

부모(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!