Introducción

Uno de los conceptos más útiles y ampliamente utilizados en el mundo de React son los patrones de diseño, ya que ayudan a mantener el código escalable y dan un significado adicional a los componentes que creamos.

hay varios patrones, y en este artículo, discutiremos componentes compuestos , un patrón avanzado que es especialmente útil para crear interfaces flexibles y compuestas.

¿Qué son los componentes compuestos?

componentes compuestos es un patrón avanzado en React. Su objetivo es crear un diseño más flexible permitiendo el intercambio de estado y lógica entre un grupo de componentes. De esta manera, la comunicación entre el componente principal y los componentes infantiles se puede lograr de manera flexible.

Los componentes trabajan juntos para lograr ciertos comportamientos sin crear árboles complejos o lógica demasiado complicada que sea difícil de refactorizar o comprender en el futuro.

Este patrón ayuda a eliminar la perforación de proporción, donde pasamos una gran cantidad de accesorios a través de varias capas de componentes. La perforación de proporción puede ser problemática, ya que puede causar re-renderizadores innecesarios cada vez que se actualiza el estado, ya que cada cambio de estado actualizará todos los componentes infantiles.

Se puede ver un ejemplo de componentes compuestos en la estructura HTML de selección y etiquetas de opción:

El elemento Seleccionar funciona como el Administrador de estado de la interfaz, mientras que los elementos de opción configuran cómo debe funcionar el componente SELECT.

Ejemplo usando componentes compuestos

En este ejemplo, crearemos un modal, que se divide en dos componentes compuestos: alternar y contenido. Compartirán el estado abierto/cerrado del modal.

pase por cómo crear este componente paso a paso:

podemos comenzar creando el contexto que administrará el estado abierto/cerrado del modal:

creando la base del componente modal:

Observe que estamos usando niños para tomar los componentes que se colocarán dentro del modal. Queremos usarlo así:

Ahora necesitamos crear el componente de alternancia, que será responsable de abrir el modal:

también necesitamos un componente de contenido que sea responsable de mostrar el contenido del modal:

Finalmente, podemos agregar ambos componentes a nuestro componente modal, ¡y está listo para comenzar! ?

Uso:

Resultado:

de esta manera, hacemos que la creación y el uso de modales sean extremadamente flexibles y reutilizables. Modal.toggle es responsable de activar la pantalla modal, mientras que modal.content debe mostrar el contenido modal.

Esta estructura permite a los desarrolladores personalizar fácilmente el comportamiento y el contenido de los modales de acuerdo con las necesidades específicas de sus aplicaciones, haciendo que el código sea más limpio y más organizado.

Otros ejemplos

también podemos usar componentes compuestos en otros contextos, como:

componentes de acordeón:

componentes del menú:

Todos estos ejemplos son flexibles y adaptables, lo que facilita el desarrollo, la escalabilidad y el uso de componentes.

Ejercicio

notamos que el botón de cierre se colocó dentro del componente de contenido, pero sería interesante tener un componente dedicado a administrar el cierre del modal. Puede crear algo como Close . ¡Intenta experimentar y agregar este componente también!

Conclusión

Hemos visto cómo escribir componentes usando el patrón de componentes compuestos puede ser útil en nuestras aplicaciones. También exploramos cómo implementarlo y revisamos ejemplos de dónde puede encajar este patrón.

no dude en explorar y experimentar con la creación de componentes usando componentes compuestos. Úselo sabiamente y evalúe si tiene sentido aplicar en su contexto, como si no se implementara bien, podría terminar siendo más un obstáculo que una ayuda.

Nota: Publiqué este mismo contenido en React4NoObs, un repositorio de BR que reúne artículos creados por desarrolladores en el universo React. ¡Vale la pena revisar!