传统组件间通信与React组件间通信的区分比较（代码示例）

网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于传统组件间通信与React组件间通信的分析对比（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式

通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，
需要注意的是前三个也可以算作任意组件的范畴，所以最后一个是万能方法

父子组件

父子组件间的通信分为父组件向子组件通信和子组件向父组件通信两种情况，下面先来介绍父组件向子组件通信，
传统做法分为两种情况，分别是初始化时的参数传递和实例阶段的方法调用，例子如下

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

在React中将两个情况统一处理，全部通过属性来完成，之所以能够这样是因为React在属性更新时会自动重新渲染子组件，
下面的例子中，2秒后子组件会自动重新渲染，并获取新的属性值

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

下面来看一下子组件如何向父组件通信，传统做法有两种，一种是回调函数，另一种是为子组件部署消息接口

先来看回调函数的例子，回调函数的优点是非常简单，缺点就是必须在初始化的时候传入，并且不可撤回，并且只能传入一个函数

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

class Parent {
    constructor() {
        // 初始化阶段，传入回调函数
        this.child = new Child(function () {
            console.log('child update')
        });
    }
}下面来看看消息接口方法，首先需要一个可以发布和订阅消息的基类，比如下面实现了一个简单的EventEimtter，实际生产中可以直接使用别人写好的类库，比如@jsmini/event，子组件继承消息基类，就有了发布消息的能力，然后父组件订阅子组件的消息，即可实现子组件向父组件通信的功能
消息接口的优点就是可以随处订阅，并且可以多次订阅，还可以取消订阅，缺点是略显麻烦，需要引入消息基类
// 消息接口，订阅发布模式，类似绑定事件，触发事件
class EventEimtter {
    constructor() {
        this.eventMap = {};
    }
    sub(name, cb) {
        const eventList = this.eventMap[name] = this.eventMap[name]   关键词：传统组件间通信与React组件间通信的区分比较（代码示例）