Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Una Introducción Apacible a HOC en React: Aprender por Ejemplo

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called A Gentle Introduction to Higher Order Components in React.
A Gentle Introduction to Higher-Order Components in React

Spanish (Español) translation by Jean Perez (you can also view the original English article)

Esta es la segunda parte de la serie sobre los componentes de orden superior (HOCs). Hoy cubriré patrones diferentes componente de orden superior que son útiles y aplicables. Con HOCs, puede abstraer código redundante en una capa de orden superior. Sin embargo, como cualquier otros patrones ahí, tomará algún tiempo acostumbrarse a HOCs. Este tutorial le ayudará a llenar ese vacío.

Requisito Previo

Te recomiendo que sigas la primera parte de la serie si no lo has hecho ya. En la primera parte, hablamos sobre conceptos básicos de sintaxis especial y todo que lo necesario para empezar a trabajar con componentes de orden superior.

En este tutorial, construirá sobre los conceptos que ya hemos cubierto en la primera parte. He creado varios HOCs muestra que son prácticamente útiles, y puede incorporar estas ideas en su proyecto. Fragmentos de código se proporcionan en cada sección, y una demostración del trabajo de todos los HOCs prácticos discutida en este tutorial se proporciona al final del tutorial.

También puede bifurcar el código desde mi repositorio de GitHub.

Práctica Componentes de Orden Superior

Desde HOCs crea un nuevo componente de contenedor abstracto, esta es la lista de cosas que se pueden hacer normalmente con ellos:

  • Envuelva un elemento o componente en un componente.
  • Abstracción del estado.
  • Manipular objetos, por ejemplo añadiendo nuevos apoyos y modificando o eliminando apoyos existentes.
  • Validación de apoyos para crear.
  • Utilizar a referencias a métodos de instancia.

Vamos a hablar de estas uno por uno.

HOC Como un Componente de la Envoltura

Si recuerdan, el ejemplo final en mi tutorial anterior demostró cómo un HOC envuelve el InputComponent con otros componentes y elementos. Esto es útil para labrar y de reutilización de lógica siempre que sea posible. Por ejemplo, puede utilizar esta técnica para crear un indicador de cargador reutilizable o un efecto de animación de transición que debe ser activado por ciertos acontecimientos.

Un Indicador de Carga HOC

El primer ejemplo es un indicador de carga construido HOC. Comprueba si una proposición particular es vacío y aparece el indicador de carga hasta que los datos obtenidos y volvió.

LoadIndicator/LoadIndicatorHOC.jsx

LoadIndicator/LoadIndicatorDemo.jsx

También es la primera vez que hemos utilizado el segundo parámetro como entrada para la HOC. El segundo parámetro, que yo he llamado 'loadingProp', se utiliza aquí para indicar la HOC que necesita comprobar si esa proposición particular es traído y disponible. En el ejemplo, la función isEmpty comprueba si el loadingProp está vacía, y se muestra un indicador de hasta que los puntales se actualizan.

Tienes dos opciones para pasar datos HOC, como una proposición (que es la forma habitual) o como un parámetro para la HOC.

Aquí es cómo elegir entre los dos. Si los datos no tienen ningún alcance más allá de la HOC y los datos están estáticos, luego pasarlos como parámetros. Si los pilares son relevantes para la HOC y también para el componente envuelto, pasarlos apoyos como de costumbre. He cubierto más sobre esto en mi tercer tutorial.

Abstracción del Estado y Manipulación Prop

Abstracción del estado significa generalizar el estado de un componente de orden superior. Toda la gestión de estado de la WrappedComponent será tratada por el componente de orden superior. El HOC agrega nuevo estado, y entonces el estado pasa como apoyos a la WrappedComponent.

Un Contenedor Genérico de Orden Superior

Si notaste, el ejemplo del cargador anterior tenía un componente que hizo una solicitud GET mediante fetch API. Después de recuperar los datos, se almacena en el estado. Hacer una solicitud de la API cuando un componente se monta es un escenario común, y que podríamos hacer un especial que encaja perfectamente en este papel.

GenericContainer/GenericContainerHOC.jsx

GenericContainer/GenericContainerDemo.jsx

El estado se ha generalizado, y que se transmite el valor del estado como apoyos. Hemos hecho el componente configurable también.

Acepta un objeto de configuración como una entrada que da más información sobre la URL de la API, el método y el nombre de la clave del estado donde se almacena el resultado. La lógica utilizada en componentWillMount() muestra cómo utilizar un nombre de clave dinámico con this.setState.

Una Forma de Orden Superior

Aquí hay otro ejemplo que utiliza la abstracción del estado para crear un componente de forma útil de orden superior.

CustomForm/CustomFormDemo.jsx

CustomForm/CustomFormHOC.jsx

El ejemplo muestra cómo puede utilizarse la abstracción del Estado junto con un componente de presentación para facilitar la creación de forma. Aquí, la forma es un componente de presentación y es un insumo para la HOC. El estado inicial de la forma y el nombre de los elementos del estado también se pasan como parámetros.

Sin embargo, tenga en cuenta que si hay varios objetos con el mismo nombre, pedido es importante, y la última declaración de un apoyo siempre va a ganar. En este caso, si otro componente empuja un accesorio llamado contact o contactList, resultará en un conflicto de nombres. Así que deberías o espacio de nombres su utilería especial para que no entre en conflicto con los pilares existentes u orden de tal manera que los pilares que deben tener la prioridad más alta se declaran primero. Serán cubierto en profundidad en el tercer tutorial.

Manipulación Usando HOC

Apoyo manipulación consiste en agregar objetos nuevos, modificación de objetos existentes o ignorarlas completamente. En el ejemplo CustomForm anterior, el HOC transmite algunos nuevos apoyos.

Del mismo modo, usted puede decidir descartar apoyos totalmente. El ejemplo siguiente muestra este escenario.

También puede hacer algunos apoyos de validación y filtrado usando esta técnica. El componente de orden superior decide si un componente infantil debe recibir ciertos apoyos o ruta del usuario a un componente diferente si ciertas condiciones no se cumplen.

Un Componente de Orden Superior Para la Protección de Rutas

Aquí es un ejemplo de la protección de rutas envolviendo el componente relevante con un componente de orden superior withAuth.

ProtectedRoutes/ProtectedRoutesHOC.jsx

ProtectedRoutes/ProtectedRoutesDemo.jsx

withAuth comprueba si el usuario está autenticado y si no, redirige al usuario a /login. Hemos utilizado withRouter, que es una entidad de reaccionar-router. Interesante, withRouter es también un componente de orden superior que se utiliza para pasar los puntales match, la ubicación y la historia actualizados al componente envuelto cada vez que hace.

Por ejemplo, empuja el objeto de la historia como apoyos de modo que podemos acceder a esa instancia del objeto como sigue:

Puedes leer más sobre withRouter en la documentación oficial de react-router.

Acceso a la Instancia a Través de Refs

React tiene un atributo especial que puede conectar a un componente o un elemento. El atributo ref (ref está parado para la referencia) puede ser una función de callback a una declaración de componente.

La devolución de llamada recibe invoca después de que el componente se monta, y obtienes una instancia del componente que se hace referencia como parámetro de la devolución de llamada. Si no está seguro acerca de cómo trabajan refs, la documentación oficial de Refs y DOM habla de ello en profundidad.

En nuestro especial, el beneficio de usar ref es que se puede obtener una instancia de la WrappedComponent y llamar a sus métodos desde el componente de orden superior. Esto no es parte del típico flujo de datos React porque React prefiere la comunicación a través de apoyos. Sin embargo, hay muchos lugares donde se puede encontrar este enfoque beneficioso.

RefsDemo/RefsHOC.jsx

RefsDemo/RefsDemo.jsx

El atributo de devolución de llamada ref guarda una referencia a la WrappedComponent.

this.Instance tiene una referencia a la WrappedComponent. Ahora puede llamar al método de la instancia para comunicar datos entre componentes. Sin embargo, úsalo con moderación y sólo si es necesario.

Demostración Final

He incorporado todos los ejemplos de este tutorial en un solo demo que se puede utilizar a continuación.

Resumen

Este es el final del segundo tutorial sobre los componentes de orden superior. Aprendimos mucho hoy sobre técnicas y diferentes patrones HOC y pasó a través de ejemplos prácticos que demuestran cómo los podríamos utilizar en nuestros proyectos.

En la tercera parte del tutorial, usted puede esperar algunas mejores prácticas y alternativas especial que usted debe saber de. Atentos hasta entonces. Comparta sus pensamientos en el cuadro de comentario.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.