React 에서 구성 요소 간 통신 방식 을 자세히 설명 합 니 다.

무엇
우 리 는 구성 요소 간 통신 을 두 단어 로 나 눌 수 있다.

구성 요소

통신

Vue 시리즈의 글 을 돌 이 켜 보면 구성 요 소 는vue에서 가장 강력 한 기능 중 하나 이 고 같은 구성 요 소 는React의 핵심 사상 이다.vue에 비해React의 구성 요소 가 더욱 유연 하고 다양 하 며 서로 다른 방식 으로 여러 유형의 구성 요소 로 나 눌 수 있다.
한편,통신 이란 발송 자가 특정한 매 체 를 통 해 특정한 형식 으로 정 보 를 수신 자 에 게 전달 하여 특정한 목적 을 달성 하 는 것 을 말한다.넓 은 의미 에서 모든 정보의 교통 은 통신 이다.
구성 요소 간 통신 이란 구성 요소 가 특정한 방식 으로 정 보 를 전달 하여 특정한 목적 을 달성 하 는 것 을 말한다.
2.어떻게 통신 합 니까?
구성 요소 전달 방식 은 여러 가지 가 있 습 니 다.전송 자 와 수신 자 에 따라 다음 과 같이 나 눌 수 있 습 니 다.

부모 구성 요소 가 하위 구성 요소 에 전달

하위 구성 요소 가 부모 구성 요소 에 전달

형제 구성 요소 간 통신

부모 구성 요소 가 후대 구성 요소 에 전달

비 관계 구성 요소 전달

부모 구성 요소 하위 구성 요소 로 전달React의 데이터 가 단 방향 으로 흐 르 기 때문에 부모 구성 요소 가 하위 구성 요소 에 전달 하 는 것 이 가장 흔 한 방식 입 니 다.
부모 구성 요 소 는 하위 구성 요 소 를 호출 할 때 하위 구성 요소 탭 에서 파 라 메 터 를 전달 해 야 합 니 다.하위 구성 요 소 는props속성 을 통 해 부모 구성 요소 가 전달 하 는 파 라 메 터 를 받 을 수 있 습 니 다.

function EmailInput(props) {
  return (
    <label>
      Email: <input value={props.email} />
    </label>
  );
}

const element = <EmailInput email="[email protected]" />;

하위 구성 요소 가 부모 구성 요소 에 전달
하위 구성 요소 가 부모 구성 요소 에 통신 하 는 기본 적 인 사 고 는 부모 구성 요소 가 하위 구성 요소 에 함 수 를 전달 한 다음 에 이 함수 의 반전 을 통 해 하위 구성 요소 가 전달 하 는 값 을 가 져 오 는 것 입 니 다.
부모 구성 요소 대응 코드 는 다음 과 같 습 니 다.

class Parents extends Component {
  constructor() {
    super();
    this.state = {
      price: 0
    };
  }

  getItemPrice(e) {
    this.setState({
      price: e
    });
  }

  render() {
    return (
      <div>
        <div>price: {this.state.price}</div>
        {/*              */}
        <Child getPrice={this.getItemPrice.bind(this)} />
      </div>
    );
  }
}

하위 구성 요소 대응 코드 는 다음 과 같 습 니 다.

class Child extends Component {
  clickGoods(e) {
    //         
    this.props.getPrice(e);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickGoods.bind(this, 100)}>goods1</button>
        <button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
      </div>
    );
  }
}

형제 구성 요소 간 통신
형제 구성 요소 간 의 전달 이 라면 부모 구성 요 소 는 중간 층 으로 데이터 의 상호 연결 을 실현 하고 부모 구성 요 소 를 통 해 전달 합 니 다.

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <SiblingA
          count={this.state.count}
        />
        <SiblingB
          onClick={this.setCount}
        />
      </div>
    );
  }
}

부모 구성 요소 가 후대 구성 요소 에 전달
부모 구성 요소 가 후대 구성 요소 에 데 이 터 를 전달 하 는 것 은 전체 데이터 와 같은 가장 일반적인 일이 다.
사용context은 구성 요소 간 통신 방식 을 제공 하여 데 이 터 를 공유 할 수 있 고 다른 데 이 터 는 모두 해당 하 는 데 이 터 를 읽 을 수 있 습 니 다.
사용React.createContext을 통 해 하나 만 들 기context

 const PriceContext = React.createContext('price')

context생 성 에 성공 한 후,아래 에 존재 하 는Provider구성 요 소 는 데이터 원본 을 만 드 는 데 사 용 됩 니 다.Consumer구성 요 소 는 데 이 터 를 받 는 데 사 용 됩 니 다.인 스 턴 스 는 다음 과 같 습 니 다.Provider구성 요 소 는value속성 을 통 해 후대 구성 요소 에 데 이 터 를 전달 하 는 데 사 용 됩 니 다.

Provider전 달 된 데 이 터 를 가 져 오 려 면Consumer구성 요소 나contextType속성 으로 받 을 수 있 습 니 다.대응 하 는 것 은 다음 과 같 습 니 다.

class MyClass extends React.Component {
  static contextType = PriceContext;
  render() {
    let price = this.context;
    /*             */
  }
}

소비자 구성 요소:

<PriceContext.Consumer>
    { /*       */ }
    {
        price => <div>price：{price}</div>
    }
</PriceContext.Consumer>

비 관계 구성 요소 전달
구성 요소 간 의 관계 유형 이 비교적 복잡 한 경우 데 이 터 를 전체 자원 관 리 를 하여 통신 을 실현 하 는 것 을 권장 합 니 다.예 를 들 어redux.redux의 사용 에 관 한 후속 설명
3.총화React은 단 방향 데이터 흐름 이기 때문에 주요 사상 은 구성 요소 가 받 은 데 이 터 를 바 꾸 지 않 고 데이터 의 변화 만 감청 하 는 것 이다.데이터 가 변화 할 때 받 은 새로운 값 을 사용 하 는 것 이지 기 존의 값 을 수정 하 는 것 이 아니다.
따라서 통신 과정 에서 데이터 의 저장 위 치 는 모두 상위 위치 에 저장 되 어 있 음 을 알 수 있다.
React 에서 구성 요소 간 통신 방식 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 구성 요소 간 통신 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!