React
구성 요소 간의 통신

비고

부모 컴포넌트와 자식 컴포넌트

React 세계에서 가장 자연스러운 사례, 실제로는 자연스러운 것입니다. 이미 이미 사용하고 있습니다.

자식 구성 요소에 소품 을 전달할 수 있습니다. 이 예제 message 는 하위 구성 요소로 전달하는 소품이고 이름 메시지는 임의로 선택되며 원하는 이름을 지정할 수 있습니다.

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

여기서, <Parent /> 요소는 두 렌더링 <Child /> 전달 요소를 message for child 첫 번째 구성 요소의 내부 및 5 번째 내부.

요약하면 다른 요소 (자식)를 렌더링하고 일부 소품을 전달하는 구성 요소 (부모)가 있습니다.

하위 컴포넌트와 상위 컴포넌트

데이터를 부모에게 다시 보내면 부모 컴포넌트에서 자식 컴포넌트로 함수를 전달 하고 자식 컴포넌트는 그 함수를 호출합니다 .

이 예제에서는 하위 구성 요소에 함수를 전달하고 하위 구성 요소 내에서 해당 함수를 호출하여 상위 상태를 변경합니다.

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

Parent의 outputEvent 메소드 (부모 상태를 변경)는 Child의 button onClick 이벤트에 의해 호출됩니다.

관련없는 구성 요소

구성 요소에 부모 - 자식 관계가 없거나 (예 : 그랜드 그랜드 아들과 관련이 있지만) 유일한 구성 요소는 한 구성 요소가 구독하고 다른 구성 요소가 씁니다.

이들은 모든 이벤트 시스템의 2 가지 기본 작동 : 알림을받을 이벤트 구독 및 청취 , 원하는 이벤트를 알리기 위해 이벤트 보내기 / 트리거 / 게시 / 디스패치 .

적어도 3 가지 패턴이 있습니다. 여기 에서 비교 를 찾을 수 있습니다.

다음은 간략한 요약입니다.

• 패턴 1 : Event Emitter / Target / Dispatcher : 청취자는 소스를 참조하여 구독해야합니다.

  • subscribe : otherObject.addEventListener('click', () => { alert('click!'); });
  • 디스패치 : this.dispatchEvent('click');

• 패턴 2 : 게시 / 구독 : 이벤트를 트리거하는 소스에 대한 특정 참조가 필요하지 않은 경우 모든 이벤트를 처리하는 전역 개체에 액세스 할 수 있습니다.

  • 구독하려면 : globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • 파견 : globalBroadcaster.publish('click');

• 패턴 3 : 신호 : Event Emitter / Target / Dispatcher와 비슷하지만 임의의 문자열은 여기에서 사용하지 마십시오. 이벤트를 방출 할 수있는 각 오브젝트에는 해당 이름의 특정 특성이 있어야합니다. 이 방법을 사용하면 개체에서 발생할 수있는 이벤트를 정확히 알 수 있습니다.

  • subscribe : otherObject.clicked.add( () => { alert('click'); });
  • 파견 할 : this.clicked.dispatch();