声明式与命令式 Modal 之争

前端加油站2024-11-29 10:52

Modal 是后台管理系统的三大重要组件之一

怎么才算正确使用 Modal 引发很多前端开发人员的讨论～

下面是基于 Ant Design 组件库说一下两种使用方式

声明式 Modal 是指组件的显示由某个"状态"来控制，通过行为控制状态的值来控制的组件的显示与隐藏，对象是"状态"

事件控制状态，状态控制 Modal。也就是下面的使用逻辑

jsx 复制代码

visible && <Modal/>

使用 Ant Design 举个例子：

tsx 复制代码

import React, { useState } from 'react';
import { Button, Modal } from 'antd';

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

命令式编程强调的是发出命令，告诉程序去执行某些操作。在命令式的模式下，开发者手动控制模态框的显示和隐藏，通常不依赖于状态驱动，而是通过调用函数或方法来直接控制模态框的行为。强调的对象是事件

命令式 Modal 允许你从外部代码直接控制模态框的显示和关闭，这通常是通过访问和操作模态框实例或引用来实现的

Modal 的逻辑在事件里

使用 Ant Design 举个例子：

tsx 复制代码

import React from 'react';
import { Button, Modal, Space } from 'antd';

const handleClick = () => {
  Modal.info({
    title: 'This is a notification message',
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
  });
};

const App: React.FC = () => (
  <Space wrap>
    <Button onClick={handleClick}>Info</Button>
  </Space>
);

export default App;

总结

技术没有对错之分，只管合适与否。请结合实际业务需求选择 Modal 的使用方式