El patrón HOC (Componente de orden superior) es muy popular entre los desarrolladores de React. Pero los desarrolladores de Vue de alguna manera lo omiten. Muy vano Tratemos de resolverlo.
¿Qué es un HOC?
Un componente de orden superior (HOC) es una función que toma un componente existente y devuelve otro componente que envuelve el original, agregando una nueva lógica.
HOC vs mixins
Quizás muchos se preguntarán por qué usar HOC cuando hay impurezas. También agregan nueva funcionalidad a los componentes. ¿Qué puede HOC que las impurezas no saben?
Primero, recuerde qué impurezas hay en Vue (definición tomada de la documentación de Vue):
Mixins es una herramienta de reutilización de código flexible en componentes Vue. El objeto de impureza puede contener cualquier opción de componente. Cuando un componente utiliza una impureza, todas las opciones de impureza se "mezclan" con las propias opciones del componente.
Parece que el propósito de las impurezas y HOC es el mismo: le permiten ampliar la funcionalidad de los diferentes componentes. Y afuera (usando el componente final) incluso puede verse igual.
Pero la diferencia radica en el principio mismo de HOC e impurezas. Las impurezas se "mezclan" al declarar un componente; cualquier instancia de componente las contendrá.
Usando HOC, envolvemos una instancia de un componente que no cambia el componente en sí, sino que crea uno nuevo donde es necesario. Esto significa que solo afectamos el fragmento de código donde lo usamos. Debido a esto, reducimos la coherencia del código, lo hacemos más legible y flexible.
HOC es un poco como un patrón de diseño de decorador .
Creación de HOC
Pues bien. Echemos un vistazo a todo esto con un ejemplo.
Entonces, tenemos un componente de botón:
Después de un tiempo, de repente tuvimos que registrar la presión de algunos botones (pero no todos). Podemos hacer esto a través de impurezas mezclando el código para iniciar sesión en el componente del botón y luego, en el lugar correcto, habilitar o deshabilitar el registro a través de alguna propiedad del componente. Pero de acuerdo, esto no es muy conveniente? ¿Y si hay tanta funcionalidad? Un error, y todos los botones pueden dejar de funcionar correctamente.
HOC en este caso sería una gran solución. Simplemente envolvemos el botón en algunos lugares con el HOC correspondiente.
Es hora de conocer el HOC en la práctica.
Paso 1. Crear una función HOC
Recordamos que HOC es una función que toma un componente como entrada y devuelve otro. Así que creemos una función así. Llamémoslo con LoggerButton.
Es costumbre comenzar a nombrar funciones HOC con: este es un tipo de marca de identificación de HOC.
El resultado es una función que toma un componente Button como entrada y luego devuelve un nuevo componente. En la función de representación, usamos el componente original, pero con un cambio: agregamos un evento para hacer clic en el nodo DOM, la salida de la inscripción hace clic en la consola.
Si no comprende lo que está sucediendo aquí, qué son y el contexto, lea primero la documentación de vue sobre cómo funcionan las funciones de representación.
En el ejemplo actual, usé el componente funcional, porque No necesito una condición. Nadie le prohíbe devolver un componente regular en lugar de uno funcional, pero no olvide que los componentes funcionales son mucho más rápidos que los normales.
Paso 2. Usando HOC
Ahora, usando la función resultante, simplemente creamos un nuevo componente.
Lo único que queda es conectar el componente recibido donde necesitamos el registro de clics.
Ejemplo final:
Composición
Todo esto es ciertamente genial, pero ¿qué pasa si necesita un botón que no solo inicie sesión, sino que también realice alguna otra acción?
Todo es simple Estamos convirtiendo un HOC en otro. Podemos mezclar tantos HOC como queramos.
También para la composición hay muchas funciones y bibliotecas listas para usar que facilitan la composición.
HOC es un patrón simple pero muy poderoso. Se utiliza en la base de muchas bibliotecas. No es una bala de plata o un reemplazo completo de mixins y el mecanismo de herencia de componentes. Úselo sabiamente en combinación con otros patrones y sus aplicaciones Vue se volverán realmente flexibles.
Poste cruzado