React: 同事见了直夸夸的复合组件模式

在React的开发中，我们经常会遇到这样的场景：组件之间需要共享状态，并且根据用户的交互或业务需求，多个组件需要协同工作。这时，设计出既灵活又可维护的组件结构就变得非常重要。复合组件模式 (Compound Component Pattern) 就是一种很好的设计模式，它允许父组件提供共享的状态，子组件则负责完成具体的任务。

#概念

复合组件模式指的是，将一个功能拆分成多个子组件，通过上下文（Context）进行状态共享，父组件负责提供核心逻辑，子组件则根据需要访问状态或操作函数。它让父子组件的通信更加直观，也能大大提升组件的灵活性与可扩展性。

#使用场景

1. 可重用的交互组件

当我们需要构建一个交互组件，如模态窗口，标签页或者表单时，这些组件往往由多个部分组成，例如模态窗口： 展示窗口，背景模态，打开和关闭窗口的组件等。在这种情况下，复合组件模式非常适用，它让你能够以一种声明式的方式构建组件，同时保持各个部分的分离。

2. 需要灵活组合的组件

有些场景下，用户可能需要以不同的方式组合和使用组件。例如，在表单中，输入框和按钮是常见的组合，但不同页面可能对这些组件的布局或功能有不同的要求。复合组件模式允许开发者灵活地组合这些子组件，轻松适应各种需求。

#为什么使用复合组件模式

1. 提升组件的灵活性

复合组件模式允许开发者根据具体的使用场景来组合子组件。每个子组件专注于完成自己的任务，而父组件负责管理状态。这种解耦设计让组件更加灵活，父组件可以随意调整子组件的数量或结构。

2. 避免 prop drilling（属性层层传递）

传统的组件通信往往需要通过一层层地传递属性，这种方式不仅繁琐，还会导致组件之间的耦合度过高。复合组件模式通过使用 Context 来共享状态，避免了这种属性传递的麻烦，子组件可以直接访问需要的状态或方法。

3. 增强可维护性

组件拆分清晰，逻辑职责分明，使得代码更加易于维护。如果某个功能需要调整，开发者只需修改对应的子组件，而不必担心对整个组件造成影响。

#实践展示

我以一个模态窗口为例来展示。正常来讲一般会是这么构建一个模态窗口组件：

复制



function Modal({ children, onClose }) {
  return createPortal(
    <Overlay>
      <StyledModal>
        <Button onClick={onClose}>
          <HiXMark />
        </Button>

        <div>{children}</div>
      </StyledModal>
    </Overlay>,
    document.body
  );
}

export default Modal;

在外部的使用方法则如下所示：

复制function AddUser() {
  const [isOpenModal, setIsOpenModal] = useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpenModal((show) => !show)}>
        添加成员
      </Button>
      {isOpenModal && (
        <Modal onClose={() => setIsOpenModal(false)}>
          <CreateUserForm onCloseModal={() => setIsOpenModal(false)} />
        </Modal>
      )}
    </div>
  );
}

export default AddUser;

乍一看的话这样写也很不错了，适用了大部分场景，但是当它和别的组件套用时，就会显得很乱，并且假如放在一个选项列表中，连续几个按钮都要打开不同的窗口时，就会显得不那么够用，逻辑不那么清晰了。

下面给出复合组件模式的模态窗口写法：

复制
const ModalContext = createContext();


function Modal({ children }) {
  const [openName, setOpenName] = useState("");

  const close = () => setOpenName("");
  const open = setOpenName;

  return (
    <ModalContext.Provider value={{ openName, close, open }}>
      {children}
    </ModalContext.Provider>
  );
}


function Open({ children, opens: opensWindowName }) {
  const { open } = useContext(ModalContext);
  
  
  return cloneElement(children, { onClick: () => open(opensWindowName) });
}

function Window({ children, name }) {
  const { openName, close } = useContext(ModalContext);
  const ref = useOutsideClick(close);
  
  
  if (name !== openName) return null;

  return createPortal(
    <Overlay>
      <StyledModal ref={ref}>
        <Button onClick={close}>
          <HiXMark />
        </Button>

        <div>{cloneElement(children, { onCloseModal: close })}</div>
      </StyledModal>
    </Overlay>,
    document.body
  );
}


Modal.Open = Open;
Modal.Window = Window;

export default Modal;

那么这样的使用方法就变成了如下方式：

复制function AddUser() {
  return (
    <div>
      <Modal>
        <Modal.Open opens="user-form">
          <Button>添加成员</Button>
        </Modal.Open>
        
        <Modal.Window name="user-form">
          <CreateUserForm />
        </Modal.Window>
        
        {/* 可以添加更多的按钮以打开对应窗口 */}
        {/* <Modal.Open opens="table">
          <Button>展示成员</Button>
        
        </Modal.Open>
        <Modal.Window name="table">
          <UserTable />
        </Modal.Window> */}
      </Modal>
    </div>
  );
}

export default AddUser;

再例如，我们与一个表格组件 (表格同样为复合模式写法) 去套用模态窗口：

复制function CabinRow({ cabin }) {
  ...
  return (
    <Table.Row>
      ...
      <div>
        <Modal>
          <Menus.Menu>
            <Menus.Toggle id={cabinId} />

            <Menus.List id={cabinId}>
              <Menus.Button
                icon={<HiSquare2Stack />}
                onClick={handleDuplicate}
                disabled={isCreating}
              >
                Duplicate
              </Menus.Button>

              <Modal.Open opens="edit">
                <Menus.Button icon={<HiPencil />}>Edit</Menus.Button>
              </Modal.Open>

              <Modal.Open opens="delete">
                <Menus.Button icon={<HiTrash />}>Delete</Menus.Button>
              </Modal.Open>
            </Menus.List>
          </Menus.Menu>

          <Modal.Window name="edit">
            <CreateCabinForm cabinToEdit={cabin} />
          </Modal.Window>

          <Modal.Window name="delete">
            <ConfirmDelete
              resourceName="cabins"
              disabled={isDeleting}
              onConfirm={() => deleteCabin(cabinId)}
            />
          </Modal.Window>
        </Modal>
      </div>
    </Table.Row>
  );
}

export default CabinRow;

最终可以达成这样的效果，同时逻辑也很清晰明了

表格组件代码如下：

复制const TableContext = createContext();

function Table({ columns, children }) {
  return (
    <TableContext.Provider value={{ columns }}>
      <StyledTable role="table">{children}</StyledTable>
    </TableContext.Provider>
  );
}

function Header({ children }) {
  const { columns } = useContext(TableContext);
  return (
    <StyledHeader role="row" columns={columns} as="header">
      {children}
    </StyledHeader>
  );
}

function Row({ children }) {
  const { columns } = useContext(TableContext);
  return (
    <StyledRow role="row" columns={columns}>
      {children}
    </StyledRow>
  );
}

function Body({ data, render }) {
  if (!data.length) return <Empty>暂无数据展示</Empty>;

  
  return <StyledBody>{data.map(render)}</StyledBody>;
}

Table.Header = Header;
Table.Body = Body;
Table.Row = Row;
Table.Footer = Footer;

export default Table;

#复合组件模式的优点总结

• 高灵活性：开发者可以自由组合子组件，扩展或修改子组件也很方便。
• 清晰的职责划分：子组件只关心自己负责的功能，父组件负责提供状态，组件职责明确。
• 简化状态共享：通过 Context 共享状态，避免了繁琐的属性传递，提高了代码的可读性和可维护性。
• 便于扩展：新功能可以通过添加子组件来实现，父组件无需修改，符合开闭原则（OCP）。

#结语

复合组件模式为 React 组件的设计提供了一种灵活、优雅的解决方案，特别适用于需要多个组件协同工作的场景。它不仅提升了组件的可复用性，还让代码更加清晰、易于维护。如果你在开发过程中遇到组件拆分和状态共享的需求，不妨试试复合组件模式，相信它能让你的组件设计更加简洁、强大。

希望本文能够帮助你理解并使用复合组件模式，打造更灵活、可维护的 React 组件体系。