关于react.js:NiceModal重新思考-React-中的弹窗使用方式

在开始进入正题之前，先看看一些与弹窗无关的乏味场景 🤔。

上图是掘金的登录弹窗，未登录状态下触发该弹窗展现的机会有很多，比方：

点击 Header 上的登录按钮
文章列表页或详情页点赞以及评论文章
发沸点、评论沸点以及点赞沸点
…

开发者往往会基于第三方组件库定义一个 <LoginModal />，而后将其挂载至 Root 组件下：

function App() {const [visible, setVisible] = useState(false);
  const [otherLoginData, setOtherLoginData] = useState();

  // other logic ...

  return (
    <div className="app">
      <Main />
      <LoginModal
        visible={visible}
        onCancel={() => setVisible(false)}
        otherLoginData={otherLoginData}
      />
    </div>
  );
}

这样会带来一些问题：

<LoginModal /> 外部逻辑在组件渲染的时候就会执行，即便弹窗处于暗藏状态
额定的复杂度。因为存在多个触发机会，须要将 setVisible 以及 setOtherLoginData 透传至 <Main /> 外部的多个子组件，你能够抉择通过 props 一层一层的传递进去（鬼晓得有多少层！），也能够引入工具进行状态共享，但不论怎样，这都不是一件容易的事；
随着相似的弹窗越来越多，根组件会保护很多弹窗组件的状态 … 天知道为什么展现一个弹窗须要在多个文件里重复横跳。

展现一个弹窗，为什么会变得如此简单？

以上案例来自 @ebay/nice-modal-react，稍作批改

除了上述全局弹窗的场景，还有一种场景也很让人头疼。

用户头疼，开发者也头疼

弹窗 1 确认弹出弹窗 2，勾销则弹出弹窗 3，弹窗 2 以及弹窗 3 也存在对应的分支逻辑，子孙满堂轻而易举，若依照惯例申明式弹窗组件的实现，十分恐怖！

解脱所谓的 React 哲学：数据驱动视图（view = f(data)），回归原始的 window.confirm 以及 window.alert，很多问题迎刃而解：

let mountNode: HTMLDivElement | null = null;

LoginModal.show = (props?: LoginModalProps) => {if (!mountNode) {mountNode = document.createElement('div');
    document.body.appendChild(mountNode);
  }
  // 通过 ReactDOM.render 将组件渲染到固定的节点
  ReactDOM.render(<LoginModal {...props} visible />, mountNode);
};

LoginModal.hide = () => {mountNode && ReactDOM.render(<LoginModal {...props} visible={false} />, mountNode);
};

LoginModal.destroy = () => {
  // 通过 ReactDOM.unmountComponentAtNode 卸载节点
  mountNode && ReactDOM.unmountComponentAtNode(mountNode);
};

通过以上代码解决，能够间接通过 LoginModal.show({otherLoginData}) 展现弹窗（hide 以及 destroy 同理）。

对于存在依赖关系的弹窗，则能够通过返回 Promise 进行链式调用，应用形式如下，此处不过多开展。

try {const ret1 = await LoginModal.show({ otherLoginData});
  const ret2 = await Ohter1Modal.show();} catch (error) {const ret3 = await Other2Modal.show();
}

因为该计划是通过 ReactDOM.render 将组件渲染到一个新节点，脱离了原始的 React 上下文，在某些强依赖 Context 的场景会显得有些麻烦。

某天在逛 github 的时候发现了 @ebay/nice-modal-react，让咱们看看 ebay 的开发者是如何让弹窗在 React 下变得足够 Nice。

import {Modal} from 'antd';
import NiceModal, {useModal} from '@ebay/nice-modal-react';

export default NiceModal.create(({name}) => {
  // Use a hook to manage the modal state
  const modal = useModal();
  return (
    <Modal
      title="Hello Antd"
      onOk={() => modal.hide()}
      visible={modal.visible}
      onCancel={() => modal.hide()}
      afterClose={() => modal.remove()}
    >
      Hello {name}!
    </Modal>
  );
});

和原先基于 antd 自定义一个弹窗组件十分类似，只不过弹窗显隐相干的 props（如 visible/hide/remove）是通过 useModal 获取，最外层则通过 NiceModal.create 将组件进行一层封装（高阶组件）。

在应用弹窗之前，须要在Root 节点引入 <NiceModal.Provider />

import NiceModal from '@ebay/nice-modal-react';
ReactDOM.render(
  <React.StrictMode>
    <NiceModal.Provider>
      <App />
    </NiceModal.Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

随后便可在任意中央通过 NiceModal.show 展现先前自定义的弹窗：

import NiceModal from '@ebay/nice-modal-react';
import MyAntdModal from './my-antd-modal'; // created by above code

function App() {const showAntdModal = () => {
    // Show a modal with arguments passed to the component as props
    NiceModal.show(MyAntdModal, { name: 'Nate'})
  };
  return (
    <div className="app">
      <h1>Nice Modal Examples</h1>
      <div className="demo-buttons">
        <button onClick={showAntdModal}>Antd Modal</button>
      </div>
    </div>
  );
}

以上指引参考自 NiceModal 官网文档

通过 NiceModal 的封装，益处不言而喻：

调用过程洁净优雅
组件仍旧存在于上下文中（能够自定义地位，默认在 Provider 下）
show/hide 办法返回值为 Promise，不便链式调用（通过 useModal().resolve(val) 等办法扭转 Promise 状态）

如果你对 NiceModal 的实现原理有趣味，那么能够思考一下咱们之前的痛点是什么？案例一中形容了两大次要痛点：

根组件渲染弹窗以及保护弹窗状态过多 —— NiceModal.Provider 内对立渲染弹窗
显隐相干状态以及办法须要共享 —— 库外部保护对应状态，通过对立 API（show/hide/useModal）裸露

案例二的链式调用在脱离申明式组件后反而变得很容易，利用好 Promise 即可。

const Provider: React.FC = ({children}) => {
  // 初始弹窗信息
  const [modals, _dispatch] = useReducer(reducer, initialState);
  dispatch = _dispatch;
  return (<NiceModalContext.Provider value={modals}>
      {children}
      <NiceModalPlaceholder />
    </NiceModalContext.Provider>
  );
};

const NiceModalPlaceholder: React.FC = () => {const modals = useContext(NiceModalContext);
  // 依据弹窗信息找到须要渲染的弹窗 ID（NiceModal.show 时更新）const visibleModalIds = Object.keys(modals).filter((id) =>
    Boolean(modals[id])
  );

  // 找到对应创立的高阶组件(NiceModal.show 时注册）const toRender = visibleModalIds
    .filter((id) => MODAL_REGISTRY[id])
    .map((id) => ({
      id,
      ...MODAL_REGISTRY[id],
    }));

  return (
    <>
      {toRender.map((t) => ({/* 渲染 NiceModal.create 创立的高阶组件，并注入 ID */}
        <t.comp key={t.id} id={t.id} />
      ))}
    </>
  );
};

const create =
  <P extends Record<string, unknown>>(Comp: React.ComponentType<P>): React.FC<P & NiceModalHocProps> =>
  ({id}) => {const modals = useContext(NiceModalContext);
    const shouldMount = Boolean(modals[id]);

    if (!shouldMount) {return null;}
    return (<NiceModalIdContext.Provider value={id}>
        {/* 找到对应 ID 的参数，传入外部实在组件 */}
        <Comp {...(modals[id].args as P)} />
      </NiceModalIdContext.Provider>
    );
  };

了解上述三个办法后，show/hide/useModal 等办法就是基于 dispatch 函数进行弹窗数据（Context）的更新从而触发视图更新（其中 show 办法多一步注册，生成 ID 并绑定至对应的高阶组件）。

eBay/nice-modal-react: A modal state manager for React.
Modal.confirm 违反了 React 的模式吗？

关于react.js:NiceModal重新思考-React-中的弹窗使用方式

一些乏味的实在场景

案例一：全局弹窗

案例二：存在分支以及依赖关系的弹窗

不那么通用的解决方案

可能是最好的弹窗实际

创立弹窗

应用弹窗

简略实现思路

举荐浏览