背景

对话框在前端开发应用中,是一种非常常用的界面模式。对话框作为一个独立的窗口,常常被用于信息的展示,输入信息,亦或者更多其他功能。但是项目的使用过程中,在某些场景下对话框用起来会有一些麻烦。例如:

场景一

如果想要在多个子组件(A、B)中控制一个对话框(C)的显示影藏,这个对话框必须在共有的父组件(MySalesOrders)中进行声明。

场景二

如果需要给对话框(C)传递参数,一般情况我们会使用 props 传入,意味着状态的管理必须也是子组件(A、B)的父组件或者更高一级进行管理和维护,但是其实这些状态可能只需要在子组件 A 或者 B 中维护。这种情况下,我们就需要自定义事件,将状态进行回传,比较麻烦。

const MySalesOrders: React.FC = () => {
  const [visible, setVisible] = React.useState(false);
  ...
  return (
  	<>
    	<A modalVisible={setVisible}/>      
			<B modalVisible={setVisible}/>
    	{
        visible ? (
          <C
            ...
          />
        ) : null
      }
    </>
  );
}

const A: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}

const B: React.FC = (props) => {
  ...
  return (
  	<>
    	<Button 
        onClick={() => {
            props.modalVisible(...)
        }} 
      />
    </>
  );
}

场景三

一个展示的对话框,对话框在不同的模块可能只是提示文案不一样,需要在不同的地方多次导入定义。例如系统中常用的提示成功、提示失败的对话框。

我们通常会定义一个通用的组件,在父组件中定义,然后使用时唤起,但是如果我们需要在不同的页面使用,我们就需要在不同的页面组件中使用引入定义。

这些场景都是在我在实际开发中都会用到的,并且我们开发中也是基本都是这样做的,虽然可以正常的使用。但是隐藏了几个小的问题。

问题一:难以扩展

如果和 MySalesOrders 同级的组件也要访问这个对话框(C)?又或者, MySalesOrders 下面的某个深层级的孙子组件也要能对话框(C)?前者意味着代码需要重构,继续提升状态到 MySalesOrders 组件的父组件;后者意味着业务逻辑处理更复杂,需要通过层层的自定义事件回调来完成。

问题二:维护问题

同一个组件,需要在不同的地方多次的导入定义。在系统中增加了大量重复的代码。代码很快就会变得臃肿,且难以理解和维护。

问题的本质

对上诉问题来说,本质在于:在我们日常的项目中应该哪里定义去对话框?又该如何和对话框进行数据交互?

对话框的本质

换一个角度再来看对话框,其实对话框本身是一个一对一或者一对多的 UI 模式。站在对话框的角度上,对话框本质上是一个「独立于其他界面的一个窗口,用于完成一个独立的功能」。

如果从视觉角度出发,你会发现在使用对话框的时候,你完全不会关心它是从哪个具体的组件中弹出来的,而只会关心对框本身的内容。比如说,成功和失败的对话框,它可能在 A 组件点出来的,也可能是 B 组件点出来的,亦或者其他组件点出来的。对话框的本质就决定了它是独立于各个组件之外的,

虽然很可能在一开始这个对话框的实现和某个组件非常高的相关度,但是在整个应用的不断开发和演进过程中,是很可能不断变化的。所以,在定义一个对话框的时候,其定位基本会等价于定义一个具有唯一 URL 路径的页面。只是前者由弹出层实现,后者是页面的切换。对于页面级别的 UI 切换,我们很容易理解,就是定义全局的路由嘛。那么同样的,如果我们以同样的方式去思考对话框,其实就是将对话框全局化,然后通过一个全局的机制来管理这些对话框。这个过程和页面 URL 的切换非常类似,那么我们就可以给每一个对话框定义一个全局唯一的 ID,然后通过这个 ID 去显示或者隐藏一个对话框,并且给它传递参数。

基于这样的设想,我们可以尝试使用全局的状态管理来设置我们的对话框。

全局的状态管理的对话框

整体的架构

具体实现

代码实现以 React 项目为主。

Redux - reducer 存储

利用 Redux 的 store 去存储每个对话框状态和参数。

export default (state = {
  hiding: {}
}, action: AnyAction) => {
  switch (action.type) {
    case CONSTANTS.modalShow:
      return {
        ...state,
        [action.payload.modalId]: action.payload.args || true,
        hiding: {
          ...state.hiding,
          [action.payload.modalId]: false,
        },
      };
    case CONSTANTS.modalHide:
      return action.payload.force
        ? {
          ...state,
          [action.payload.modalId]: false,
          hiding: { [action.payload.modalId]: false },
        }
        : { ...state, hiding: { [action.payload.modalId]: true } };
    default:
      return state;
  }
};

Redux - action 处理对话框的显示隐藏

两个 action ,分别用来显示和隐藏对话框。

export function showModal(modalId: string, args: any) {
  return {
    type: CONSTANTS.modalShow,
    payload: {
      modalId,
      args,
    },
  };
}

export function hideModal(modalId: string, force: any) {
  return {
    type: CONSTANTS.modalHide,
    payload: {
      modalId,
      force,
    },
  };
}

Hook - useCommonModal

定义一个 Hook,在其内部封装对 Store 的操作,从而实现对话框状态管理的逻辑重用。

export const useCommonModal = (modalId: string) => {
  const dispatch = useDispatch();

  const show = React.useCallback(
    (args?: any) => new Promise((resolve) => {
      commonmModalCallbacks[modalId] = resolve;
      dispatch(showModal(modalId, { ...args }));
    }),
    [dispatch, modalId],
  );

  const resolve = React.useCallback(
    (args?: any) => {
      if (commonmModalCallbacks[modalId]) {
        commonmModalCallbacks[modalId]({ ...args });
        delete commonmModalCallbacks[modalId];
      }
    },
    [modalId],
  );

  const hide = React.useCallback(
    (force?: any) => {
      dispatch(hideModal(modalId, force));
      delete commonmModalCallbacks[modalId];
    },
    [dispatch, modalId],
  );

  const args = useSelector((s: any) => s?.modalReducer?.[modalId]);
  const hiding = useSelector((s: any) => s?.modalReducer?.hiding?.[modalId]);

  return React.useMemo(
    () => ({ args, hiding, visible: !!args, show, hide, resolve }),
    [args, hide, show, resolve, hiding],
  );
};

创建对话框-容器模块

创建对话框时,使用容器模式,它会在对话框不可见时直接返回 null,从而不渲染任何内容;并且确保即使页面上定义了 100 个对话框,也不会影响页面性能。

export const createCommonModal = (modalId: string, Comp: any) => (props: any) => {
  const { visible, args } = useCommonModal(modalId);
  if (!visible) return null;
  return (
    <Comp
      {...args}
      {...props}
    />
  );
};

对话框返回值处理

往往在实际的使用中,可能在打开对话框进行操作之后需要将返回值返给调用者,有两种方式可以供参考:

  • callback:在传入参数时,传入一个回调函数,在进行操作完成之后,进行回调函数的调用。
const show = React.useCallback(
    (args?: any) => new Promise((resolve) => {
      commonmModalCallbacks[modalId] = resolve;
      //  args 中携带上 callback
      dispatch(showModal(modalId, { ...args }));
    }),
    [dispatch, modalId],
  );

// 调用
const modal = useCommonModal('modal-id');
modal.show({
  callback() {}
});

// 对话框解析参数
const modalReducer = useSelector((state: any) => state.modalReducer);
const { callback } = modalReducer?.['modal-id'];

//对话框触发
callback();
  • 将 show 和 resolve 两个函数通过 Promise 联系起来。通过临时变量,来存放 resolve 回调函数,在对话框中去调用 modal.resolve 来进行值的返回。
  const resolve = React.useCallback(
    (args?: any) => {
      if (commonmModalCallbacks[modalId]) {
        commonmModalCallbacks[modalId]({ ...args });
        delete commonmModalCallbacks[modalId];
      }
    },
    [modalId],
  );

// 调用
const modal = useCommonModal('modal-id');
modal.show(args).then(result => {});

// 对话框触发
const modal = useCommonModal('modal-id');
modal.resolve({ ... });

运行实例

global-modal

总结

分享了一种使用对话框的实践方式:利用全局状态来管理对话框。解决上文提到的在使用对话框遇到的问题。其核心思路在于从 UI 模式的角度出发,把对话框也可当做一个单独的页面,对话框的展示可用全局状态来管理,因此,用全局的方式去管理对话框就是一种非常合理的方式。从而让组件的语义更加清楚,代码更容易理解和维护。

并且对于对话框定义位置,其实可以分场景来甄别。系统某一个模块下的业务对话框,就只需要定义在这个业务模块的根组件下就可以了。对于全局都可能使用的公共对话框,那就可以定义在整个系统的根组件,系统任何地方都可以使用。定义的位置决定了对话框组件辐射的广度。

当然这种全局的状态管理对话框的方式,只是对原有的对话框操作做了一个增强,解决了一些场景下的问题,但是对于一些简单的对话框我们还是可以用常用的方式去管理和控制。两者是可以并存的,大家可以根据场景来定义使用哪一种方式。

参考

  • https://www.jb51.net/article/247814.htm
  • time.geekbang.org/column/arti…
  • https://www.jb51.net/article/247817.htm
  • ant.design/components/…
  • www.chkui.com/article/rea…

到此这篇关于如何在React项目中优雅的使用对话框的文章就介绍到这了,更多相关React使用对话框内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

如何在React项目中优雅的使用对话框的更多相关文章

  1. ios – React native链接到另一个应用程序

    如果是错误的,有人知道如何调用正确的吗?

  2. ios – React Native – 在异步操作后导航

    我正在使用ReactNative和Redux开发移动应用程序,我正面临着软件设计问题.我想调用RESTAPI进行登录,如果该操作成功,则导航到主视图.我正在使用redux和thunk所以我已经实现了异步操作,所以我的主要疑问是:我应该把逻辑导航到主视图?我可以直接从动作访问导航器对象并在那里执行导航吗?.我对组件中的逻辑没有信心.似乎不是一个好习惯.有没有其他方法可以做到这一点?

  3. 在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么?

    我已经挖掘了很多帖子试图使用cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.什么是使用反应原生的可可豆荚的正确方法?在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode8.2.1.这是我的过程,好奇我可能会出错:1)

  4. ios – React Native WebView滚动行为无法按预期工作

    如何确保滚动事件的行为与ReactNative应用程序中的浏览器相同?

  5. ios – React Native – BVLinearGradient – 找不到’React/RCTViewManager.h’文件

    谢谢.解决方法几天前我遇到了完全相同的问题.问题是在构建应用程序时React尚未链接.试试这个:转到Product=>Scheme=>管理方案…=>点击你的应用程序Scheme,然后点击Edit=>转到Build选项卡=>取消选中ParallelizeBuild然后点击标志添加目标=>搜索React,选择第一个名为React的目标,然后单击Add然后在目标列表中选择React并将其向上拖动到该列表中的第一个.然后转到Product=>再次清理并构建项目.这应该有所帮助.

  6. ios – React Native – NSNumber无法转换为NSString

    解决方法在你的fontWeight()函数中也许变成:

  7. ios – React native error – react-native-xcode.sh:line 45:react-native:command not found命令/ bin/sh失败,退出代码127

    尝试构建任何(新的或旧的)项目时出现此错误.我的节点是版本4.2.1,react-native是版本0.1.7.我看过其他有相同问题的人,所以我已经更新了本机的最新版本,但是我仍然无法通过xcode构建任何项目.解决方法要解决此问题,请使用以下步骤:>使用节点版本v4.2.1>cd进入[你的应用]/node_modules/react-native/packager>$sh./packager.s

  8. 反应原生 – 如何通过Xcode构建React Native iOS应用程序到设备?

    我试图将AwesomeProject应用程序构建到设备上.构建成功并启动屏幕显示,但后来我看到一个红色的“无法连接到开发服务器”屏幕.它表示“确保节点服务器正在运行–从Reactroot运行”npmstart“.看起来节点服务器已经运行,因为当我做npm启动时,我收到一个EADDRINUSE消息,表示该端口已经在使用.解决方法从设备访问开发服务器您可以使用开发服务器快速迭代设备.要做到这一点,你的

  9. 静音iOS推送通知与React Native应用程序在后台

    我有一个ReactNative应用程序,我试图获得一个发送到JavaScript处理程序的静默iOS推送通知.我看到的行为是AppDelegate中的didReceiveRemoteNotification函数被调用,但是我的JavaScript中的处理程序不会被调用,除非应用程序在前台,或者最近才被关闭.我很困惑的事情显然是应用程序正在被唤醒,并且它的didReceiveRemoteNotifi

  10. 如何为iOS的React Native设置分析

    所以我已经完成了一个针对iOS的ReactNative项目,但是我想在其中分析.我尝试了react-native-google-analytics软件包,但是问题阻止了它的正常工作.此外,react-native-cordova-plugin软件包只适用于Android,因此插入Cordova插件进行分析的能力现在已成为问题.我也没有Swift/ObjectiveC的经验,所以将完全失去GA的插入.有没有人有任何建议如何连接GoogleAnalytics的ReactNativeforiOS?

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部