React-跨组件通讯-events

原创

杨不易呀

发布于 2023-09-30 14:36:37

2820

发布于 2023-09-30 14:36:37

文章被收录于专栏：杨不易呀

跨组件事件通讯

通过 context 我们已经能够实现跨组件通讯
但是通过 context 我们只能实现 从上往下 传递
不能实现 从下往上 传递或者 同级 之间的传递的问题

经过博主前面的介绍我们知道, 子父组件之间通讯, 是通过回调函数的方式实现的，兄弟组件之间通讯, 也是通过父组件, 通过回调函数的方式，但是如果通过回调函数, 传统的方式我们需要一层一层的传递, 比较复杂，所以我们可以借助一个第三方库 (events) 来实现跨组件事件通讯。

使用 events 库实现跨组件通讯

安装 events 库

npm install events

创建 EventEmitter 对象：eventBus 对象
监听事件：eventBus.addListener("事件名称", 监听函数);
移除事件：eventBus.removeListener("事件名称", 监听函数);
发出事件：eventBus.emit("事件名称", 参数列表);

在全局创建一个全局的事件管理器对象

import {EventEmitter} from 'events';

const eventBus = new EventEmitter();

兄弟组件通讯

假如说我们现在要实现一个兄弟之间的组件通讯，那么该如何利用 events 进行实现呢，代码如下：

import React from 'react';
import {EventEmitter} from 'events';

const eventBus = new EventEmitter();

class B extends React.Component {
    render() {
        return (
            <div>
                <p>B</p>
                <button onClick={() => {
                    this.btnClick()
                }}>B按钮
                </button>
            </div>
        )
    }

    btnClick() {
        eventBus.emit('say', 'yangbuyiya', 18);
    }
}

class A extends React.Component {
    componentDidMount() {
        eventBus.addListener('say', this.aFn.bind(this));
    }

    render() {
        return (
            <div>
                A
            </div>
        )
    }

    aFn(name, age) {
        console.log(name, age);
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                <A/>
                <B/>
            </div>
        )
    }
}

export default App;

如上当中有一个新的知识点，在 A 组件当中，我利用了一下 React 当中的生命周期方法，在 A 组件被渲染也就是创建的时候，这个方法不用我们手动调用, React 会自动帮我们调用，当前组件被渲染到界面上的时候, React 就会自动调用。

父子通讯

如上介绍的是兄弟之间的通讯，接下来来看一波父子之间的通讯：

import React from 'react';
import {EventEmitter} from 'events';

const eventBus = new EventEmitter();

class Son extends React.Component {
    render() {
        return (
            <div>
                <p>son</p>
                <button onClick={() => this.btnClick()}>Son按钮</button>
            </div>
        )
    }

    btnClick() {
        eventBus.emit('say', 'yangbuyiya', 18);
    }
}

class Father extends React.Component {
    render() {
        return (
            <div>
                <Son/>
            </div>
        )
    }
}

class App extends React.Component {
    componentDidMount() {
        eventBus.addListener('say', this.appFn.bind(this));
    }

    componentWillUnmount() {
        eventBus.removeListener('say', this.appFn.bind(this));
    }

    render() {
        return (
            <div>
                <Father/>
            </div>
        )
    }

    appFn(name, age) {
        console.log(name, age);
    }
}

export default App;

如果通过 events 来实现跨组件的通讯，那么为了性能考虑, 应该在组件卸载的时候移除掉对应的事件, 可以通过 componentWillUnmount 来实现，该方法也是 React 组件的一个生命周期方法, 这个生命周期方法我们不用手动调用, React 会自动调用, 当前组件被卸载的时候, React 就会自动调用。