React 有什么比较优雅的跨组件通信方法吗

[charlesliu]

在 A 组件上推送了某个消息，可以让不同级的组件 B 监听，并执行相应的任务。

我首先想到了使用 Context ，保存一个变量，A 改变这个变量，B 使用 useEffect 监听变化。

或者是使用 hox.js

或者是使用 浏览器的 CustomEvent 。

上述感觉都不够优雅

[WildCat]

Redux?

[tatu]

rxjs?

[seki]

思路很多，比如
+ 加一个 event emitter
+ 加入 store
+ rxjs

就看你为什么会觉得不优雅了

[ddiu8081]

Recoil? A 组件 set ，B 组件 useValve

[rrfeng]

这时候 angular 的方便就体现出来了！可以直接通过 service 发布 /订阅 事件，跨多远都没关系。

[hanai]

event bus
postMessage

[Rocketer]

angular 是用 rxjs 实现的，你也可以在 react 里使用 rxjs 。只是 angular 全面使用 rxjs 而 react 会有很多 promise ，混着写算不算另一种不优雅？

[theohateonion]

为什么不够优雅呢？你觉得优雅的方式是什么呢？ Context + useEffect 就是一个简单的 pubsub ，不过缺乏统一的地方去管理这些订阅，可能是个问题。

[solos]

@rrfeng angular 真香

[Leviathann]

react 比较推崇单向数据流 单一信源
所以就弄个 store

[sweetcola]

可能你是觉得都用到了 Context （要写 Provider ）不够优雅吗？

看看 https://www.npmjs.com/package/react-signal-slot 这个符不符合你的想法，就是个不用写 Provider 的 event bus

[dayeye2006199]

context 不用引入额外依赖，多好

[xsen]

封装个 event bus ，这样不管是 react 组件、还是纯 js/ts 模块，都可以双向通讯
跨 ui 框架了，还可以服用

[fliu2476]

zustand 香的不行

[fancy2020]

redux?

[gouflv]

提问前，请先自己定义好什么样叫优雅

[boxz]

jotai

[Latin]

useContext or Redux

[karott7]

Redux 就好了

[ChefIsAwesome]

有一种“优雅”是必须用一个技术栈内的方案解决问题。
另外一种“优雅”是融会贯通，跳出当前技术栈，从更广的范围内，找到最简单的方案解决问题。
明显你这就是个常规小问题，怎么解决还不是看你心情。