React: 同事见了直夸夸的复合组件模式在React的开发中，我们经常会遇到这样的场景：组件之间需要共享状态，并且根据
在React的开发中，我们经常会遇到这样的场景：组件之间需要共享状态，并且根据用户的交互或业务需求，多个组件需要协同工作。这时，设计出既灵活又可维护的组件结构就变得非常重要。复合组件模式 (Compound Component Pattern) 就是一种很好的设计模式，它允许父组件提供共享的状态，子组件则负责完成具体的任务。
概念
复合组件模式指的是，将一个功能拆分成多个子组件，通过上下文（Context）进行状态共享，父组件负责提供核心逻辑，子组件则根据需要访问状态或操作函数。它让父子组件的通信更加直观，也能大大提升组件的灵活性与可扩展性。
使用场景
1. 可重用的交互组件
当我们需要构建一个交互组件，如模态窗口，标签页或者表单时，这些组件往往由多个部分组成，例如模态窗口： 展示窗口，背景模态，打开和关闭窗口的组件等。在这种情况下，复合组件模式非常适用，它让你能够以一种声明式的方式构建组件，同时保持各个部分的分离。
2. 需要灵活组合的组件
有些场景下，用户可能需要以不同的方式组合和使用组件。例如，在表单中，输入框和按钮是常见的组合，但不同页面可能对这些组件的布局或功能有不同的要求。复合组件模式允许开发者灵活地组合这些子组件，轻松适应各种需求。
为什么使用复合组件模式
1. 提升组件的灵活性
复合组件模式允许开发者根据具体的使用场景来组合子组件。每个子组件专注于完成自己的任务，而父组件负责管理状态。这种解耦设计让组件更加灵活，父组件可以随意调整子组件的数量或结构。
2. 避免 prop drilling（属性层层传递）
传统的组件通信往往需要通过一层层地传递属性，这种方式不仅繁琐，还会导致组件之间的耦合度过高。复合组件模式通过使用 Context 来共享状态，避免了这种属性传递的麻烦，子组件可以直接访问需要的状态或方法。
3. 增强可维护性
组件拆分清晰，逻辑职责分明，使得代码更加易于维护。如果某个功能需要调整，开发者只需修改对应的子组件，而不必担心对整个组件造成影响。
实践展示
我以一个模态窗口为例来展示。正常来讲一般会是这么构建一个模态窗口组件：
// OverLay 为模糊背景
// StyledModal 为打开的窗口
// children 则是窗口中展示的内容
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;
乍一看的话这样写也很不错了，适用了大部分场景，但是当它和别的组件套用时，就会显得很乱，并且假如放在一个选项列表中，连续几个按钮都要打开不同的窗口时，就会显得不那么够用，逻辑不那么清晰了。
下面给出复合组件模式的模态窗口写法：
// 1. 创建一个Context用于传递状态
const ModalContext = createContext();
// 2. 创建父组件
function Modal({ children }) {
const [openName, setOpenName] = useState("");
const close = () => setOpenName("");
const open = setOpenName;
return (
<ModalContext.Provider value={{ openName, close, open }}>
{children}
</ModalContext.Provider>
);
}
// 3. 创建子组件完成其具体的任务
function Open({ children, opens: opensWindowName }) {
const { open } = useContext(ModalContext);
// 将打开窗口事件传入用于打开窗口的组件，使用了cloneElement方法来添加，对这个方法了解更多可以去React官方文档查看，不过这个方法目前官方不建议使用
return cloneElement(children, { onClick: () => open(opensWindowName) });
}
function Window({ children, name }) {
const { openName, close } = useContext(ModalContext);
const ref = useOutsideClick(close);
// 检测name，不一致则不打开
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
);
}
// 4. 将子组件作为父组件属性
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>;
// 这里将数据数组的渲染方法传进去 如：data={sortedCabins} render={(cabin) => <CabinRow cabin={cabin} key={cabin.id} />}
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 组件体系。
转载自:https://juejin.cn/post/7412899060827914291