ReactJS 구성 요소는 어떻게 서로 효과적으로 통신합니까?

ReactJS의 구성 요소는 어떻게 서로 상호 작용할 수 있나요?

ReactJS에서 애플리케이션을 구축할 때 여러 구성 요소가 필요한 시나리오를 접하는 것이 일반적입니다. 데이터 또는 이벤트와 상호 작용하고 전달합니다. 이는 이러한 상호 작용을 가장 효과적으로 촉진하는 방법에 대한 질문으로 이어질 수 있습니다.

구성 요소 통신을 위한 접근 방식

접근 방식 선택은 구성 요소의 관계 및 계층 구조에 따라 달라집니다.

• 시나리오 1: 필터 -> List

  이 시나리오에서 필터 구성 요소는 목록 구성 요소의 하위 구성 요소입니다. List 구성 요소는 필터 구성 요소에 처리기 함수를 전달할 수 있습니다. 필터 입력이 변경되면 핸들러를 호출하여 목록의 상태를 새 필터 값으로 업데이트할 수 있습니다.

• 시나리오 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!