Para evitar la repetición, los documentos oficiales de React han resaltado la abstracción del HOC de suscribirse a una fuente de datos y luego insertar los datos recuperados en un componente envuelto cada vez que hay un cambio en los datos, además de guardarlos en el estado del HOC. La suscripción a una fuente de datos en sí es administrada por los métodos del ciclo de vida del HOC.
El HOC se llama withSubscription(), que permite pasar un objeto DataSource para recuperar todo lo que concierne al componente envuelto, por ejemplo, una entrada de noticias, una lista de comentarios, un feed de noticias en vivo, algunos logs, etc. La base de la Fuente de Datos no está realmente documentada en los documentos oficiales de React, y no está muy claro cómo recupera los datos y escucha los cambios (a través de sondeos, web sockets, etc.).
Pero lo interesante es que un segundo argumento se pasa a nuestro HOC, que es una función que recupera datos de una API:
123456// una fuente de datos para obtener la lista de comentarios(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)=// una fuente de datos para obtener algunos logs(DS, props)
javascript
Por lo tanto, una definición de la función se inserta en nuestro HOC para recuperar los datos.
Los métodos componentDidMount y componentDidUnmount han sido presentados para manejar la inicialización así como la terminación de nuestro oyente, y también un método handleChange que es invocado cada vez que nuestros datos cambian, por lo tanto comprometiéndose con el estado de nuestro componente y haciendo que nuestro componente envuelto vuelva a serlo.
Este caso de uso puede ser un poco difícil de entender. Estos son los puntos clave:
- Aunque un solo argumento es la mejor opción en la mayoría de los escenarios, tenemos la opción de insertar múltiples argumentos en un HOC.
- Las funciones también pueden ser parte de los argumentos que pasamos a un HOC, que pueden ser invocados dentro del HOC. Esto puede ser muy útil cuando queremos vincular nuestro HOC a servicios web, determinando los datos que se dan a nuestros componentes envueltos.
- Los componentes envueltos también pueden ser agrupados con métodos de ciclo de vida. La gestión de las suscripciones de datos o la escucha de eventos son algunos buenos ejemplos de cómo se pueden utilizar los métodos de ciclo de vida dentro de un HOC.