《Umi Hooks》官网笔记-useEventEmitter

useEventEmitter

在多个组件之间进行事件通知有时会让人非常头疼,借助 EventEmitter ,可以让这一过程变得更加简单。

在组件中调用 useEventEmitter 可以获得一个 EventEmitter 的实例:

const event$ = useEventEmitter()

在组件多次渲染时,每次渲染调用 useEventEmitter 得到的返回值会保持不变,不会重复创建 EventEmitter 的实例。

通过 props 或者 Context ,可以将 event$ 共享给其他组件。然后在其他组件中,可以调用 EventEmitteremit 方法,推送一个事件,或是调用 useSubscription 方法,订阅事件。

event$.emit('hello')
event$.useSubscription(val => {
  console.log(val)
})

useSubscription 会在组件创建时自动注册订阅,并在组件销毁时自动取消订阅。

对于子组件通知父组件的情况,我们仍然推荐直接使用 props 传递一个 onEvent 函数。而对于父组件通知子组件的情况,可以使用 forwardRef 获取子组件的 ref ,再进行子组件的方法调用。 useEventEmitter 适合的是在距离较远的组件之间进行事件通知,或是在多个组件之间共享事件通知。

一、API

const result: {
    // 发送一个事件通知
    emit;
    // 订阅事件
    useSubscription
} = useEventEmitter<T>();
文章作者: koral
文章链接: http://luokaiii.github.io/2020/04/21/前端/UmiHooks/Advanced/useEventLEmitter/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自