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

[charlesliu]

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

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

或者是使用 hox.js

或者是使用 浏览器的 CustomEvent 。

上述感觉都不够优雅

[Hanggi]

有人提到 Angular ， 确实在有大量数据操作的场景里，Angular 很简单很方便。

跨组件状态共享，最传统的方法就是引入 Redux ，但是需要一点学习成本，且代码量会变多不少。好处就 i 是熟悉了之后可以进行统一的状态管理。

个人比较推荐 Recoil ，使用起来非常简单高效，而且性能也很好。

[CodingNaux]

既然是消息，那就使用订阅发布吧，custom event 之类可以呀，如果是一个简单的页面，怎么简单怎么来
不是什么数据都要放 redux ，也不是什么情况都需要 redux
rxjs 有点成本

[einq7]

useContext 结合 useReducer

[nanxiaobei]

https://www.v2ex.com/t/834435

[charlesliu]

这确实是一个很小的 case ，不过也是因为小，就没有什么比较统一的方案，就感觉自己的实现方法不够简洁、通用，所以才来 v 站上咨询一下，开阔视野。

如果是我个人的话，我也倾向于使用 rxjs ，不过在公司项目中这样使用，不见得引入它是个好的选择。

感谢各位回答

[charlie21]

useEffect 官网示例 开销最小做法
https://zh-hans.reactjs.org/docs/hooks-effect.html

关于何为优雅
https://www.zhihu.com/question/47161776/answer/111488644#人们怎么编程: 先为对应的问题建立一个模型, 然后用代码设计出一套 DSL, 再将代码进行运算以解决问题。也就是 越符合你自己在脑海之中建立的模型，你就会觉得越优雅。这是你一个人的事，而这往往和你自己对问题的定义有关，而和问题的实际规模无关。相比优雅，对别人以优雅之名给杀鸡人推荐杀牛刀的警惕是更必要的

[AyaseEri]

dispatchEvent
addEventListener

[Incrus]

Mobx

[star7th]

强烈推荐 Mobx https://cn.mobx.js.org/

[freedomT]

mitt

[a935855375]

Angular 通过 EventEmitter 。 可以搞个类似的 EventBus 服务

[linl1n]

安利 Mobx

[code4you]

Mobx +1

[flashback313]

Context 其实就是你要的答案，其他都是 pubsub 类

[2218675712]

concent.js

[mxT52CRuqR6o5]

如果是希望减少外部依赖的话，那就 context 或者 props 硬传

[Cbdy]

document.dispatchEvent