Analyse et comparaison de la communication entre composants traditionnels et de la communication entre composants React (exemple de code)

Le contenu de cet article concerne l'analyse et la comparaison de la communication entre les composants traditionnels et la communication entre les composants React (exemples de code). J'espère qu'il sera utile aux amis dans le besoin. vous. aider.

La plus petite unité logique dans React est un composant. S'il existe une relation de couplage entre les composants, ils communiqueront. Cet article présentera les différentes manières de communiquer entre les composants dans React

Par induction, La communication entre composants arbitraires peut être classée en quatre types de communication inter-composants, à savoir les composants parent-enfant, les composants grand-père-petit-fils, les composants frères et sœurs et les composants arbitraires
Il convient de noter que les trois premiers peuvent également être considérés comme arbitraires. composants., donc la dernière est la méthode universelle

Composant parent-enfant

La communication entre les composants parent-enfant est divisée en deux situations : la communication du composant parent vers le composant enfant et le composant enfant. communication avec le composant parent. Présentons d'abord le composant parent. Les composants communiquent avec les sous-composants
L'approche traditionnelle est divisée en deux situations, à savoir le passage de paramètres lors de l'initialisation et l'invocation de méthode dans la phase d'instance. >

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

L'unification des deux situations dans React Le traitement se fait via les attributs. La raison pour laquelle cela est possible est que React restituera automatiquement le sous-composant lorsque les attributs sont mis à jour

Dans l'exemple. ci-dessous, le sous-composant sera automatiquement restitué après 2 secondes et obtiendra de nouvelles valeurs d'attribut

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} />
    }
}

Jetons un coup d'œil à la façon dont le sous-composant communique avec le composant parent. , l'une est une fonction de rappel et l'autre consiste à déployer une interface de message pour le sous-composant

Premièrement, regardons l'exemple de la fonction de rappel. L'avantage de la fonction de rappel est qu'elle est très simple. . L'inconvénient est qu'elle doit être transmise lors de l'initialisation et ne peut pas être retirée. Une seule fonction peut être transmise dans

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

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

Jetons un coup d'œil au message ci-dessous. La méthode d'interface nécessite d'abord une classe de base. qui peut publier des messages et s'y abonner. Par exemple, un simple

est implémenté ci-dessous. Dans la production réelle, vous pouvez directement utiliser des bibliothèques de classes écrites par d'autres, telles que @jsmini/event, qui héritent de la classe de base de messages. la possibilité de publier des messages, puis le composant parent s'abonne au message du composant enfant, qui peut réaliser la fonction du composant enfant communiquant avec le composant parent EventEimtter

L'avantage de l'interface de message est qu'elle peut être abonné n'importe où et plusieurs fois, vous pouvez également vous désabonner. L'inconvénient est que c'est un peu gênant. Vous devez introduire la classe de base de message

// 消息接口，订阅发布模式，类似绑定事件，触发事件
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 prend en charge à la fois les fonctions de rappel et les méthodes d'interface de message. , mais React a choisi un mode de fonction de rappel relativement simple, regardons l'exemple de React

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')}} />
    }
}

Le composant grand-père-petit-fils

Le composant père-fils peut en fait être considéré comme. un cas particulier de la composante grand-père-petit-fils. La composante petit-fils-petit-fils fait ici non seulement référence au grand-père et au petit-fils, mais plutôt à la communication entre les ancêtres et les composants descendants, qui peuvent être séparés par de nombreux niveaux. Problème de communication entre les composants parent et enfant. Selon la méthode de réduction, il est facile d'obtenir la réponse des composants grand-père et petit-enfant, c'est-à-dire de transmettre les attributs couche par couche. Le problème de la communication entre les composants parent-enfant est décomposé en communication. entre plusieurs composants parent-enfant

L'avantage du transfert couche par couche est qu'il est très simple et peut être résolu avec les connaissances existantes. Le problème est qu'il gaspille beaucoup de code et est très fastidieux. Le milieu sert de pont. Les composants introduiront de nombreux attributs qui ne s'appartiennent pas.

Dans React, les composants ancêtres peuvent directement transmettre des attributs aux composants descendants via le contexte, ce qui est un peu comme le trou de ver dans Star Trek Through. le pont spécial de contexte, les messages peuvent être transmis aux composants descendants à n'importe quel niveau

Comment ouvrir ce trou de ver entre les composants qui doivent communiquer ? Une déclaration bidirectionnelle est requise, c'est-à-dire déclarer les attributs sur le composant ancêtre, déclarer à nouveau les attributs sur le composant descendant, puis placer les attributs sur le composant ancêtre. Vous pouvez ensuite lire les attributs sur le composant descendant. exemple

L'avantage du

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'}
    }
}

contexte est qu'il peut éviter les problèmes de transmission couche par couche et contrôler la visibilité des données grâce à une déclaration bidirectionnelle. C'est une solution lorsqu'il y a plusieurs couches mais le ; les inconvénients sont également évidents, tout comme les variables globales sont les mêmes. Si elles ne sont pas contrôlées, cela peut facilement créer de la confusion, et il est également facile d'avoir le problème de la couverture de noms en double

Ma suggestion personnelle est que certains. les informations en lecture seule partagées par tous les composants peuvent être transmises en utilisant le contexte, telles que les informations des utilisateurs connectés, etc.

Conseils : React Router transmet les attributs de routage via le contexte Composants frères

Si les deux composants sont frères, le composant parent peut être utilisé comme pont pour permettre la communication entre les deux composants. Il s'agit en fait du mode module principal

Dans l'exemple ci-dessous. , les deux sous-composants réalisent la fonction d'affichage de la synchronisation numérique via le composant parent

L'avantage du modèle de module principal est le découplage. Il découple la relation de couplage entre deux sous-composants en couplage entre. le sous-composant et le composant parent. Les avantages de la collecte d'éléments dispersés sont très évidents et peuvent apporter une meilleure maintenabilité et évolutivité

class Parent extends Component {
    constructor() {
        this.onChange = function (num) {
            this.setState({num})
        }.bind(this);
    }
    render() {
        return (
            <p>
                <Child1 num={this.state.num} onChange={this.onChange}>
                <Child2 num={this.state.num} onChange={this.onChange}>
            </p>
        );
    }
}

Tout composant

Tout composant inclut les trois composants relationnels ci-dessus. les trois relations ci-dessus doivent donner la priorité à la méthode introduite ci-dessus. Pour tout Il existe trois façons de communiquer entre deux composants, à savoir la méthode ancêtre commune, le middleware de message et la gestion de l'état

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

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

还记得上面介绍的消息基类吗？下面的例子中，组件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等工具，本文不展开介绍，有机会后面单独成文，这些都是用来解决不同问题的，只要根据自己的场景选择合适的工具就好。

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!