这是一个创建于 1337 天前的主题，其的信息可能已经有所发展或是发生改变。
在 A 组件上推送了某个消息，可以让不同级的组件 B 监听，并执行相应的任务。
我首先想到了使用 Context ，保存一个变量，A 改变这个变量，B 使用 useEffect 监听变化。
或者是使用 hox.js
或者是使用 浏览器的 CustomEvent 。
上述感觉都不够优雅
我首先想到了使用 Context ，保存一个变量，A 改变这个变量，B 使用 useEffect 监听变化。
或者是使用 hox.js
或者是使用 浏览器的 CustomEvent 。
上述感觉都不够优雅
 | 1 WildCat 2022-02-16 21:42:33 +08:00 Redux? |
 | 2 tatu 2022-02-16 21:43:34 +08:00 rxjs? |
 | 3 seki 2022-02-16 21:43:56 +08:00  1 思路很多，比如 + 加一个 event emitter + 加入 store + rxjs 就看你为什么会觉得不优雅了 |
 | 4 ddiu8081 2022-02-16 22:17:55 +08:00 via iPhone Recoil? A 组件 set ，B 组件 useValve |
 | 5 rrfeng 2022-02-16 22:21:23 +08:00 via Android 5 这时候 angular 的方便就体现出来了！可以直接通过 service 发布 /订阅 事件，跨多远都没关系。 |
 | 6 hanai 2022-02-1 22:42:18 +08:00 event bus postMessage |
 | 7 Rocketer 2022-02-16 23:00:00 +08:00 via iPhone angular 是用 rxjs 实现的，你也可以在 react 里使用 rxjs 。只是 angular 全面使用 rxjs 而 react 会有很多 promise ，混着写算不算另一种不优雅？ |
 | 8 theohateonion 2022-02-16 23:04:30 +08:00 为什么不够优雅呢？你觉得优雅的方式是什么呢？ Context + useEffect 就是一个简单的 pubsub ，不过缺乏统一的地方去管理这些订阅，可能是个问题。 |
 | 10 Leviathann 2022-02-16 23:07:15 +08:00 react 比较推崇单向数据流 单一信源 所以就弄个 store |
 | 11 sweetcola 2022-02-17 00:10:16 +08:00 可能你是觉得都用到了 Context （要写 Provider ）不够优雅吗？ 看看 https://www.npmjs.com/package/react-signal-slot 这个符不符合你的想法，就是个不用写 Provider 的 event bus |
 | 12 dayeye2006199 2022-02-17 07:01:46 +08:00 context 不用引入额外依赖，多好 |
 | 13 xsen 2022-02-17 07:06:44 +08:00 封装个 event bus ，这样不管是 react 组件、还是纯 js/ts 模块，都可以双向通讯 跨 ui 框架了，还可以服用 |
 | 14 fliu2476 2022-02-17 08:59:49 +08:00 zustand 香的不行 |
 | 15 fancy2020 2022-02-17 09:16:14 +08:00 redux? |
 | 16 gouflv 2022-02-17 09:17:27 +08:00 via iPhone 提问前，请先自己定义好什么样叫优雅 |
 | 17 boxz 2022-02-17 09:23:40 +08:00 jotai |
 | 18 Latin 2022-02-17 09:28:16 +08:00 useContext or Redux |
 | 19 karott7 2022-02-17 09:59:33 +08:00 Redux 就好了 |
 | 20 ChefIsAwesome 2022-02-17 10:01:18 +08:00 有一种“优雅”是必须用一个技术栈内的方案解决问题。 另外一种“优雅”是融会贯通，跳出当前技术栈，从更广的范围内，找到最简单的方案解决问题。 明显你这就是个常规小问题，怎么解决还不是看你心情。 |
 | 21 Hanggi 2022-02-17 10:11:34 +08:00 有人提到 Angular ， 确实在有大量数据操作的场景里，Angular 很简单很方便。 跨组件状态共享，最传统的方法就是引入 Redux ，但是需要一点学习成本，且代码量会变多不少。好处就 i 是熟悉了之后可以进行统一的状态管理。 个人比较推荐 Recoil ，使用起来非常简单高效，而且性能也很好。 |
 | 22 CodingNaux 2022-02-17 10:13:53 +08:00 既然是消息，那就使用订阅发布吧，custom event 之类可以呀，如果是一个简单的页面，怎么简单怎么来 不是什么数据都要放 redux ，也不是什么情况都需要 redux rxjs 有点成本 |
 | 23 einq7 2022-02-17 10:14:05 +08:00 useContext 结合 useReducer |
 | 24 nanxiaobei 2022-02-17 10:52:33 +08:00 |
 | 25 charlesliu OP 这确实是一个很小的 case ，不过也是因为小，就没有什么比较统一的方案，就感觉自己的实现方法不够简洁、通用，所以才来 v 站上咨询一下，开阔视野。 如果是我个人的话，我也倾向于使用 rxjs ，不过在公司项目中这样使用，不见得引入它是个好的选择。 感谢各位回答 |
 | 26 charlie21 2022-02-17 11:22:51 +08:00 useEffect 官网示例 开销最小做法 https://zh-hans.reactjs.org/docs/hooks-effect.html 关于何为优雅 https://www.zhihu.com/question/47161776/answer/111488644#人们怎么编程: 先为对应的问题建立一个模型, 然后用代码设计出一套 DSL, 再将代码进行运算以解决问题。也就是 越符合你自己在脑海之中建立的模型，你就会觉得越优雅。这是你一个人的事，而这往往和你自己对问题的定义有关，而和问题的实际规模无关。相比优雅，对别人以优雅之名给杀鸡人推荐杀牛刀的警惕是更必要的 |
 | 27 AyaseEri 2022-02-17 14:10:31 +08:00 dispatchEvent addEventListener |
 | 28 Incrus 2022-02-17 15:43:44 +08:00 via iPhone Mobx |
 | 29 star7th 2022-02-17 17:24:49 +08:00 强烈推荐 Mobx https://cn.mobx.js.org/ |
 | 30 freedomT 2022-02-17 17:48:42 +08:00 1 mitt |
 | 31 a935855375 2022-02-17 18:41:31 +08:00 Angular 通过 EventEmitter 。 可以搞个类似的 EventBus 服务 |
 | 32 linl1n 2022-02-17 18:47:08 +08:00 via iPhone 安利 Mobx |
 | 33 code4you 2022-02-17 19:03:40 +08:00 Mobx +1 |
 | 34 flashback313 2022-02-17 19:32:23 +08:00 Context 其实就是你要的答案，其他都是 pubsub 类 |
 | 35 2218675712 2022-02-17 20:00:35 +08:00 via Android concent.js |
 | 36 mxT52CRuqR6o5 2022-02-17 20:57:50 +08:00 如果是希望减少外部依赖的话，那就 context 或者 props 硬传 |
 | 37 Cbdy 2022-02-17 21:01:00 +08:00 document.dispatchEvent |
Select Language