组件间通信⽅式一共有如下几种:
1.⽗组件向⼦组件通讯
⽗组件可以通过向⼦组件传
props
的⽅式来实现父到子的通讯。
2.⼦组件向⽗组件通讯
可以采用 props + 回调 的⽅式。
当⽗组件向⼦组件传递 props 进⾏通讯时,可在该 props 中传递一个回调函数,当⼦组件调⽤该函数时,可将⼦组件中想要传递给父组件的信息作为参数传递给该函数。由于 props 中的函数作⽤域为⽗组件⾃身,因此可以通过该函数内的 setState 更新到⽗组件上。
3.兄弟组件通信
可以通过兄弟节点的共同⽗节点,再结合以上2种⽅式,由⽗节点转发信息,实现兄弟间通信。
4.跨层级通信
可以采用 React 中的 Context
来实现跨越多层的全局数据通信。
Context
设计的⽬的是为在⼀个组件树中共享 “全局” 数据,如:当前已登录的⽤户、界面主题、界面语⾔等信息。
5.发布订阅模式
发布者发布事件,订阅者监听到事件后做出反应。
我们可以通过引⼊
event
模块进⾏此种方式的通信。
6.全局状态管理⼯具
可以借助Redux
或 Mobx
等全局状态管理⼯具进⾏通信,它们会维护⼀个全局状态中⼼(Store),并可以根据不同的事件产⽣新的状态。