关键词：结构型 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 实现
原生实现
参考资料
