@kne/use-event v0.1.5

use-event

描述

实现了事件总线的hooks，是fbemitter的再封装

安装

npm i --save @kne/use-event

概述

可以通过这个钩子构造一个事件总线来实现事件的发布订阅。

这通常可以用于某些特殊场景，但是还是要优先考虑context做组件的数据共享而不是滥用事件。

事件绑定后不能触发的可能情况

• 检查项目中是否安装了多个包版本，导致绑定事件的对象和触发事件的对象不是一个对象实例
• 是否事件触发在事件绑定之前已经执行了，事件绑定后没有事件触发

示例

示例代码

• 基本事件示例
• 展示了在一个组件里监听事件，在另一个组件里面触发事件的简单场景
• _useEvent(@kne/use-event),button(antd/lib/button),_message(antd/lib/message)

const { default: useEvent } = _useEvent;
const { useEffect, createContext, useContext } = React;
const { default: message } = _message;
const { default: Button } = button;

const context = createContext({});
const { Provider } = context;

const SubComponent = () => {
  const { emitter } = useContext(context);
  return <Button onClick={() => {
    emitter.emit('event', '我是一个按钮触发事件');
  }}>触发事件</Button>;
};

const BaseExample = () => {
  const emitter = useEvent({debug:true,name:'test'});
  useEffect(() => {
    const sub = emitter.addListener('event', (args) => {
      message.success(`事件event触发，参数:${args}`);
    });
    return () => {
      sub && sub.remove();
    };
  }, [emitter]);
  return <Provider value={{ emitter }}>
    <SubComponent/>
  </Provider>;
};

render(<BaseExample/>);

API

const emitter = useEvent(debug);

返回值 emitter api

监听事件后返回对象