NiceModal（重新思考|NiceModal：重新思考 React 中的弹窗使用方式） NiceModal：重新思考React中的弹窗

在开始进入正题之前，先看看一些与弹窗有关的有趣场景。
一些有趣的真实场景案例一：全局弹窗

文章图片

【NiceModal（重新思考|NiceModal：重新思考 React 中的弹窗使用方式）】上图是掘金的登录弹窗，未登录状态下触发该弹窗展示的时机有很多，比如：

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

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

function App() { const [visible, setVisible] = useState(false); const [otherLoginData, setOtherLoginData] = useState(); // other logic ...return (
setVisible(false)} otherLoginData=https://www.it610.com/article/{otherLoginData} />); }

这样会带来一些问题：

内部逻辑在组件渲染的时候就会执行，即使弹窗处于隐藏状态
额外的复杂度。由于存在多个触发时机，需要将 setVisible 以及 setOtherLoginData 透传至
内部的多个子组件，你可以选择通过 props 一层一层的传递进去（鬼知道有多少层！），也可以引入工具进行状态共享，但不论怎样，这都不是一件容易的事；
随着类似的弹窗越来越多，根组件会维护很多弹窗组件的状态...天知道为什么展示一个弹窗需要在多个文件里反复横跳。

展示一个弹窗，为什么会变得如此复杂？

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

除了上述全局弹窗的场景，还有一种场景也很让人头疼。
案例二：存在分支以及依赖关系的弹窗

NiceModal（重新思考|NiceModal：重新思考 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(, mountNode); }; LoginModal.hide = () => { mountNode && ReactDOM.render(, 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.hide()} visible={modal.visible} onCancel={() => modal.hide()} afterClose={() => modal.remove()} > Hello {name}! ); });

和原先基于 antd 自定义一个弹窗组件非常相似，只不过弹窗显隐相关的 props（如 visible/hide/remove）是通过 useModal 获取，最外层则通过 NiceModal.create 将组件进行一层封装（高阶组件）。
使用弹窗
在使用弹窗之前，需要在Root 节点引入

import NiceModal from '@ebay/nice-modal-react'; ReactDOM.render( , document.getElementById('root'), );

随后便可在任意地方通过 NiceModal.show 展示先前自定义的弹窗：

import NiceModal from '@ebay/nice-modal-react'; import MyAntdModal from './my-antd-modal'; // created by above codefunction App() { const showAntdModal = () => { // Show a modal with arguments passed to the component as props NiceModal.show(MyAntdModal, { name: 'Nate' }) }; return (Nice Modal Examples); }

以上指引参考自 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 ( {children} ); }; 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 */} ))} ); }; const create =>( Comp: React.ComponentType): React.FC => ({ id }) => { const modals = useContext(NiceModalContext); const shouldMount = Boolean(modals[id]); if (!shouldMount) { return null; } return ( {/* 找到对应 ID 的参数，传入内部真实组件 */} ); };

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