📦 改进一个简单朴素的 react 数据管理层 NOVUS

/**
 * 纯函数的数据更新函数，同步执行
 *
 * @param state 要更新的属性或者函数
 */
protected setState = <K extends keyof S>(
  state: Pick<S, K> | ((states: S) => Pick<S, K>)
) => {
  if (typeof state === "function") {
    const newState = state(this.state)
    this.state = { ...this.state, ...newState }
  } else {
    this.state = { ...this.state, ...state }
  }
  this.notifyChanges()
}
/**
 * 通知上层触发订阅的 connect 转换函数，每次修改 state 必须触发！！！
 */
protected notifyChanges = () => {
  // 需要通知订阅器就同步去通知，立即马上，同一个队列中的多次调用会有卡顿问题
  novus.notifyChangesListeners(this.namespace)
}

/**
 * 通过标志变量控制多次的事件通知在一个 EventLoop 中只触发一次
 */
protected waitingNotify = false
/**
 * 通知上层触发订阅的 connect 转换函数，每次修改 state 必须触发！！！
 */
protected notifyChanges = () => {
  /** v1 需要通知订阅器就同步去通知，立即马上，同一个队列中的多次调用会有卡顿问题
  novus.notifyChangesListeners(this.namespace)
  **/
  // v2 需要通知订阅器，稍等一下，下个任务队列结束就通知，先把这个任务队列的全部 setState 执行完毕
  // setState 是同步的，但是事件通知不是同步
  if (this.waitingNotify) return
  this.waitingNotify = true
  new Promise((r) => r()).then(() => {
    novus.notifyChangesListeners(this.namespace)
    this.waitingNotify = false
  })
}

setState(oldState => {
  let newState = mapStatetoHooks(novus.models, novus)
  /**
   * 这个地方
   * 1. 视图与状态是一一对应，如果 state 没有变，那么不应该通知渲染组件
   * 2. 如果按照事件来说，这里确实有 setState 的调用，应该通知渲染组件，组件是否影响子组件可以用 Pure 子组件里控制
   */
  // ↓ 浅比较一下判断是否需要更新 state，触发订阅
  for (const key in oldState) {
    if (oldState[key] !== newState[key]) {
      return newState
    }
  }
  return oldState
  // ↓ 不比较，只要有 setState 动作，就更新 state
  // return newState;
})

let [state, setState] = useState<T>(mapStatetoHooks(novus.models, novus))

const initState = useRef<T | null>(null);
if(initState.current === null) {
  initState.current = mapStatetoHooks(novus.models, novus);
}
let [state, setState] = useState<T>(initState.current);

const [isTitleChanged, isContentChanged, diffStyle] = useNovus(
  models => {
    return [
      models.noteModel.state.isTitleChanged,
      models.noteModel.state.isContentChanged,
      models.noteModel.state.diffStyle,
    ]
  },
  ["noteModel"] // <------------!!
)

// 提供一个获取 model 的方法，使用这个方法在初始化状态的时候收集依赖
const mapStatetoProps = getModel => {
  return [
    getModel('noteModel').state.isTitleChanged,
    getModel('noteModel').state.isContentChanged,
  ]
}
const deps = new Set([])
const getModel = (namespace) => {
  deps.add(namespace)                 // 函数里面收集
  return novus.getModel(namespace)
}
initState = mapStatetoProps(getModel)

const mapStatetoProps = models => {
  return [
    models.noteModel.state.isTitleChanged,
    models.noteModel.state.isContentChanged,
  ]
}
const deps = new Set([])
// 使用 Proxy 代理的形式，拦截对 models 的访问
const handler = {
    get: function(obj, prop) {
      deps.add(prop)                                // 在代理里面获取
      return prop in obj ? obj[prop] : undefined;
    }
};
const models = new Proxy(novus.models, handler);
initState = mapStatetoProps(models)

let initState;
const _deps = useRef<string[] | undefined>(deps);
if (typeof deps === "undefined") {
  // 一个依赖列表
  const autoDeps = new Set([]);
  // 代理的处理函数
  const handler = {
    // 每次获取元素的时候代理到这里
    get(target: TModelsPool, key: string) {
      // 收集这次的 model 命名空间依赖
      if (target[key]) {
        autoDeps.add(key);
      }
      // 不破坏预期的处理逻辑
      return target[key];
    },
  };
  // 在原 novus.models 上添加这个代理
  const autoModels = new Proxy(novus.models, handler);
  // 第一次初始化的时候运行这个收集函数
  initState = mapStatetoHooks(autoModels, novus);
  // 代替未指定的依赖列表
  _deps.current = Array.from(autoDeps);
} else {
  initState = mapStatetoHooks(novus.models, novus);
}
let [state, setState] = useState<T>(initState);

const [isTitleChanged, isContentChanged] = useNovus(models => {
  const { state } = models.noteModel
  return [
    state.isTitleChanged,
    state.isContentChanged,
  ]
})

/**
  * 触发器，更新完数据仓之后必须触发才能通知 UI 变更
  *
  * @param namespace model 的命名空间 id，只会触发订阅对应 model 的 mapStatetoProps 函数。留空表示触发全部
  */
notifyChangesListeners = (namespace?: string) => {
  // TODO: 顺序执行全部的事件通知，如果这个比较多，可能直接阻塞了 CPU，无法响应用户操作，造成卡顿
  this.listeners.forEach(v => {
    if (
      typeof namespace === "undefined" ||
      v[1].length === 0 ||
      v[1].includes(namespace)
    ) {
      v[0]()
    }
  })
}

notifyChangesListeners = (namespace?: string) => {
  this.listeners.forEach((v, key) => {
    if (typeof namespace === "undefined" || v[1].length === 0 || v[1].includes(namespace)) {
      // 将需要通知的函数放进队列等待通知
      this.needNotifiedListeners.add(key);
    }
  });
  // 先把需要的工作记录，可以被打断，然后再通知各个订阅
  this.startNotifies();
};
// 一个待渲染工作池
needNotifiedListeners = new Set<string>([]);
startNotiTime: number;
// 被触发就会一直按照后面的逻辑执行，直到渲染工作池清空
startNotifies = () => {
  // 如果之前的遗留还在，先取消，在这次渲染中继续
  if(idleHandler) _cancelIdleCallback(idleHandler);
  // 执行之前先标记下时间，在递归的过程中作为时间标记
  this.startNotiTime = new Date().getTime();
  // 去执行判断逻辑
  this.doTheNotifies();
};
// 确实去通知订阅的部分，根据不同的执行可能在不同的宏任务队列被执行
doTheNotifies = () => {
  if (this.needNotifiedListeners.size > 0) {
    const nextId = this.needNotifiedListeners.values().next().value;
    // 先删除索引，在后面执行的过程中如果这个订阅又被调用了，有重新执行的机会
    this.needNotifiedListeners.delete(nextId);
    // 实际执行的部分，可能的耗时操作
    this.listeners.get(nextId)[0]();
    
    // 👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
    // 如果运行完用户的计算之后还有时间，继续递归，否则等待下一次宏任务
    if (new Date().getTime() - this.startNotiTime < 16) {
      this.doTheNotifies();
    } else {
      idleHandler = _requestIdleCallback(this.startNotifies);
    }
    // 👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆👆
  }
};