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

Una Suave Introducción a los Componentes de Orden Superior en React: Mejores Prácticas

by
Difficulty:BeginnerLength:LongLanguages:

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

Se trata de la tercera parte de la serie sobre los componentes de orden superior. En el primer tutorial, empezamos de cero. Aprendimos los conceptos básicos de sintaxis, funciones de orden superior y componentes de orden superior ES6.

El modelo de componentes de orden superior es útil para crear componentes abstractos — puede utilizar para compartir datos (estado y comportamiento) con los componentes existentes. En la segunda parte de la serie, demostré ejemplos prácticos de código usando este modelo. Esto incluye rutas protegidas, creando un contenedor genérico configurable, colocar un indicador de carga de un componente, etcetera.

En este tutorial, tenemos un vistazo a algunos mejores prácticas y lo que debe y que usted debe buscar en escribiendo HOCs.

Introducción

Reaccionar antes tenía algo llamado Mixins, que funcionó muy bien con el método React.createClass. Mixins permitidos a los desarrolladores compartir código entre los componentes. Sin embargo, tuvieron algunos inconvenientes, y la idea fue descartada eventualmente. Mixins no se han actualizado para apoyar las clases de la ES6 y Dan Abramov incluso escribió un post detallado sobre por qué los Mixins son considerados dañinos.

Componentes de orden superior surgieron como una alternativa a los Mixins, y apoyaron las clases ES6. Por otra parte, HOCs no tiene que hacer nada con la API de React y son un patrón genérico que funciona bien con React. Sin embargo, HOCs tienen defectos. Aunque las desventajas de los componentes de orden superior podrían no ser evidentes en proyectos más pequeños, podría tener múltiples componentes de orden superior, encadenados a un solo componente, al igual que a continuación.

No dejas que la cadena llega al punto donde usted está preguntando la pregunta: "donde lo que los apoyos vienen de?" Este tutorial aborda algunos de los problemas comunes con los patrones de componentes de orden superior y las soluciones para conseguir que justo.

Los Problemas Con HOC

Algunos de los problemas comunes con HOCs tienen menos que ver con HOCs sí mismos, sino más bien la implementación de ellos.

Como ya sabéis, HOCs son grandes para la captación de código y crear código reutilizable. Sin embargo, cuando usted tiene HOCs múltiples apilan para arriba, y si algo parece fuera de lugar o si algunos elementos no aparecen, es doloroso depurar porque las DevTools React dará una pista muy limitada sobre lo que podría ha ido mal.

Un Problema HOC del Mundo Real

Para comprender los inconvenientes del HOCs, he creado una demo de ejemplo que anida en algunos de los HOCs que creamos en el tutorial anterior. Tenemos cuatro funciones de orden superior envolviendo ese único componente de la lista de contactos. Si el código no tiene sentido o si no has seguido mi tutorial anterior, aquí está un breve resumen de cómo funciona.

withRouter es un especial que forma parte del paquete de reaccionar-router. Proporciona acceso a propiedades del objeto de la historia y pasa como un apoyo.

withAuth busca un apoyo de autenticación y, si la autenticación es cierta, hace el WrappedComponent. Si la autenticación es falso, lo empuja '/login' en el objeto de la historia.

withGenericContainer acepta un objeto como una entrada además de WrappedComponent. El GenericContainer hace llamadas a la API y almacena el resultado en el estado y luego envía los datos al componente envuelto como apoyos.

withLoader es un especial que se fija un indicador de carga. El indicador de gira hasta el improbable datos alcanza el estado.

BestPracticeDemo.jsx

Ahora usted puede ver por sí mismo algunos de los errores comunes de los componentes de orden superior. Vamos a discutir algunos de ellos en detalle.

Basico Hacer y No Hacer

No Olvides de Difundir los Pilares en Su HOC

Suponga que tenemos una proposición authenticated = { this.state.authenticated } en la parte superior de la jerarquía de composición. Sabemos que esto es un apoyo importante y que esto debería hacer todo el camino para el componente de presentación. Sin embargo, imagina que un HOC intermedio, tales como withGenericContainer, decidieron ignorar sus apoyos.

Esto es un error muy común que usted debe intentar evitar al escribir componentes de orden superior. Alguien que no está familiarizado con HOCs podría ser difícil de averiguar por qué los pilares faltan porque sería difícil aislar el problema. Por lo tanto, recuerde siempre difundir los apoyos en su especial.

No pasar por apoyos que no tengan ninguna existencia más allá del alcance de la HOC

Un especial podría introducir nuevos apoyos que el WrappedComponent no pudo tener cualquier uso. En tales casos, es aconsejable pasar por apoyos que sólo son relevantes a los componentes del compuesto.

Un componente de orden superior puede aceptar datos de dos maneras: bien como argumento de la función o como apoyo del componente. Por ejemplo, autenticado = {this.state.authenticated} es un ejemplo de una proposición, mientras que en withGenericContainer(reqAPI)(ContactList), estamos pasando como argumentos los datos.

Porque withGenericContainer es una función, puede pasar en argumentos tan pocos o tantos como quieras. En el ejemplo anterior, un objeto de configuración se utiliza para especificar la dependencia de datos de un componente. Sin embargo, el contrato entre un componente mejorado y el componente envuelto es estrictamente a través de apoyos.

Por lo que recomiendo en las dependencias de datos estáticos en el tiempo a través de los parámetros de la función de relleno y pasando datos dinámicos como apoyos. Los puntales autenticados son dinámicos porque un usuario puede ser ya sea autenticado o no dependiendo de si está conectados o no, pero podemos estar seguros de que no van a cambiar dinámicamente el contenido del objeto reqAPI.

No Utiliza HOC Dentro del Método Render

Aquí hay un ejemplo que debe evitar a toda costado.

Aparte de las dificultades de rendimiento, usted perderá el estado de la OriginalComponent y todos sus hijos en cada render. Para resolver este problema, mueva la declaración especial fuera el método render para que se crea sólo una vez, para que el render siempre devuelve el mismo EnhancedComponent.

No Mutar el Componente Envuelto

Mutando el componente envuelto dentro de un especial hace imposible utilizar el componente envuelto fuera la HOC. Si tu HOC devuelve un WrappedComponent, casi siempre puede ser seguro que lo estás haciendo mal. El ejemplo siguiente muestra la diferencia entre mutación y composición.

Composición es una de las características fundamentales de reaccionar. Usted puede tener un componente dentro de otro componente en su función de render, y eso es lo llamo composición.

Por otra parte, si mutan el WrappedComponent dentro de un especial y luego Envuelva el componente mejorado con otro especial, se reemplaza los cambios realizados por la primera especial. Para evitar estas situaciones, deben atenerse a componer componentes en lugar de los mutando.

Genérico de Namespace Propnames

La importancia de los nombres prop namespacing es evidente cuando tienes múltiples apilados para arriba. Un componente puede empujar un nombre prop en el WrappedComponent que ya es utilizado por otro componente de orden superior.

El withMouse y withCat están tratando de empujar su propia versión de la proposición de nombre. ¿Qué pasa si la EnhancedComponent también me tocó compartir algunos apoyos con el mismo nombre?

¿No sería una fuente de confusión y de información para el programador de final? Las Devtools React no informe los conflictos de nombre, y tienes que mirar en los detalles de implementación especial para entender lo que salió mal.

Esto se puede solucionar haciendo HOC prop nombres de ámbito como un Convenio por el especial que les proporciona. Así que tienes withCat_name y withMouse_name en lugar de un nombre genérico de la prop.

Otra cosa interesante aquí es pedir sus propiedades es importante React. Cuando se tiene la misma propiedad en múltiples ocasiones, dando lugar a un conflicto de nombres, la declaración última siempre sobrevivirá. En el ejemplo anterior, el gato gana puesto que se coloca después de {... this.props}.

Si prefiere resolver el conflicto de nombre de alguna otra manera, puede ordenar las propiedades y difundir this.props última. Esta manera, puede definir valores predeterminados razonables que se adapten a su proyecto.

Hacer la Depuración Más Fácil Usando un Nombre Significativo

Los componentes creados por un especial se muestran en las Devtools reaccionar como componentes normales. Es difícil distinguir entre los dos. Puede facilitar la depuración proporcionando un displayName significativo para el componente de orden superior. ¿No sería sensato tener algo como esto en Devtools reaccionar?

¿Qué es displayName? Cada componente tiene una propiedad displayName que puede utilizar para propósitos de depuración. La técnica más popular es envolver el nombre para mostrar de la WrappedComponent. Si withCat es la HOC y NameComponent es el WrappedComponent, el displayName será withCat(NameComponent).

Una Alternativa a los Componentes de Orden Superior

Aunque desaparecen los Mixins, sería engañoso decir que componentes de orden superior están el patrón único por ahí que permite compartir código y abstracción. Otro patrón alternativo ha surgido y he escuchado que algunos dicen que es mejor que HOCs. Está fuera del alcance de este tutorial para tocar en el concepto en profundidad, pero voy a introducir para hacer apoyos y algunos ejemplos básicos que demuestran por qué son útiles.

Prestar apoyos son conocidos por diferentes nombres:

  • prestar apoyo
  • apoyo de los niños
  • funcionar como un niño
  • procesamiento de devolución de llamada

Aquí está un ejemplo rápido que debe explicar cómo funciona un apoyo de procesamiento.

Como se puede ver, nos hemos desembarazados de las funciones de orden superior. Tenemos un componente regular llamado Mouse. En lugar de representar un componente envuelto en su método render, que vamos a hacer this.props.children() y pasar en el estado como argumento. Así que le estamos dando a Mouse un apoyo de render, y el apoyo de procesamiento decide lo que debe ser renderizada.

En otras palabras, los componentes de Mouse aceptan una función como el valor de los apoyos de los niños. Cuando hace de Mouse, devuelve el estado del Mouse y la función de apoyo de procesamiento puede utilizar sin embargo agrada.

Hay algunas cosas que me gusta de este patrón:

  • Desde una perspectiva de legibilidad, es más evidente en donde viene una prop.
  • Este patrón es dinámico y flexible. HOCs se compone en tiempo de estática. Aunque nunca he encontrado al ser una limitación, render apoyos son dinámicamente compuestas y son más flexible.
  • Composición componente simplificado. Se podrían decir adiós a anidar múltiples HOC.

Conclusión

Componentes de orden superior son patrones que se pueden utilizar para crear componentes reutilizables, robustos en reaccionar. Si vas a usar HOCs, hay algunas reglas básicas que debe seguir. Esto es para que no lamentan la decisión de usarlos más tarde. Yo he resumido la mayoría de las mejores prácticas en este tutorial.

HOC no son sólo los patrones que son populares hoy en día. Hacia el final del tutorial, he introducido en otro patrón llamado render apoyos que está ganando terreno entre los desarrolladores de reaccionar.

Yo no juzgar un patrón y decir que éste es mejor que otro. Como reaccionar crece, y madura el ecosistema que lo rodea, más y más patrones surgirán. En mi opinión, debe aprender a todos y con el que adapte a tu estilo y que estás cómodo.

Esto también marca el final de la serie de tutoriales sobre componentes de orden superior. Hemos pasado de cero a dominar una técnica avanzada llamada HOC. Si me perdí algo o si tienen sugerencias/pensamientos, me encantaría escucharlos. Puede publicarlos en los comentarios.

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.