What are the methods for component communication in react?

This article mainly introduces you to several ways of component communication in react. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it follow below Let’s learn together.

Preface

• # This article will give you a detailed introduction. Before starting, let’s take a look at a picture:

• react component communication

• Several situations where components need to communicate

Parent component communicates with child component

Child component communicates with parent component

Cross-level component communication

Communication between components without nested relationships

• 1. Parent component communicates with child components

• React data flow is one-way, and communication between parent components and child components is also the most common; parent components pass required information to child components through 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. Child component communicates with parent component

Use callback function

Use custom event mechanism

Callback function

Realize the function of hiding yourself by clicking the hidden component button in a subcomponent

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 the implementation method and you can find it The implementation method of the traditional callback function is the same. And setState generally appears in pairs with the callback function, because the callback function is a function that converts the internal state;

3. Cross-level Component communication

Transfer props from component to layer

For example, to communicate between component A and component B, first find the common ones between A and B Parent component, A first communicates with C component, and C component communicates with B component through props. At this time, C component plays the role of middleware

Use context

Context is a global variable, like a large container, which can be accessed anywhere. We can put the information to be communicated on the context, and then it can be obtained at will in other components;But React Officially, it is not recommended to use a large number of contexts. Although it can reduce layer-by-layer transfer, when the component structure is complex, we do not know where the context is passed from; and context is a global variable, and global variables are what lead to confusion in the application. The culprit.

Use context

The component relationship in the following example: ListItem is a subcomponent of List, and List is a subcomponent of 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. Component communication without nested relationships

Use custom event mechanism

In the componentDidMount event, if the component is mounted, then subscribe to the event; when the component is uninstalled, cancel in the componentWillUnmount event Subscription of events;

Take the commonly used publish/subscribe model as an example, borrowing the browser version of the Node.js Events module to implement

How to use custom events

The component relationship in the following example: List1 and List2 do not have any nesting relationship, App is their parent component;

• Achieve such a function: click a button in List2 to change the information in List1 Display
  First you need to install the events package in the project:

npm install events --save

• Create a new util directory under src and build an 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>
  );
 }
}

• Custom events are a typical publish and subscribe model. Communication between components is achieved by adding listeners to event objects and triggering events.
  Summary

The parent component communicates with the child component: props

The child component communicates with the parent component: callback function/self Define events

Cross-level component communication: Layer-by-layer components pass props/context

No nesting relationship Communication between components: Custom Event

When communicating with components, we mainly look at the specific needs of the business and choose the most appropriate one;

When the business logic is complex to a certain extent, you can consider introducing it Mobx, Redux and other state management tools

The above is what I compiled for you. I hope it will be helpful to you in the future.

Related articles: #########Detailed interpretation of the map data structure in javascript###########How to implement a custom event mechanism using Javascript##### #######How to use vue to implement login registration and token verification############How to use vue to implement token verification######

The above is the detailed content of What are the methods for component communication in react?. For more information, please follow other related articles on the PHP Chinese website!