Composite: Tree Structures

Why this matters

When you have a hierarchy of objects — menus containing sub-menus, folders containing files, UI components containing other components — client code tends to ask "is this a leaf or a container?" before acting. That type-checking spreads everywhere and breaks when you add new node types. Composite gives leaves and containers the same interface. Client code calls size() on a file or a folder — it doesn't know and doesn't care which one it is.

Cuando tienes una jerarquía de objetos — menús que contienen submenús, carpetas que contienen archivos, componentes de UI que contienen otros — el código cliente tiende a preguntar "¿es esto una hoja o un contenedor?" antes de actuar. Esa verificación de tipos se dispersa por todos lados y falla al agregar nuevos tipos de nodos. Composite da a hojas y contenedores la misma interfaz. El código cliente llama a size() en un archivo o una carpeta — no sabe ni le importa cuál es.

✗ The problem

✓ The solution

Where Composite appears in the wildDónde aparece Composite en la práctica

The DOM is a Composite — element.textContent works on a single element or an entire subtree. React's component tree is a Composite — rendering a leaf component and a compound component uses the same render() call. Organization charts, bill-of-materials lists, and expression trees (where a sub-expression is itself an expression) all follow the same pattern.

El DOM es un Composite — element.textContent funciona en un elemento simple o en todo un subárbol. El árbol de componentes de React es un Composite — renderizar un componente hoja y un componente compuesto usa la misma llamada render(). Los organigramas, las listas de materiales y los árboles de expresiones (donde una subexpresión es en sí misma una expresión) siguen el mismo patrón.