React一种少用的组件通信方式,但是简单

组件通信

  1. 通过父组件传递给子组件,如果是兄弟组件,则找到共同父组件,重新往下面传
  2. 通过redux,把数据放在redux,触发动作;实际上也是数据在根节点
  3. 观察者模式(发布订阅)

对于第一种,大家知道react也都知道,

对于第二种,大家知道redux也都知道,

本文说一下第三种

直接看代码

先了解一下这个原理,代码很简单,不到30行

然后就把那个核心函数mainPerson放到React项目里面;

不过稍微要变一下,因为要保存各种通信的组件,直接就单例返回这个对象了;

如下:

页面

---------

这个功能就实现了;

---

但是,凡是加入到对象里面的数据,都会受到这个信息;

可以扩展一下,点对点通信;

页面

就实现了,当然还可以对函数进行改造

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2018-05-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端开发

一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)

2285
来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

3686
来自专栏沈唁志

解决修改 Linux 下的 PHP 环境变量不生效的方法

这个问题出现服务器有多个 PHP 版本,php -v和phpinfo()显示两个不同的版本

2041
来自专栏程序猿

虚拟主机WordPresss安装教程

虚拟主机WordPresss安装教程 1. 请在网上下载最新版本的WordPress程序。本文以WordPress-4.2-zh_CN.zip为例安装 2. ...

6128
来自专栏逸鹏说道

Ubuntu16.04下的NetCore环境搭建

跨平台系列汇总:http://www.cnblogs.com/dunitian/p/4822808.html#linux VSCode安装:http://www...

2865
来自专栏Python疯子

[iOS开发bundle identifier修改不了(解决bundle ID无法修改的问题

iOS开发bundle identifier修改不了(解决bundle ID无法修改的问题)

2532
来自专栏SDNLAB

OpenStack基于修改ip和配置文件的多节点部署

本文主要是提供一种新的思路。OpenStack的liberty版本比Juno更加容易部署,也使用了Linux bridge的方式,使得网络的问题进一步的减少。 ...

3698
来自专栏smy

jquery及原生javascript对jsonp解决跨域问题实例详解

jquery方式 ---- 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', ...

3997
来自专栏哲学驱动设计

WPF Commanding Overview 的笔记

整个命令系统的流程如下: CommandManager 负责监听一些它关注的属性的更改(例如:Focus、Click),当界面上有此类事件发生时,它会通知所有...

1888
来自专栏Python疯子

iOS 之多个 button 的单选与多选

下面是实现的代码: 首先创建10个button(一个一个写太麻烦了,个人认为还是用一个 for 循环来创建比较好)

991

扫码关注云+社区

领取腾讯云代金券