Analyse und Vergleich der Kommunikation zwischen traditionellen Komponenten und der Kommunikation zwischen React-Komponenten (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Analyse und dem Vergleich der Kommunikation zwischen herkömmlichen Komponenten und der Kommunikation zwischen React-Komponenten (Codebeispiele). Ich hoffe, dass er hilfreich ist du hilfst.

Die kleinste logische Einheit in React ist eine Komponente, wenn eine Kopplungsbeziehung zwischen Komponenten besteht. In diesem Artikel werden die verschiedenen Arten der Komponentenkommunikation in React vorgestellt.

Durch Induktion. Die Kommunikation zwischen beliebigen Komponenten kann in vier Arten der Kommunikation zwischen Komponenten eingeteilt werden, nämlich Eltern-Kind-Komponenten, Großvater-Enkel-Komponenten, Geschwisterkomponenten und beliebige Komponenten.
Es ist zu beachten, dass die ersten drei auch als willkürlich gezählt werden können Komponenten. Kategorie, die letzte ist also die universelle Methode

Eltern-Kind-Komponente

Die Kommunikation zwischen Eltern-Kind-Komponenten ist in zwei Situationen unterteilt: Kommunikation der Eltern-Kind-Komponente mit der Kind-Komponente Kommunikation mit der übergeordneten Komponente. Lassen Sie uns zunächst die Kommunikation der übergeordneten Komponente mit Unterkomponenten vorstellen.
Der traditionelle Ansatz ist in zwei Situationen unterteilt, nämlich die Parameterübergabe während der Initialisierung und den Methodenaufruf in der Instanzphase >

class Child {
    constructor(name) {
        // 获取dom引用
        this.$p = document.querySelector('#wp');

        // 初始化时传入name
        this.updateName(name);
    }
    updateName(name) {
        // 对外提供更新的api
        this.name = name;
    
        // 更新dom
        this.$p.innerHTML = name;
    }
}

class Parent {
    constructor() {
        // 初始化阶段
        this.child = new Child('yan');
        
        setTimeout(() => {
            // 实例化阶段
            this.child.updateName('hou');
        }, 2000);
    }
}

In React werden die beiden Situationen einheitlich behandelt. Der Grund dafür ist, dass React die Unterkomponente automatisch neu rendert, wenn die Attribute aktualisiert werden Im folgenden Beispiel wird die Unterkomponente nach 2 Sekunden automatisch neu gerendert und erhält den neuen Attributwert

class Child extends Component {
    render() {
        return <p>{this.props.name}</p>
    }
}

class Parent extends Component {
    constructor() {
        // 初始化阶段
        this.state = {name: 'yan'};

        setTimeout(() => {
            // 实例化阶段
            this.setState({name: 'hou'})
        }, 2000);
    }
    render() {
        return <Child name={this.state.name} />
    }
}

Sehen wir uns an, wie Unterkomponenten mit übergeordneten Komponenten kommunizieren. Es gibt zwei traditionelle Methoden Die Rückruffunktion besteht darin, eine Nachrichtenschnittstelle für die Unterkomponente bereitzustellen

Sehen wir uns zunächst die Rückruffunktion an. Der Vorteil der Rückruffunktion besteht beispielsweise darin, dass sie sehr einfach ist dass es während der Initialisierung übergeben werden muss und nicht zurückgezogen werden kann und nur eine Funktion übergeben werden kann

class Child {
    constructor(cb) {
        // 调用父组件传入的回调函数，发送消息
        setTimeout(() => { cb() }, 2000);
    }
}

class Parent {
    constructor() {
        // 初始化阶段，传入回调函数
        this.child = new Child(function () {
            console.log('child update')
        });
    }
}

Schauen wir uns zunächst die Nachrichtenschnittstellenmethode an. Zuerst benötigen Sie eine Basisklasse, die veröffentlichen und Zum Beispiel wird unten ein einfaches

implementiert. In der tatsächlichen Produktion können Sie von anderen geschriebene Klassenbibliotheken wie @jsmini/event direkt verwenden, um die Nachrichtenbasisklasse zu erben , und dann abonniert die übergeordnete Komponente die Nachricht der untergeordneten Komponente, sodass die untergeordnete Komponente mit der übergeordneten Komponente kommunizieren kann

EventEimtterDer Vorteil der Nachrichtenschnittstelle besteht darin, dass sie überall abonniert und mehrmals abonniert werden kann. Der Nachteil besteht darin, dass die Einführung der Nachrichtenbasisklasse

// 消息接口，订阅发布模式，类似绑定事件，触发事件
class EventEimtter {
    constructor() {
        this.eventMap = {};
    }
    sub(name, cb) {
        const eventList = this.eventMap[name] = this.eventMap[name] || {};
        eventList.push(cb);
    }
    pub(name, ...data) {
        (this.eventMap[name] || []).forEach(cb => cb(...data));
    }
}

class Child extends EventEimtter {
    constructor() {
        super();
        // 通过消息接口发布消息
        setTimeout(() => { this.pub('update') }, 2000);
    }
}

class Parent {
    constructor() {
        // 初始化阶段，传入回调函数
        this.child = new Child();
        
        // 订阅子组件的消息
        this.child.sub('update', function () {
            console.log('child update')
        });
    }
}

Backbone.js sowohl Rückruffunktionen als auch Nachrichtenschnittstellenmethoden unterstützt Schauen wir uns das Beispiel von React an. Die Enkelkomponente bezieht sich hier nicht nur auf Großvater und Enkel, sondern im Allgemeinen auf die Kommunikation zwischen Vorfahren und Nachkommen. Vielleicht haben wir das Problem der Eltern-Kind-Komponentenkommunikation anhand der Reduktionsmethode gelöst Die Antwort auf die Großvater-Enkel-Komponente besteht darin, Attribute Schicht für Schicht zu übergeben und die Kommunikation zwischen Großvater und Enkel in mehrere Eltern-Kind-Komponenten zu zerlegen.

Der Vorteil der Schicht-für-Schicht-Übertragung ist, dass es sehr einfach ist und mit vorhandenem Wissen gelöst werden kann. Das Problem besteht darin, dass es viel Code verschwendet und sehr umständlich ist. Die Komponenten in der Mitte, die als Brücken dienen, führen viele Attribute ein, die nicht dazu gehören >

In React können Vorfahrenkomponenten über den Kontext Eigenschaften direkt an Nachkommenkomponenten weitergeben. Es ist ein bisschen wie beim Wurmloch in Star Trek. Durch die spezielle Kontextbrücke können Nachrichten über jede Ebene hinweg an Nachkommenkomponenten weitergegeben werden

Wie öffnet man dieses Wurmloch zwischen Komponenten, die kommunizieren müssen? Es ist eine bidirektionale Deklaration erforderlich, d. h. das Deklarieren der Attribute auf der Vorgängerkomponente und das anschließende Platzieren der Attribute auf der Vorgängerkomponente. Hier ist eine Beispiel

Der Vorteil von

class Child extends Component {
    constructor(props) {
        setTimeout(() => { this.props.cb() }, 2000);
    }
    render() {
        return <p></p>
    }
}

class Parent extends Component {
    render() {
        return <Child cb={() => {console.log('update')}} />
    }
}

Kontext besteht darin, dass es die Mühe der schichtweisen Übertragung ersparen und die Sichtbarkeit von Daten durch bidirektionale Deklaration steuern kann. Es ist eine Lösung, wenn es viele Schichten gibt Die Nachteile liegen ebenso auf der Hand wie bei globalen Variablen. Wenn sie nicht kontrolliert werden, kann es leicht zu Verwirrung kommen und es besteht auch das Problem der doppelten Namensabdeckung.

Mein persönlicher Vorschlag ist, dass einige schreibgeschützte Informationen geteilt werden von allen Komponenten können mithilfe des Kontexts übergeben werden, z. B. angemeldete Benutzerinformationen usw.

Tipps: React Router übergibt Routing-Attribute über den Kontext

Geschwisterkomponenten

Wenn die beiden Komponenten Brüder sind, können Sie die übergeordnete Komponente als Brücke für die Kommunikation zwischen den beiden Komponenten verwenden. Dies ist eigentlich der Hauptmodulmodus.

Im folgenden Beispiel die beiden Unterkomponenten Verwenden Sie die übergeordnete Komponente, um die Funktion der Anzeige digitaler Synchronisation zu erreichen

import PropTypes from 'prop-types';

class Child extends Component {
    // 后代组件声明需要读取context上的数据
    static contextTypes = {
        text: PropTypes.string
    }
    render() {
        // 通过this.context 读取context上的数据
        return <p>{this.context.text}</p>
    }
}


class Ancestor extends Component {
    // 祖先组件声明需要放入context上的数据
    static childContextTypes = {
        text: PropTypes.string
    }
    // 祖先组件往context放入数据
    getChildContext() {
        return {text: 'yanhaijing'}
    }
}

Der Vorteil des Hauptmodulmusters ist die Entkopplung der Kopplungsbeziehung zwischen zwei Unterkomponenten in die Kopplung zwischen der Unterkomponente und der übergeordneten Komponente Komponente. Die Vorteile des Sammelns verstreuter Dinge liegen auf der Hand und können bessere Ergebnisse bringen. Wartbarkeit und Skalierbarkeit

Jede Komponente

Jede Komponente enthält die oben genannten drei Beziehungen Zur oben vorgestellten Methode gibt es für zwei beliebige Komponenten drei Möglichkeiten zur Kommunikation, nämlich die gemeinsame Vorfahrenmethode, die Nachrichten-Middleware und die Statusverwaltung.

基于我们上面介绍的爷孙组件和兄弟组件，只要找到两个组件的共同祖先，就可以将任意组件之间的通信，转化为任意组件和共同祖先之间的通信，这个方法的好处就是非常简单，已知知识就能搞定，缺点就是上面两种模式缺点的叠加，除了临时方案，不建议使用这种方法

另一种比较常用的方法是消息中间件，就是引入一个全局消息工具，两个组件通过这个全局工具进行通信，这样两个组件间的通信，就通过全局消息媒介完成了

还记得上面介绍的消息基类吗？下面的例子中，组件1和组件2通过全局event进行通信

class EventEimtter {
    constructor() {
        this.eventMap = {};
    }
    sub(name, cb) {
        const eventList = this.eventMap[name] = this.eventMap[name] || {};
        eventList.push(cb);
    }
    pub(name, ...data) {
        (this.eventMap[name] || []).forEach(cb => cb(...data));
    }
}

// 全局消息工具
const event = new EventEimtter;

// 一个组件
class Element1 extends Component {
    constructor() {
        // 订阅消息
        event.sub('element2update', () => {console.log('element2 update')});
    }
}

// 另一个组件。
class Element2 extends Component {
    constructor() {
        // 发布消息
        setTimeout(function () { event.pub('element2update') }, 2000)
    }
}

消息中间件的模式非常简单，利用了观察者模式，将两个组件之间的耦合解耦成了组件和消息中心+消息名称的耦合，但为了解耦却引入全局消息中心和消息名称，消息中心对组件的侵入性很强，和第三方组件通信不能使用这种方式

小型项目比较适合使用这种方式，但随着项目规模的扩大，达到中等项目以后，消息名字爆炸式增长，消息名字的维护成了棘手的问题，重名概率极大，没有人敢随便删除消息信息，消息的发布者找不到消息订阅者的信息等

其实上面的问题也不是没有解决办法，重名的问题可以通过制定规范，消息命名空间等方式来极大降低冲突，其他问题可以通过把消息名字统一维护到一个文件，通过对消息的中心化管理，可以让很多问题都很容易解决

如果你的项目非常大，上面两种方案都不合适，那你可能需要一个状态管理工具，通过状态管理工具把组件之间的关系，和关系的处理逻辑从组建中抽象出来，并集中化到统一的地方来处理，Redux就是一个非常不错的状态管理工具

除了Redux，还有Mobx，Rematch，reselect等工具，本文不展开介绍，有机会后面单独成文，这些都是用来解决不同问题的，只要根据自己的场景选择合适的工具就好。

Das obige ist der detaillierte Inhalt vonAnalyse und Vergleich der Kommunikation zwischen traditionellen Komponenten und der Kommunikation zwischen React-Komponenten (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!