AntD 学习到的小技巧

记录一些小技巧

• Promise，它的核心奥义是什么？是 resolve 与 reject.例如下面经典的用法.最为核心的就是代码里面的resolve, reject这两个方法。 Promise 就是一个链路，它是有各种 then,then,then 连起来的，规定好了调用顺序，然后呢，链路的触发点就是这个resolve,reject方法的调用，只要调用，整个链路就会按规则执行，然后整个链路就结束了。就像放爆竹，resolve,reject 就是引信，点完就没了，没法控制与改变它了。

new Promise((resolve, reject) => {}).then(success, failed);

用法来自与 rc-motion 这个组件， 里面有个 useStepQueue 与 useState 这两个 hook，代码如下：

//useStepQueue
const result = callback(step);
if (result === SkipStep) {
  setStep(nextStep);
} else {
  nextFrame((info) => {
    function doNext() {
      if (info.isCanceled()) return;

      setStep(nextStep);
    }

    if (result === DoStep) {
      doNext();
    } else {
      //注意这一行，result 来自与下面的方法调用
      Promise.resolve(result).then(() => doNext());
    }
  });
}
// useState
if (nextStep === STEP_PREPARE) {
  const onPrepare = eventHandlers[STEP_PREPARE];
  if (!onPrepare) {
    return SkipStep;
  }
  // 这个方法会返回一个Promise
  return onPrepare(getDomElement());
}
// PopupInner
//这里返回一个Promise, 但是Promise 里面并没有执行什么异步操作，只是把resolve 存了下来。然后再将来的某个时间调用，这样就一路执行下去， PopupInner -> useState -> useStepQueue, 这个就是链路的顺序。
function onShowPrepare() {
  return new Promise((resolve) => {
    prepareResolveRef.current = resolve;
  });
}

// 例如
prepareResolveRef.current(123);