手写一个发布订阅模式

发布订阅模式:

1. 订阅某个数据
2. 数据发生变化时执行订阅函数

Redux和React的状态管理都是用发布订阅实现的

代码如下:

import { useCallback, useEffect } from 'react';

var observer = {
  listen: {},
  state: {},
  // 订阅
  subscribe: function (type, fn) {
    if (!this.listen[type]) { this.listen[type] = [] };
    this.listen[type].push(fn);
  },
  // 修改状态
  setState: function (type, value) {
    this.state[type] = value;
    const fns = this.listen[type];
    fns.forEach(fn => fn(value));
  },
  // 取消订阅
  unSubscribe: function (type, fn) {
    const fns = this.listen[type];
    const idx = fns.find(f => f === fn);
    fns.splice(idx, 1);
  }
};


function App() {
  useEffect(() => {
    observer.subscribe('count', function (count) {
      console.log(`count的变成了:${count}`);
    });
    observer.subscribe('time', function (nowTime) {
      console.log(`现在的时间是:${nowTime}`);
    });
  }, [])

  const handleClick = useCallback(() => {
    observer.setState('count', (observer.state.count || 0) + 1);
  }, []);

  const handleClick1 = useCallback(() => {
    observer.setState('time', Date.now());
  }, []);

  const unSubscribe = useCallback(() => {
    observer.unSubscribe('count', handleClick);
  }, []);

  return (
    <div className="App">
      <button onClick={handleClick}>增加</button>
      <button onClick={handleClick1}>更新时间</button>
      <button onClick={unSubscribe}>取消订阅</button>
    </div>
  );
}

export default App;