React에서 컴포넌트 통신을 위한 방법은 무엇입니까?

이 기사에서는 주로 React의 여러 가지 컴포넌트 통신 방법을 샘플 코드를 통해 자세히 소개합니다. 모든 사람의 학습이나 업무에 필요한 참고 자료가 있으므로 아래 편집자를 따라 오십시오. .

머리말

React를 처음 시작하시는 분들은 React의 단방향 데이터 흐름 기능으로 인해 컴포넌트 간 통신에 문제가 발생할 수 있으며, 다음 글에서 자세히 소개하겠습니다. 시작하기 전에 사진을 보세요:

react 컴포넌트 통신

• 컴포넌트가 통신해야 하는 여러 상황

• 상위 컴포넌트가 하위 컴포넌트와 통신

• 하위 컴포넌트가 상위 컴포넌트와 통신합니다

• 레벨 구성 요소 통신

• 구성 요소 간 중첩 관계 통신 없음

1. 상위 구성 요소는 하위 구성 요소와 통신합니다

React 데이터 흐름은 단방향이며 상위 구성 요소는 하위 구성 요소와 통신합니다. ; 상위 구성 요소는 props
Child.jsx

import React from 'react';
import PropTypes from 'prop-types';
export default function Child({ name }) {
 return <h1>Hello, {name}</h1>;
}
Child.propTypes = {
 name: PropTypes.string.isRequired,
};

Parent.jsx

import React, { Component } from 'react';
import Child from './Child';
class Parent extends Component {
 render() {
  return (
   <p>
    <Child name="Sara" />
   </p>
  );
 }
}
export default Parent;

2를 통해 하위 구성 요소에 필수 정보를 전달합니다. 하위 구성 요소는 콜백 함수

• 를 사용하여 상위 구성 요소와 통신합니다.

• 사용자 정의 이벤트 메커니즘

콜백 함수

를 활용하여 하위 구성 요소에서 구성 요소 숨기기 버튼을 클릭하여 자신을 숨기는 기능을 구현합니다.

List3.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List3 extends Component {
 static propTypes = {
  hideConponent: PropTypes.func.isRequired,
 }
 render() {
  return (
   <p>
    哈哈,我是List3
    <button onClick={this.props.hideConponent}>隐藏List3组件</button>
   </p>
  );
 }
}
export default List3;

App, jsx

import React, { Component } from 'react';
import List3 from './components/List3';
export default class App extends Component {
 constructor(...args) {
  super(...args);
  this.state = {
   isShowList3: false,
  };
 }
 showConponent = () => {
  this.setState({
   isShowList3: true,
  });
 }
 hideConponent = () => {
  this.setState({
   isShowList3: false,
  });
 }
 render() {
  return (
   <p>
    <button onClick={this.showConponent}>显示Lists组件</button>
    {
     this.state.isShowList3 ?
      <List3 hideConponent={this.hideConponent} />
     :
     null
    }
   </p>
  );
 }
}

Observe 구현 방법은 기존 콜백 함수와 동일하게 구현되는 것으로 나타났습니다. 그리고 콜백 함수는 내부 상태를 변환하는 전통적인 함수이기 때문에 일반적으로 setState가 콜백 함수와 쌍으로 나타납니다.

3. 크로스 레벨 컴포넌트 통신

props를 컴포넌트 레이어별로 전송

예를 들어 컴포넌트 A와 컴포넌트 B가 통신하려면 먼저 A와 B의 공통 상위 컴포넌트를 찾으세요. 이때 C컴포넌트는 미들웨어 역할을 합니다

컨텍스트 사용

컨텍스트는 전역변수로서 어디서든지 접근이 가능합니다. . 전달될 정보를 컨텍스트에 넣은 다음 다른 구성 요소에서 마음대로 얻을 수 있습니다.

그러나 React는 공식적으로 많은 수의 컨텍스트를 사용하는 것을 권장하지 않습니다. 레이어 전송, 구성 요소 구조가 복잡하면 컨텍스트가 어디에서 전달되는지 알 수 없으며 컨텍스트는 전역 변수이며, 전역 변수는 애플리케이션을 혼란에 빠뜨리는 원인입니다.

컨텍스트 사용

다음 예의 구성 요소 관계: ListItem은 List의 하위 구성 요소이고 List는 app

ListItem.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class ListItem extends Component {
 // 子组件声明自己要使用context
 static contextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  value: PropTypes.string,
 }
 render() {
  const { value } = this.props;
  return (
   <li style={{ background: this.context.color }}>
    <span>{value}</span>
   </li>
  );
 }
}
export default ListItem;

List.jsx

import ListItem from './ListItem';
class List extends Component {
 // 父组件声明自己支持context
 static childContextTypes = {
  color: PropTypes.string,
 }
 static propTypes = {
  list: PropTypes.array,
 }
 // 提供一个函数,用来返回相应的context对象
 getChildContext() {
  return {
   color: 'red',
  };
 }
 render() {
  const { list } = this.props;
  return (
   <p>
    <ul>
     {
      list.map((entry, index) =>
       <ListItem key={`list-${index}`} value={entry.text} />,
      )
     }
    </ul>
   </p>
  );
 }
}
export default List;

app.jsx

import React, { Component } from 'react';
import List from './components/List';
const list = [
 {
  text: '题目一',
 },
 {
  text: '题目二',
 },
];
export default class App extends Component {
 render() {
  return (
   <p>
    <List
     list={list}
    />
   </p>
  );
 }
}

4의 하위 구성 요소입니다. 중첩 관계

사용자 지정 이벤트 메커니즘 사용

commentorDidMount 이벤트에서 구성 요소가 마운트되면 이벤트를 구독하고, 구성 요소가 언로드되면 componentWillUnmount 이벤트에서 이벤트 구독을 취소하세요. 게시/구독 모델을 예로 사용하고 Node.js 이벤트 모듈의 브라우저 버전을 빌려 이를 구현했습니다.

사용자 정의 이벤트 사용

다음 예의 구성 요소 관계: List1과 List2에는 중첩 관계가 없습니다. App

다음 기능을 달성하세요. List1의 정보 표시를 변경하려면 List2의 버튼을 클릭하세요.

먼저 항목이 필요합니다. 다음 위치에 이벤트 패키지를 설치하세요.

npm install events --save

src 아래에 새 util 디렉토리를 만들고 events.js

import { EventEmitter } from 'events';
export default new EventEmitter();

list1.jsx

import React, { Component } from 'react';
import emitter from '../util/events';
class List extends Component {
 constructor(props) {
  super(props);
  this.state = {
   message: 'List1',
  };
 }
 componentDidMount() {
  // 组件装载完成以后声明一个自定义事件
  this.eventEmitter = emitter.addListener('changeMessage', (message) => {
   this.setState({
    message,
   });
  });
 }
 componentWillUnmount() {
  emitter.removeListener(this.eventEmitter);
 }
 render() {
  return (
   <p>
    {this.state.message}
   </p>
  );
 }
}
export default List;

List2.jsx

import React, { Component } from 'react';
import emitter from '../util/events';
class List2 extends Component {
 handleClick = (message) => {
  emitter.emit('changeMessage', message);
 };
 render() {
  return (
   <p>
    <button onClick={this.handleClick.bind(this, &#39;List2&#39;)}>点击我改变List1组件中显示信息</button>
   </p>
  );
 }
}

APP.jsx

import React, { Component } from 'react';
import List1 from './components/List1';
import List2 from './components/List2';
export default class App extends Component {
 render() {
  return (
   <p>
    <List1 />
    <List2 />
   </p>
  );
 }
}

사용자 정의 이벤트는 일반적인 게시 및 구독 패턴이며 구성 요소 간의 통신은 이벤트 객체에 리스너를 추가하고 이벤트를 트리거하여 달성됩니다

요약

상위 구성 요소는 하위 구성 요소와 통신합니다: props

• 하위 구성 요소는 상위 구성 요소와 통신합니다: 콜백 함수/자체 이벤트 정의

• 교차 레벨 구성 요소 통신: 레이어별 구성 요소는 props/context를 전달합니다

• 중첩 관계 없음 컴포넌트 간 통신: 커스텀 이벤트

• 컴포넌트 간 통신은 주로 비즈니스에 따라 다릅니다. 특정 요구 사항에 따라 가장 적합한 것을 선택합니다.
  비즈니스 로직이 특정 수준에 도달하면, Mobx 및 Redux와 같은 상태 관리 도구 도입을 고려해 보세요

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 여러분에게 도움이 되기를 바랍니다.

관련 기사:

자바스크립트의 지도 데이터 구조에 대한 자세한 해석

Javascript를 사용하여 맞춤 이벤트 메커니즘을 구현하는 방법

vue를 사용하여 로그인 등록 및 토큰 확인을 구현하는 방법

방법 Vue를 사용하여 토큰 확인 구현

위 내용은 React에서 컴포넌트 통신을 위한 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!