关于组合模式我所知道的

关键词：结构型 CompoundPattern 树形结构

解决什么问题

组合模式，将一组对象组织成树形结构。

将单个对象和组合对象都看做树中的节点，以统一处理逻辑。

并且它利用树形结构的特点，递归地处理每个子树，依次简化代码实现。

使用组合模式的前提在于，你的业务场景必须能够表示成树形结构。

应用场景

主要是用来处理树形结构数据。

特别是我们在开发期间不确定这棵树到底存在多少层次的时候。

类与类之间不是父子关系，而是聚合关系。就像 Toggle 和 FlyOut 之间的关系一样。

function Toggle({ open, toggle }) {
  return (
    <div className="flyout-btn" onClick={() => toggle(!open)}>
      <Icon />
    </div>
  );
}

function List({ children, open }) {
  return open && <ul className="flyout-list">{children}</ul>;
}

function Item({ children }) {
  return <li className="flyout-item">{children}</li>;
}

function FlyOut(props) {
  const [open, toggle] = useState(false);

  return (
    <div className={`flyout`}>
      {React.Children.map(props.children, (child) =>
        React.cloneElement(child, { open, toggle })
      )}
    </div>
  );
}

FlyOut.Toggle = Toggle;
FlyOut.List = List;
FlyOut.Item = Item;

具体实践

react 实现

原生实现

参考资料

refactoringguru 组合模式

patterns compound-pattern