Heim >Web-Frontend >js-Tutorial >Welche Methoden gibt es für die Komponentenkommunikation in React?
Dieser Artikel stellt Ihnen hauptsächlich verschiedene Möglichkeiten der Komponentenkommunikation vor. Der Artikel stellt ihn anhand von Beispielcodes ausführlich vor. Er hat einen bestimmten Referenz-Lernwert für alle, die ihn beim Lernen oder Arbeiten benötigen. Lassen Sie uns gemeinsam lernen .
Vorwort
Wenn Sie neu bei React sind, kann es aufgrund der unidirektionalen Datenflussfunktion von zu Problemen bei der Kommunikation zwischen Komponenten kommen Reagieren. Hier ist der folgende Artikel. Bevor wir beginnen, werfen wir einen Blick auf ein Bild:
Reaktionskomponentenkommunikation
Mehrere Situationen, in denen Komponenten kommunizieren müssen
Übergeordnete Komponente kommuniziert mit untergeordneter Komponente
Untergeordnete Komponente kommuniziert mit übergeordneter Komponente
Ebenenübergreifende Komponentenkommunikation
Keine verschachtelte Beziehungskommunikation zwischen Komponenten
1. Übergeordnete Komponente kommuniziert mit untergeordneten Komponenten
Der Reaktionsdatenfluss erfolgt in eine Richtung, und die Kommunikation von der übergeordneten Komponente zur untergeordneten Komponente ist auch die am häufigsten verwendete Weitergabe der erforderlichen Informationen Untergeordnete Komponente über Requisiten
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. Untergeordnete Komponente kommuniziert mit übergeordneter Komponente
Rückruffunktion verwenden
Benutzerdefinierten Ereignismechanismus verwenden
Rückruffunktion
Implementieren Sie die Funktion, sich zu verstecken, indem Sie auf die Schaltfläche „Versteckte Komponente“ in einer Unterkomponente klicken
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> ); } }
Sehen Sie sich die an Implementierungsmethode und Sie können sie finden. Die Implementierungsmethode der herkömmlichen Rückruffunktion ist dieselbe und setState wird im Allgemeinen in Paaren mit der Rückruffunktion angezeigt, da die Rückruffunktion eine Funktion ist, die den internen Status konvertiert 🎜>
3. Ebenenübergreifende KomponentenkommunikationSchicht-für-Schicht-Komponentenübertragungs-Requisiten
Zum Beispiel für die Kommunikation zwischen Komponente A und Komponente B finden zuerst die Gemeinsamkeiten zwischen A und B. Die übergeordnete Komponente A kommuniziert zuerst mit der C-Komponente und die C-Komponente kommuniziert mit der B-Komponente über Requisiten. Zu diesem Zeitpunkt spielt die C-Komponente die Rolle der Middleware
Kontext verwenden
Kontext ist eine globale Variable, wie ein großer Container, auf den überall zugegriffen werden kann. Wir können die zu kommunizierenden Informationen im Kontext platzieren und dann darauf zugreifen wird in anderen Komponenten verwendet;
Offiziell wird jedoch nicht empfohlen, eine große Anzahl von Kontexten zu verwenden. Wenn die Komponentenstruktur jedoch komplex ist, wissen wir nicht, wo Der Kontext wird von übergeben und der Kontext ist eine globale Variable, und globale Variablen führen zu Verwirrung in der Anwendung.Kontext verwenden
Die Komponente Beziehung im folgenden Beispiel: ListItem ist eine Unterkomponente von List und List ist eine Unterkomponente von app
ListItem.jsximport 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. Komponentenkommunikation ohne verschachtelte Beziehung
Benutzerdefinierten Ereignismechanismus verwenden
In der KomponenteDidMount Wenn die Komponente gemountet ist, abonnieren Sie das Ereignis. Wenn die Komponente nicht gemountet ist, brechen Sie das Abonnement von Ereignissen im ComponentWillUnmount ab.
Nehmen Sie das häufig verwendete Publish/Subscribe-Modell als Beispiel und leihen Sie sich den Browser aus Version des Node.js-Ereignismoduls zum Implementieren vonBenutzerdefinierte Ereignisse verwenden
Die Komponentenbeziehung im folgenden Beispiel: List1 und List2 haben keine Verschachtelungsbeziehung, App ist ihre übergeordnete Komponente;
Um eine solche Funktion zu erreichen: Klicken Sie auf eine Schaltfläche in Liste2, um die Informationen in Liste1 zu ändern. Um anzuzeigen, müssen Sie zuerst das Ereignispaket im Projekt installieren:npm install events --saveErstellen Sie ein neues Util-Verzeichnis unter src und erstellen Sie eine 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, 'List2')}>点击我改变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> ); } }Benutzerdefinierte Ereignisse sind ein typisches Veröffentlichungs- und Abonnementmodell, das die Kommunikation zwischen Komponenten durch das Hinzufügen von Listenern und das Auslösen von Ereignissen zu Ereignisobjekten implementiert Komponente kommuniziert mit untergeordneter Komponente: Requisiten Untergeordnete Komponente kommuniziert mit übergeordneter Komponente: Rückruffunktion/Selbst Ereignisse definieren
Detaillierte Interpretation der Kartendatenstruktur in Javascript
So implementieren Sie einen benutzerdefinierten Ereignismechanismus mit Javascript
So verwenden Sie Vue, um die Anmelderegistrierung und die Token-Überprüfung zu implementieren
So verwenden Sie Vue, um die Token-Überprüfung zu implementieren
Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für die Komponentenkommunikation in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!