Quelles sont les méthodes de communication des composants en réaction ?

Cet article vous présente principalement plusieurs méthodes de communication entre composants dans React. L'article le présente de manière très détaillée à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous. Les amis qui en ont besoin suivent ce qui suit. .

Avant-propos

Lorsque vous êtes nouveau sur React, vous pouvez rencontrer des problèmes de communication entre les composants en raison de la fonctionnalité de flux de données unidirectionnel de Réagissez. Voici ce qui suit. Cet article vous donnera une introduction détaillée Avant de commencer, jetons un coup d'œil à une image :

communication des composants React

.

• Plusieurs situations où les composants doivent communiquer

• Le composant parent communique avec le composant enfant

• Le composant enfant communique avec le composant parent

• Communication entre composants entre niveaux

• Aucune communication de relation imbriquée entre les composants

1. Le composant parent communique avec les composants enfants

Le flux de données React est unidirectionnel, et la communication du composant parent au composant enfant est également la plus courante qui transmet les informations requises ; Le composant enfant via les accessoires
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. >

Utiliser la fonction de rappel
Utiliser le mécanisme d'événement personnalisé

Fonction de rappel

Implémentez la fonction de vous cacher en cliquant sur le bouton du composant caché dans un composant enfant

List3.jsx

App,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;

En observant la méthode d'implémentation, vous pouvez constater qu'elle est la même que la méthode d'implémentation de la fonction de rappel traditionnelle. Et setState apparaît généralement par paire avec la fonction de rappel, car la fonction de rappel est une fonction qui convertit l'état interne. ;

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>
  );
 }
}

3. Communication des composants entre niveaux

Transférer les accessoires d'un composant de couche à l'autre

Par exemple, il doit y avoir une communication entre le composant A et le composant B. , recherchez d'abord le composant parent commun de A et B. A communique d'abord avec le composant C Le composant C communique avec le composant B via des accessoires. , le composant C joue le rôle de middleware

Utiliser le contexte

Le contexte est une variable globale, comme un grand conteneur, accessible n'importe où. informations à communiquer sur le contexte, puis y accéder à volonté dans d'autres composants

Cependant, React déconseille officiellement d'utiliser un grand nombre de contextes bien que cela puisse réduire le transfert couche par couche, quand. la structure des composants est complexe, nous ne savons pas d'où vient le contexte et le contexte est une variable globale qui provoque le chaos dans les applications.

Utilisez le contexte

La relation entre les composants dans l'exemple suivant : ListItem est un sous-composant de List et List est le composant enfant de l'application

ListItem.jsx

List.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;

app.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;

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. Communication des composants sans relation d'imbrication

Utiliser la personnalisation mécanisme d'événement

Dans l'événement composantDidMount, si le composant est monté, alors Abonnez-vous aux événements ; lorsque le composant est déchargé, annulez l'abonnement à l'événement dans l'événement composantWillUnmount ; modèle de publication/abonnement couramment utilisé comme exemple et empruntez la version navigateur du module Événements Node.js pour l'implémenter

Utiliser des événements personnalisés

La relation entre les composants dans le exemple suivant : List1 et List2 n'ont aucune relation d'imbrication, App est leur composant parent Réaliser une telle fonction : Cliquez sur un bouton dans List2 pour modifier l'affichage des informations dans List1

Tout d'abord, vous devez installer le package d'événements dans le projet :

Créez un nouveau répertoire util sous src et créez-y un événement js

npm install events --save

list1.jsx

.

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

List2.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;

APP.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>
  );
 }
}

L'événement personnalisé est Un modèle de publication-abonnement typique réalise la communication entre les composants en ajoutant des écouteurs et en déclenchant des événements aux objets événementiels

Résumé

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>
  );
 }
}

Le composant parent communique avec les composants enfants : props

• Le composant enfant communique avec le composant parent : rappel fonction/événement personnalisé

• Communication des composants entre niveaux : les composants couche par couche transmettent les accessoires/contexte

• Aucune relation imbriquée Communication entre les composants : Événements personnalisés

• Lors de la communication entre les composants, cela dépend principalement des besoins spécifiques de l'entreprise, choisissez le plus approprié ;

Lorsque la logique métier atteint un certain niveau , vous pouvez envisager d'introduire des outils de gestion d'état tels que Mobx et Redux

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée de la structure des données cartographiques en javascript

Comment implémenter un mécanisme d'événements personnalisé à l'aide de Javascript

Comment utiliser vue pour implémenter l'enregistrement de connexion et la vérification des jetons

Comment utiliser vue pour implémenter la vérification des jetons

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!