This topic created in 1553 days ago, the information mentioned may be changed or developed.
在 A 组件上推送了某个消息,可以让不同级的组件 B 监听,并执行相应的任务。
我首先想到了使用 Context ,保存一个变量,A 改变这个变量,B 使用 useEffect 监听变化。
或者是使用 hox.js
或者是使用 浏览器的 CustomEvent 。
上述感觉都不够优雅
37 replies • 2022-02-17 21:01:00 +08:00
 |
|
2
tatu Feb 16, 2022
rxjs?
|
 |
|
3
seki Feb 16, 2022 1
思路很多,比如 + 加一个 event emitter + 加入 store + rxjs
就看你为什么会觉得不优雅了
|
 |
|
4
ddiu8081 Feb 16, 2022 via iPhone
Recoil? A 组件 set ,B 组件 useValve
|
 |
|
5
rrfeng Feb 16, 2022 via Android 5
这时候 angular 的方便就体现出来了!可以直接通过 service 发布 /订阅 事件,跨多远都没关系。
|
 |
|
6
hanai Feb 16, 2022
event bus postMessage
|
 |
|
7
Rocketer Feb 16, 2022 via iPhone
angular 是用 rxjs 实现的,你也可以在 react 里使用 rxjs 。只是 angular 全面使用 rxjs 而 react 会有很多 promise ,混着写算不算另一种不优雅?
|
 |
|
8
theohateonion Feb 16, 2022
为什么不够优雅呢?你觉得优雅的方式是什么呢? Context + useEffect 就是一个简单的 pubsub ,不过缺乏统一的地方去管理这些订阅,可能是个问题。
|
 |
|
10
Leviathann Feb 16, 2022
react 比较推崇单向数据流 单一信源 所以就弄个 store
|
 |
|
13
xsen Feb 17, 2022
封装个 event bus ,这样不管是 react 组件、还是纯 js/ts 模块,都可以双向通讯 跨 ui 框架了,还可以服用
|
 |
|
16
gouflv Feb 17, 2022 via iPhone
提问前,请先自己定义好什么样叫优雅
|
 |
|
17
boxz Feb 17, 2022
jotai
|
 |
|
18
Latin Feb 17, 2022
useContext or Redux
|
 |
|
20
ChefIsAwesome Feb 17, 2022
有一种“优雅”是必须用一个技术栈内的方案解决问题。 另外一种“优雅”是融会贯通,跳出当前技术栈,从更广的范围内,找到最简单的方案解决问题。 明显你这就是个常规小问题,怎么解决还不是看你心情。
|
 |
|
21
Hanggi Feb 17, 2022
有人提到 Angular , 确实在有大量数据操作的场景里,Angular 很简单很方便。
跨组件状态共享,最传统的方法就是引入 Redux ,但是需要一点学习成本,且代码量会变多不少。好处就 i 是熟悉了之后可以进行统一的状态管理。
个人比较推荐 Recoil ,使用起来非常简单高效,而且性能也很好。
|
 |
|
22
CodingNaux Feb 17, 2022
既然是消息,那就使用订阅发布吧,custom event 之类可以呀,如果是一个简单的页面,怎么简单怎么来 不是什么数据都要放 redux ,也不是什么情况都需要 redux rxjs 有点成本
|
 |
|
23
einq7 Feb 17, 2022
useContext 结合 useReducer
|
 |
|
25
charlesliu Feb 17, 2022
这确实是一个很小的 case ,不过也是因为小,就没有什么比较统一的方案,就感觉自己的实现方法不够简洁、通用,所以才来 v 站上咨询一下,开阔视野。
如果是我个人的话,我也倾向于使用 rxjs ,不过在公司项目中这样使用,不见得引入它是个好的选择。
感谢各位回答
|
 |
|
27
AyaseEri Feb 17, 2022
dispatchEvent addEventListener
|
 |
|
28
Incrus Feb 17, 2022 via iPhone
Mobx
|
 |
|
31
a935855375 Feb 17, 2022
Angular 通过 EventEmitter 。 可以搞个类似的 EventBus 服务
|
 |
|
32
linl1n Feb 17, 2022 via iPhone
安利 Mobx
|
 |
|
34
flashback313 Feb 17, 2022
Context 其实就是你要的答案,其他都是 pubsub 类
|
 |
|
35
litmusF Feb 17, 2022 via Android
concent.js
|
 |
|
36
mxT52CRuqR6o5 Feb 17, 2022
如果是希望减少外部依赖的话,那就 context 或者 props 硬传
|
 |
|
37
Cbdy Feb 17, 2022
document.dispatchEvent
|