在react项目中使用mitt(发布订阅库)

在react项目中如何使用mitt

1. 使用create-react-app创建项目和下载依赖

npx create-react-app a
npm i mitt

2. 新建一个mitt.js文件,把mitt()对象暴露出去

import mitt from "mitt";
export const emitter = mitt();

3. 在App.js文件使用mitt()对象上的on方法监听事件名,这个事件名最好是个常量,因为后面触发事件的时候需要传入相同的事件名.

import './App.css';
import One from './One'
import { emitter } from './mitt'
emitter.on('test', (data) => {
  console.log(data)
})
function App() {
  return (
    <div className="App">
      app
      <One />
    </div>
  );
}

export default App;

4. 新建One.js文件,使用mitt()对象上的emit方法触发定义好的事件,也可以使用off方法取消订阅.

import { emitter } from './mitt'
export default function One() {
    return (
        <>
            <h1>One</h1>
            <button onClick={() => { emitter.emit('test', { name: 'chp' }) }}>emit</button>
            <button onClick={() => { emitter.off('test') }}>off</button>
        </>
    )
}

5. 总结

• mitt()对象上主要有三个方法on,emit,off,分别是注册订阅,触发订阅,取消订阅
• 可以新建一个mitt.js文件暴露emitter对象,方便管理.