React 组件通信之发布订阅模式

爱丽丝13 等级 512 0 0

React 通信

react的数据流是单向的, react 通信有以下几种方式:

  • 父向子通信: 传入props
  • 子向父通信:父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值
  • 父向孙通信:利用context传值。React.createContext()
  • 兄弟间通信:

​ 1、找一个相同的父组件,既可以用props传递数据,也可以用context的方式来传递数据。
​ 2、用一些全局机制去实现通信,比如redux等
​ 3、发布订阅模式

兄弟间通信 - 发布订阅模式

组件间通信需要引用一个类的实例,使用单例模式实现。

发布/订阅模式

在 发布/订阅模式 有 发布者订阅者,它们通过信道链接到一起。

其主要包含三个对象:

  • 发布者:消息的发布者,往信道中投递消息的对象。
  • 订阅者:订阅一个或者多个信道消息的对象。
  • 信道:每个信道都有一个名字,信道的实现细节对用户代码来说是隐藏的。

优点

  1. 松耦合:发布者和订阅者的通信是在用户代码之外处理的,通过信道降低了发布者和订阅者的耦合性
  2. 可扩展性:发布/订阅模式可以让系统在无论什么时候都可以扩展
  3. 灵活性:不需要担心不同的组件是如何组合在一起的

缺点

  1. 无法知道消息传送是成功的还是失败的,信道不会通知系统消息传送的状态
  2. 随着订阅者和发布者数量的增加,不断增加的消息传送回导致架构的不稳定,容易在负载大的时候出问题

单例模式

确保一个类仅有一个实例,并提供一个访问它的全局访问点。

代码实现

定义发布对象:

class SingletonPublish {
  constructor() {
    this.listenList = {};
    this.instance = null;
  }

  static getInstance() {
    if (!this.instance) {
      this.instance = new SingletonPublish();
    }
    return this.instance;
  }

  // 订阅者添加订阅事件
  addListen(key, fn) {
    if (!this.listenList[key]) {
      this.listenList[key] = [];
    }
    this.listenList[key].push(fn);
  }

  // 发布者发布消息,执行订阅者订阅事件
  trigger() {
    const key = Array.from(arguments).shift();
    const fns = this.listenList[key];
    if (!fns || fns.length === 0) {
      return false;
    }

    fns.forEach((fn) => {
      fn.apply(this, arguments);
    });
  }

  // 移除订阅事件
  remove(key, fn) {
    const fns = this.listenList[key];
    if (!fns || fns.length === 0) return;

    if (!fn) {
      this.listenList[key] = [];
    } else {
      for (let l = fns.length - 1; l >= 0; l--) {
        if (fn === fns[l]) {
          fns.splice(l, 1);
        }
      }
    }
  }
}

export default SingletonPublish.getInstance();

订阅者订阅一个back事件:

import SingletonPublish from '../singleton-publish';

// ...
SingletonPublish.addListen('back', () => {
  console.log('get -- back');
  SingletonPublish.remove('back', hasExitAndVisible);
});
// ...

发布者发布一个back消息:

import SingletonPublish from '../singleton-publish';

// ...
SingletonPublish.trigger('back');
//... 

观察者模式

在这种模式中,一个目标对象(被观察者)管理所有的依赖于它的对象(观察者),并且在它本身的状态发生变化的时候主动发出通知。

其主要包含两个对象:

  • 被观察者
  • 观察者

缺点

  1. 耦合问题: 每个观察者必须和被观察对象绑定在一起,这引入了耦合
  2. 性能问题:在最基本的实现中观察对象必须同步地通知观察者。这可能会导致性能瓶颈。
收藏
评论区

相关推荐

为什么 React 源码不用 TypeScript 来写?
周末的,看点轻松的吧,之前看过 React 的源码,比较好奇像 React 这样庞大的工程为什么没有用 TypeScript。 Facebook 工程师 Cat Chen 在知乎上(https://www.zhihu.com/question/378470381/answer/1079675543(https://www.zhihu.com/quest
《精通react/vue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件
前言 本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余. 之所以会写组件设计相关
《彻底掌握redux》之开发一个任务管理平台(上)
前言 redux是上手react开发的必经之路,也是目前react项目中使用的最流行状态管理库。虽然我们不使用redux也可以通过react的state和父子props进行基本的数据通信和项目开发,但是对于一个大型项目而言,往往考虑的更多的是代码结构和组件之间的通信,我们需要一种很优雅且有利于扩展的方式去开发我们的复杂系统,所以这种情况下使用redux是最佳
25、react入门教程
25、react入门教程 25、react入门教程 0. React介绍 0.1 什么是React? React(有时称为React.js 或ReactJS)是一
Angular vs React 最全面深入对比
Angular vs React 最全面深入对比 Angular vs React 最全面深入对比 本文参考文章:https://www.sitepoint.com/reactvsangul
Create React App
Create React App Create React App Facebook开源了React前端框架(MIT Licence),也同时提供了React脚手架 createreactapp(ht
一起走进React核心团队
当我刚来Facebook的React团队工作时,我不确定接下来的工作会怎么样。表面看,React核心团队似乎很大!但事实证明,像Eli White和Sebastian McKenzie这样的人都在React Native团队。考虑加上那些维护开源库的维护者,比如Chakra UI、Framer Motion,React核心团队人数似乎能填满整个体育场!但事实
Hook 简介 – React
Hook 简介 _Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “count” 的 sta
使用 State Hook – React
使用 State Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。中使用下面的例子介绍了 Hook:import React, { useState } from 'react';function Example() { //
使用 Effect Hook – React
使用 Effect Hook_Hook_ 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。_Effect Hook_ 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from 'reac
React 之设计原则
编写该文档的目的是,使开发者更易于了解我们如何决策 React(应该做哪些,不应该做哪些),以及我们的开发理念。我们非常欢迎来自社区的贡献,但如若违背这些理念,实非我们所愿。 注意: 文章描述了 React 自身的设计原则,而非 React 组件或应用,阅读者需要对 React 有深入的理解。 如需 React 的入门文档,查看 。
React 之源码概览
本节将对 React 的源码架构,约定及其实现进行概述。如果您想 的开发,我们希望这份指南可以帮助你更加轻松地进行修改。我们并不推荐在 React 应用中遵循这些约定。有许多约定是历史原因,并且之后也许会有所修改。 项目根目录当克隆 之后,你们将看到项目根目录的信息: 包含元数据(比如 package.json)和 React 仓库中所有
React 之Virtual DOM 及内核
什么是 Virtual DOM?Virtual DOM 是一种编程概念。在这个概念里, UI 以一种理想化的,或者说“虚拟的”表现形式被保存于内存中,并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做。这种方式赋予了 React 声明式的 API:您告诉 React 希望让 UI 是什么状态,React 就确保 DOM 匹
React 之代码分割
打包大多数 React 应用都会使用 , 或 这类的构建工具来打包文件。打包是一个将文件引入并合并到一个单独文件的过程,最终形成一个 “bundle”。接着在页面上引入该 bundle,整个应用即可一次性加载。 示例App文件:// app.jsimport { add } from './math.js';console.lo
面向初学者的 React 路由-React Router的完整指南!
因此,您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人,都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。什么是React Router?React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入