Comprender los accesorios de renderizado con un ejemplo

Hola Habr! Les presento la traducción del artículo "Aprenda los accesorios de render con el ejemplo" .



Honestamente, antes no imaginaba situaciones en las que puedes aplicar React render props, hasta que vi un ejemplo práctico por lo tanto, vamos! O puedes leer TLDR;

Situación:

Se nos indica que creemos un botón que abra la ventana de PayPal:


Abrimos nuestro editor y creamos el componente PayPalLauncher:



PayPalLauncher puede contener una instancia de PayPal, con lógica adicional, por lo que sería bueno incluirlo (PayPal) en un componente.

Pero, ¿qué pasa si desea usar artículos adicionales de PayPal? Por ejemplo:



Ahora tenemos dos botones y un enlace naranja que debería abrir la ventana de PayPal. Veamos algunas formas de implementar esto.

Opción 1 - Lógica en render ()

Al principio, puede tener la tentación de escribir código dentro de PayPalLauncher:



Aquí pasamos un accesorio llamado tipo para determinar qué elemento de PayPal representar. Mucha lógica para expresar algunos cambios visuales. Esto todavía nos impide representar fácilmente cualquier componente según sea necesario. ¿Qué pasa si hay una manera de separar la lógica de la presentación?

Opción 2 - Anidamiento

Anidar nos ayuda a escribir JSX más comprensible.



Ahora tenemos una clara separación entre la lógica (PayPalLauncher) y la vista (PayPalButton). Esto nos da la capacidad de mostrar cualquier componente como elemento de PayPal (activador de PayPal). ¡Y se lee bien! Pero, ¿cómo pasamos accesorios entre PayPalLauncher y PayPalButton? Veamos cómo se ve en PayPalLauncher:



¿Qué está pasando aquí? Clonamos niños y comprometemos prop para lanzar PayPal implícitamente a cada niño. Esto significa que cada niño que invierta en PayPalLauncher debe aceptar prop launchPayPal. Aunque el anidamiento nos da un JSX más comprensible, este método no es ideal, especialmente si estamos tratando de crear componentes reutilizables con interfaces comunes.

Opción 3 - Render Props

Render Props es un método para transmitir accesorios de padres a hijos mediante una función o cierre. Veamos cómo se ve:



En lugar de tratar props.children como un nodo, creamos un cierre y seleccionamos los argumentos para pasar a los nodos secundarios. En este caso, utilizamos el método de instancia de la clase launchPayPal.

Cuando implementamos esto, la versión resultante se verá así:



¿Qué significa esto? En lugar de elementos, pasamos la función de niño a PayPalLauncher. Debido a esto, podemos pasar fácilmente launchPayPal al controlador onClick del componente PayPalButton. Ahora podemos renderizar cualquier componente que necesitemos y asignar el launchPayPal principal a cualquier controlador secundario.

Un poco más:

Un beneficio inesperado del uso de accesorios de renderizado es que este enfoque hace posible pasar launchPayPal a la página y nos permite agregar más funcionalidades. Por ejemplo, supongamos que desea registrar un usuario y confirmar el formulario antes de iniciar la ventana de PayPal:



Dado que launchPayPal se muestra a través de accesorios de renderizado en la página, podemos agregar fácilmente funciones sensibles al contexto adicionales utilizando la composición de funciones. Aquí guardamos la diferencia entre Page y PayPalLauncher y usamos pipe para mejorar la legibilidad.

Resumen

¿Qué obtenemos al usar accesorios de renderizado?

• Reutilización de la lógica: al separar el mapeo de la lógica, no necesitamos personalizar la lógica para cada componente o representación visual.
• JSX limpio y bien legible.
• La estructura y el componente funcional de nuestras aplicaciones React están mejorando.

¿También te preocupan tus aplicaciones React? ¡Los trabajos están abiertos!

* Recuerde que los accesorios de renderizado son un patrón y se pueden implementar de varias maneras, solo usted debe elegir qué usar con su caso.