React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React弹窗NiceModal

React弹窗使用方式NiceModal重新思考

作者:海秋

这篇文章主要为大家介绍了React弹窗使用方式NiceModal重新思考分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

一些有趣的真实场景

在开始进入正题之前,先看看一些与弹窗有关的有趣场景 🤔。

案例一:全局弹窗

上图是掘金的登录弹窗,未登录状态下触发该弹窗展示的时机有很多,比如:

开发者往往会基于第三方组件库定义一个 <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>
  );
}

这样会带来一些问题:

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

以上案例来自 @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 ret = await LoginModal.show({ otherLoginData });
  const ret = await Ohter1Modal.show();
} catch (error) {
  const ret = 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 的封装,好处显而易见:

简单实现思路

如果你对 NiceModal 的实现原理有兴趣,那么可以思考一下我们之前的痛点是什么?案例一中描述了两大主要痛点:

案例二的链式调用在脱离声明式组件后反而变得很容易,利用好 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 时注册),注入 ID
  const toRender = visibleModalIds
    .filter((id) => MODAL_REGISTRY[id])
    .map((id) => ({
      id,
      ...MODAL_REGISTRY[id],
    }));
  return (
    <>
      {toRender.map((t) => (
        {/* 渲染 NiceModal.create 创建的高阶组件 */}
        <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 并绑定至对应的高阶组件)。

推荐阅读

以上就是React弹窗使用方式NiceModal重新思考的详细内容,更多关于React弹窗使用方式的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文