antd-Modal.confirm

前言

在提示交互的情况下，函数式调用比组件式调用逻辑更清晰，代码也更简洁，如antd中,modal.confirm。

antd-Modal.confirm

在antd中,modal.confirm是使用函数调用来进行弹窗交互的。

//使用语法
Modal.confirm({
    title: 'Confirm',
    icon: <ExclamationCircleOutlined />,
    content: 'Bla bla ...',
    okText: '确认',
    cancelText: '取消',
  });

关于Modal.confirm源码

antd-design 版本：3.10.2,现在最新版本已经4.x了，但代码上变动不多。

export default function confirm(config: ModalFuncProps) {
  //在body中插入个div，用于后续的弹窗的渲染
  const div = document.createElement("div");
  document.body.appendChild(div);

  //confirm 初始化配置
  let currentConfig = { ...config, close, visible: true } as any;

  //弹窗关闭函数
  function close(...args: any[]) {
    //在初始化配置上在加上弹窗的配置
    currentConfig = {
      ...currentConfig,
      visible: false,
      // 弹窗关闭隐藏后的调用，一般confirm的消息弹出，多次弹出情况较少，
      // 所以直接调用destroy进行注销
      afterClose: destroy.bind(this, ...args),
    };
    //这里判断是否是16,
    if (IS_REACT_16) {
      //隐藏渲染
      render(currentConfig);
    } else {
      //直接注销
      destroy(...args);
    }
  }
  //更新组件
  function update(newConfig: ModalFuncProps) {
    currentConfig = {
      ...currentConfig,
      ...newConfig,
    };
    render(currentConfig);
  }
  //弹窗的注销
  function destroy(...args: any[]) {
    const unmountResult = ReactDOM.unmountComponentAtNode(div);
    if (unmountResult && div.parentNode) {
      div.parentNode.removeChild(div);
    }
    const triggerCancel =
      args && args.length && args.some((param) => param && param.triggerCancel);
    if (config.onCancel && triggerCancel) {
      config.onCancel(...args);
    }
  }

  //弹窗的渲染
  function render(props: any) {
    // ReactDOM.render 对已经渲染过的组件是不会重复重新渲染的，是做的更新操作，
    // 具体参考ReactDOM.render源码
    ReactDOM.render(<ConfirmDialog {...props} />, div);
  }

  render(currentConfig);

  //返回注销、更新方法
  return {
    destroy: close,
    update,
  };
}

从源码中可以看出confirm其实是通过对外提供配置，然后ReactDom.render将弹框组件进行了渲染而达到的。