El poder de los ganchos en React: aplicaciones dinámicas simplificadas

Una incorporación reciente a la biblioteca de React, Hooks, ha cambiado fundamentalmente la forma en que los desarrolladores crean componentes de React. Sin la necesidad de crear un componente de clase, los ganchos permiten que los componentes funcionales accedan a otros recursos de React y tengan estado.

Antes de Hooks, los componentes de clase eran la única opción para agregar estado a un componente de React. Sin embargo, a medida que aumentaba la complejidad del componente React, los componentes de clase consumían mucho tiempo y eran difíciles de entender. Los desarrolladores pueden gestionar el estado y otra lógica en un componente funcional mediante enlaces, lo que hace que su código sea más corto y sencillo de entender.

Los ganchos se han convertido rápidamente en una parte integral de la comunidad React, ofreciendo formas intuitivas y eficientes de administrar la lógica de los componentes y haciendo que el código sea más fácil de entender y ejecutar. Revolucionó la forma en que se escriben los componentes de React.

Este artículo cubrirá los conceptos básicos y avanzados de los ganchos para que pueda comprender cómo usarlos para crear aplicaciones sólidas, escalables y flexibles. Al final de este artículo, comprenderá bien los ganchos y podrá utilizarlos en sus propios proyectos.

¿Qué son los ganchos?

Los componentes funcionales ahora pueden manejar el estado y realizar efectos secundarios que antes solo estaban disponibles en los componentes de clase, gracias a React Hooks. Los desarrolladores pueden crear código más limpio y reutilizable con ganchos, lo que hace que el código base sea más sencillo de entender y mantener.

Los ganchos en React le permiten llevar de manera eficiente el estado y otras funcionalidades a sus componentes funcionales proporcionándoles la funcionalidad de los componentes de clase.

Hay dos tipos de anzuelos; Ganchos de estado y ganchos de efecto . La siguiente tabla presenta una breve comparación entre los dos.

Con la ayuda de ganchos, la aplicación y el código se vuelven eficientes, reutilizables y más fáciles de entender. Además, los componentes pueden compartir enlaces, lo que simplifica compartir su estado y otras funciones entre aplicaciones.

¿Por qué deberías usar ganchos en React?

React Hooks transforma sus componentes funcionales para ofrecer una flexibilidad incomparable, una gestión de estado simplificada y un código eficiente. Echemos un vistazo a cómo estos enlaces pueden ayudarle en el proceso de desarrollo de la aplicación.

1. Los ganchos ayudan a que su código sea más fácil de entender y aumentar la legibilidad al incorporar de manera efectiva el estado y otras funciones en componentes funcionales. Como resultado, le permite crear código fácilmente legible y modificado.
2. Los ganchos mejoran la reutilización del código al compartirlo entre componentes, lo que simplifica compartir de manera eficiente su estado y funcionalidad adicional entre sus aplicaciones. Ayuda a reducir el código y hacerlo reutilizable.
3. Los ganchos mejoran el rendimiento de la aplicación optimizándola con la ayuda de los ganchos useMemo que ayudan a memorizar los cálculos. Ayuda a mejorar el rendimiento de la aplicación.
4. Los ganchos mejoran la experiencia del desarrollador al simplificar la funcionalidad de los componentes y al mismo tiempo minimizar la cantidad de componentes de clase. Aumenta la productividad y la eficiencia y da resultados más satisfactorios.

Ahora veremos un ejemplo para que se familiarice con el uso de ganchos. Este ejemplo demuestra el gancho useCallback.

 importar React, {useState, useCallback} desde 'react';

 función UseCallbackExample {
 const (incremento, setIncrement) = useState(0);
 const val = usarDevolución de llamada( => {
  setIncrement(contraIncremento => contadorIncremento + 1);
 }, (setIncremento));
 devolver (
  <div>
   < p >Has hecho clic en {incrementar} veces.</ p >
   < botón al hacer clic={val}>
    ¡Haga clic aquí!
   </ botón >
  </div>
 );
 }

 exportar UseCallbackExample predeterminado;

La función memorizada creada en el ejemplo anterior utiliza el gancho useCallback. Para evitar volver a calcular un valor, piense en memorizarlo como almacenarlo en caché. Esto nos permite separar las operaciones que consumen muchos recursos para que no se inicien automáticamente en cada renderizado. La función se modifica cuando cambian dependencias específicas, lo que mejora el rendimiento y evita la repetición innecesaria de componentes.

En general, los ganchos simplifican el código, mejoran el rendimiento, la experiencia del desarrollador y la reutilización. Además, los ganchos han modificado los enfoques de los desarrolladores para escribir y ejecutar código, proporcionando flexibilidad y enfoques más organizados, lo que los convierte en una herramienta esencial.

¿Cómo se pueden usar ganchos en React?

Varios tipos de ganchos en React permiten a los desarrolladores crear sus aplicaciones de manera fácil y eficiente. Esta sección profundizará en seis ganchos de uso común. Los ganchos de estado y efecto son los más utilizados en React.

Los enlaces de estado permiten agregar y actualizar el estado de los componentes funcionales. El desarrollador puede usar enlaces State importando enlaces useState de la biblioteca React. Después de importar el gancho useState, lo llamaremos dentro de nuestro componente, pasando un valor de estado inicial y proporcionando una matriz como salida. Una matriz contendrá dos componentes: el valor del estado actual y la función de establecimiento para modificar el estado.

Los ganchos de efectos permiten a los desarrolladores ejecutar efectos secundarios dentro de componentes funcionales obteniendo los datos con la ayuda de una API o modificando el título del documento. El desarrollador puede utilizar ganchos de efectos importando ganchos useEffect de la biblioteca React. Después de importar el gancho useEffect, lo llamaremos dentro de nuestro componente y proporcionaremos una función que defina el efecto. Cada representación posterior del componente llamará a esta función. Los desarrolladores pueden utilizar tantos ganchos como quieran en el mismo componente, lo que les permite introducir múltiples estados y realizar múltiples efectos secundarios.

Para utilizar Hooks de manera eficiente, es fundamental seguir algunas pautas:

• No podemos utilizar ganchos en componentes de clase, ya que están hechos principalmente para componentes funcionales.
• Los ganchos no deben llamarse dentro de bucles, condiciones o funciones anidadas , ya que esto puede dar como resultado un comportamiento inesperado. Cuando evita esto, los ganchos se llaman en el mismo orden cada vez que se representa un componente. En cambio, los ganchos se usan mejor en el nivel superior de un componente y los condicionales pueden usar los valores devueltos.

Estas pautas lo ayudarán a utilizar ganchos de manera efectiva y a mantener la funcionalidad y eficiencia de su aplicación. Además, es fundamental tener en cuenta que los ganchos solo funcionarán en los componentes de la función React; Como resultado, cuando necesite incluir efectos secundarios o de estado en un componente de clase, utilice componentes basados ​​en clases o considere convertirlos en componentes de funciones.

Los ganchos son una herramienta esencial que permite a los desarrolladores crear una aplicación eficaz y dinámica, haciéndola eficiente, reutilizable y fácil de entender. Esta sección explorará los tipos de ganchos y proporcionará ejemplos de su implementación. Los siguientes son los tipos de ganchos en React.

1. usoEstado

El gancho useState permite a los desarrolladores agregar y modificar componentes funcionales gestionando el estado dentro de los componentes. El gancho useState devuelve un estado actual y la función que modifica el estado.

El estado incluye objetos y matrices como uno de los tipos de estado. Los ganchos useState optimizan la gestión del estado dentro del componente funcional y mejoran el rendimiento de la aplicación al proporcionar enfoques eficaces para manejar el estado. Veamos un ejemplo para comprender mejor el gancho useState.

Comience importando el gancho useState de la biblioteca React, y luego lo llamaremos dentro del componente pasando un valor inicial de 0. Ahora use una variable de incremento que se inicializa en 0. El valor del estado actual sería incremento y la función colonizadora es setIncrement.

Cuando hace clic en el botón Hacer clic en mí, el estado se modifica con la función colonizadora setIncrement y el incremento del valor del estado actual se usa para mostrar cuántas veces ha realizado los clics. Una vez que se hace clic en el botón, el valor del estado se guardará y el componente se volverá a representar en la función del colono setIncrement para actualizarlo con un nuevo valor.

 importar React, {useState} de 'react';

 función UseStateExample {
 // Declarar la variable useState "incremento"
 // Después de declarar la variable, la inicializamos a 0
 const (incremento, setIncrement) = useState(0);

 devolver (
  <div>
   < h4 >Has realizado {incrementos} clics.</ h4 > 
< botón onClick={ => setIncrement(incremento + 1)}>
 Haz click en mi
 </ botón >
 </div>
 );
 }

 exportar UseStateExample predeterminado;

Vimos cómo un valor aumenta cada vez que hacemos clic en un botón usando ganchos useState. Los ganchos useState son simples y esenciales para manejar el estado en los componentes de la función React. Ayuda a modificar y agregar estado, aportando eficiencia al código y haciéndolo más fácil de entender.

2. usoEfecto

El gancho useEffect permite a los desarrolladores realizar efectos secundarios en componentes funcionales obteniendo los datos con la ayuda de una API o modificando el título del documento.

Exploremos un ejemplo para comprender mejor el gancho useEffect.

Comience importando el gancho useEffect de la biblioteca React. Después de importar el gancho useEffect, lo llamaremos dentro del componente pasando una función que define useEffect.

En nuestro caso, estamos modificando el título del documento para devolver la visualización de cuántas veces hicimos clic. El gancho useEffect se ejecuta después de que se renderice cada componente, y consta de los renderizados iniciales y posteriores.

Por lo tanto, el incremento se actualizó volviendo a representar el componente que ejecutó ese useEffect que modificó el título del documento.

 importar React, {useState, useEffect} de 'react';

 función UseEffectExample {
 // Declarar la variable usestate "incremento"
 // Después de declarar la variable, la inicializamos a 0
 const (incremento, setIncrement) = useState(0);

 // Declarar un gancho useEffect que se ejecuta después de cada renderizado
 utilizarEfecto( => {
  document.title = `Has realizado ${incremento} clics`;
 });

 devolver (
  <div>
   < h4 >Has realizado {incrementos} clics.</ h4 >
   < botón onClick={ => setIncrement(incremento + 1)}>
    Haz click en mi
   </ botón > 
</div>
 );
 }

 exportar UseEffectExample predeterminado;

useEffect es una herramienta esencial para gestionar los efectos secundarios dentro del componente de función React. useEffect ayuda a mejorar el rendimiento, la mantenibilidad y la comprensibilidad del código.

3. utilizarContexto

Otro gancho comúnmente utilizado es el gancho useContext, que nos permite acceder a datos de contexto dentro de componentes funcionales. En React, useContext es una técnica para enviar datos con la ayuda de un árbol de componentes sin enviar manualmente los accesorios en cada etapa.

Veamos un ejemplo para comprender mejor el gancho useContext.

Utilice useContext para inicializar el contexto y llamar al método React.createContext, que toma el valor inicial como parámetro de entrada. Estamos utilizando un fondo amarillo y un color blanco como valor inicial.

 importar React, {useContext} de 'react';

 // Crea un gancho useContext
 const UseContextTheme = React.createContext({
 fondo: 'amarillo',
 color blanco'
 });

El componente UseContextThemeButton usa el contexto llamando al gancho useContext con el contexto como parámetro. Devolverá el valor de contexto actual, el fondo azul y la propiedad de color blanco.

 // Estos componentes utilizaron el contexto
 función UseContextThemeButton {
 const themeButton = useContext(UseContextTheme);

 devolver (
  < estilo del botón = {{ background: themeButton.background, color: themeButton.color }} >
   Soy un botón Usar tema contextual
  </ botón >
 );
 }

Ahora usamos el componente UseContextThemeProvider para envolver sus elementos secundarios en UseContextTheme.Provider, dándole al valor de propiedad un valor de contexto.

 // Este componente proporciona el contexto
 función UseContextThemeProvider({ niños }) {
 devolver (
  < UseContextTheme.Valor del proveedor = {{ background: 'blue', color: 'white' }} >
   {niños}
  </ UseContextTheme.Provider >
 );
 }

Ahora combinamos las funciones anteriores en una para que podamos llamarla como un componente en sí mismo.

 // Función que llama a todas las funciones anteriores
 función UseContextExample {
 devolver (
  <UseContextThemeProvider>
   < UseContextTheme_Button />
  </UseContextThemeProvider>
 );
 }

 exportar UseContextExample predeterminado;

Un gancho useContext es una herramienta esencial para acceder a datos de contexto en el componente funcional de React. Además, ayuda a optimizar el rendimiento del código al evitar volver a renderizarlo cada vez que cambia el valor del contexto.

4. utilizar reductor

El gancho useReducer es una herramienta esencial que nos permite manejar la lógica de estado compleja dentro del componente funcional. Es análogo al gancho useState. Sin embargo, ofrece más flexibilidad para determinar cómo se actualizó el estado.

El siguiente código muestra un ejemplo del gancho useReducer.

Comience creando una función llamada incrementDecrement que toma dos parámetros: estado y acción. La modificación del estado se describe por la acción, que es un objeto. En nuestro caso sumar y restar son dos acciones que aumentan y disminuyen el valor.

 importar React, {useReducer} de 'react';

 // Declarar la función incrementoDecremento
 función incrementarDecrement(estado, acción) {
 cambiar (tipo.acción) {
  caso 'resta':
   return {valor: estado.valor - 1};
  caso 'añadir':
   return {valor: estado.valor + 1};
  por defecto:
   arrojar un nuevo error;
 }
 }

La función incrementDecrementCounter utiliza el gancho useReducer, que toma la función incrementDecrement y el estado inicial como argumento. Primero, el estado inicial se declara como un valor inicializado en 0. Luego, el gancho useReducer devuelve la función de envío y el estado actual como salida.

La función de envío utiliza la acción de envío, que da como resultado la modificación del estado. Luego renderice los botones más y menos junto con el valor.

 función incrementarContadorDecremento {
 const (estado, envío) = useReducer(incrementDecrement, {valor: 0});
 devolver (
  <>
  <h3>
   Valor: {estado.valor}
  </h3>
   <p> </p>
   < botón onClick={ => despacho({ tipo: 'añadir' })}>+</ botón >
   < botón onClick={ => despacho({ tipo: 'restar' })}>-</ botón >
  </>
 );
 }

 exportar incrementDecrementCounter predeterminado;

Al hacer clic en el botón agregar aumentará el valor en uno, mientras que al hacer clic en el botón restar disminuirá el valor en uno.

En React, el gancho useReducer es útil porque evita renderizaciones innecesarias y ayuda a mantener el código.

5. utilizar nota

El gancho useMemo nos permite optimizar memorizando los valores y evitando la repetición innecesaria de componentes. Requiere una matriz de dependencia y una función como parámetro. La función devuelve el valor que debe memorizarse, mientras que un valor memorizado enumera las dependencias en la matriz de dependencias. Además, el valor memorizado se recalcula cada vez que se cambia el valor.

El siguiente código muestra un ejemplo del gancho useMemo.

El componente UseMemoExample usa el nombre, segundo nombre y apellido como un corchete que usa el gancho useMemo para contener el valor.

El componente UseMemoApp maneja el estado del primer, medio y último campo. Estos campos almacenan el nombre de una persona después de ingresar el texto. El estado se actualizará cada vez que se modifique el valor en el texto de entrada con la ayuda del evento onChange.

 importar React, {useState, useMemo} de 'react';

 const UseMemoExample = ({ primero, segundo, último }) => {
 Nombre constante = useMemo( => { 
return `${primero} ${medio} ${último}`;
 }, (primero, segundo, último));

 return < h1 >¡Bienvenido, {Nombre}!</ h1 >;
 };

 exportar constante UseMemoApp = => {
 const (primero, setFirst) = useState('John');
 const (medio, setMiddle) = useState('Adán');
 const (último, setLast) = useState('Doe');
 devolver (
  <div>
   <entrada
    tipo="texto"
    valor={primero}
    onChange={e => setFirst(e.objetivo.valor)}
   />
   <entrada
    tipo="texto"
    valor = {medio}
    onChange={e => setMiddle(e.target.value)}
   />
   <entrada
    tipo="texto"
    valor={último}
    onChange={e => setLast(e.target.value)}
   />
   <UseMemoExample primero={primero} medio={medio} último={último} />
  </div>
 );
 };

El componente muestra una constante Nombre como salida, que es la concatenación del nombre, segundo nombre y apellido de la persona.

En React, el gancho useMemo aumenta la eficiencia y el rendimiento de la aplicación.

6. Ganchos personalizados

Los enlaces personalizados permiten a los desarrolladores encapsular y compartir funciones entre diferentes componentes. El siguiente es un ejemplo para demostrar el enlace personalizado que describe la implementación de la dimensión de la ventana.

Creamos un gancho personalizado llamado CustomHooksToCheckWindowDimensions que devuelve el ancho y el alto de la ventana como salida, donde W es el ancho y H es el alto de la ventana. Estamos utilizando los ganchos useState y useEffect para determinar la dimensión de la ventana y modificar el valor del estado cada vez que se cambia el tamaño de la ventana.

CustomHooksToCheckWindowDimensions usa el gancho useState para inicializar el valor de estado alcanzando el ancho y alto internos de la ventana usando las propiedades window.innerWidth y window.innerHeight.

El gancho useEffect ayuda a monitorear la modificación de la dimensión de la ventana. Además, cuando se cambia el tamaño de la ventana, se invoca la función de cambio de tamaño pasada a addEventListener, que invoca setDim para reflejar el nuevo tamaño de la ventana.

 importar React, {useState, useEffect} de 'react';

 función CustomHooksToCheckWindowDimensions {
 const (tenue, setDim) = useState({
  W: ventana.anchointerior,
  H: ventana.alturainterior
 });

 utilizarEfecto( => {
  función de cambio de tamaño {
   establecerDim({
    W: ventana.anchointerior,
    H: ventana.alturainterior
   });
  }

  window.addEventListener('cambiar tamaño', cambiar tamaño);
  retorno => {
   window.removeEventListener('cambiar tamaño', cambiar tamaño);
  };
 }, );

 volver oscuro;
 }

Por último, el componente CustomHookApp llama a CustomHooksToCheckWindowDimensions, que devuelve el ancho y el alto de la ventana. La dimensión de la ventana se mostrará como salida.

 función CustomHookApp {
 const {W, H} = CustomHooksToCheckWindowDimensions;
 
devolver (
 <div>
 < h1 >La dimensión de la ventana es:</ h1 >
 < p >Ancho: {W}</ p >
 <p> Altura: {H} </p>
 </div>
 );
 }

 exportar CustomHookApp predeterminada;

Los ganchos personalizados le permiten manejar varios casos de uso, como manipulación de formularios y temporizadores, que antes no eran posibles.

Ventajas de usar ganchos React

Esta sección explorará las ventajas de usar ganchos. Los siguientes son los beneficios de usar ganchos en lugar de componentes de clase:

Reutilización de código y concisión

El uso de enlaces personalizados permite la encapsulación de la lógica y la reutilización de la lógica en múltiples componentes, lo que mejora la modularidad, la comprensibilidad, el rendimiento y la mantenibilidad del código. Además, el empleo de ganchos ayuda a minimizar el código repetitivo al crear componentes, lo que aumenta la concisión y hace que el código sea más fácil de entender.

Mejor actuacion

En React, los ganchos permiten a los desarrolladores optimizar componentes utilizando varios métodos y enfoques, incluidos useMemo y useCallback, lo que ayuda a mejorar el rendimiento de la aplicación.

Legibilidad mejorada y productividad del desarrollador.

En React, los ganchos son una herramienta esencial que aumenta la comprensibilidad del flujo lógico y los datos presentes en los componentes, lo que conduce a una mejor legibilidad y facilidad de depuración. Además, acelera el proceso de desarrollo, haciendo que el mantenimiento del código y de los componentes sea más fácil de entender.

Mejor accesibilidad y apoyo comunitario

Encapsular la lógica de las funciones de accesibilidad en enlaces personalizados y reutilizarlos en su aplicación se vuelve más sencillo con la ayuda de los enlaces. Además de ser un componente totalmente compatible del ecosistema React, la biblioteca Hooks tiene una comunidad considerable y activa de desarrolladores que colaboran activamente y comparten conocimientos y herramientas.

Mejor gestión del Estado

Los ganchos simplifican la gestión del estado de los componentes al encapsular la lógica para actualizar y modificar el estado en ganchos discretos y reutilizables.

Mejore el uso compartido de código y las pruebas simplificadas

La lógica de los ganchos se puede probar independientemente de los componentes que los utilizan, lo que facilita las pruebas unitarias eficientes. Además, los enlaces personalizados pueden compartir código entre los miembros del equipo y facilitar la reutilización del código cuando se trabaja en un proyecto complicado dentro de un grupo grande.

Los ganchos en React ofrecen varias ventajas que mejoran la calidad, el rendimiento y la mantenibilidad del código y simplifican el proceso de desarrollo. Con la ayuda de ganchos, una persona puede crear una aplicación dinámica, optimizada y escalable en React.

Pensamientos finales

React Hooks proporciona un enfoque sólido y flexible para crear componentes en React. Permiten un código más simple, más comprensible y más fácil de mantener. Al utilizar Hooks, los desarrolladores pueden crear aplicaciones complicadas con menos complejidad general y menos líneas de código fuente. También proporcionan un medio sencillo para gestionar el estado en múltiples componentes sin la necesidad de componentes basados ​​en clases o bibliotecas de estado global como Redux. Debe saber cómo utilizar React Hooks para aprovechar todo su potencial al desarrollar aplicaciones.

Si te gustó esto, asegúrate de consultar nuestros otros artículos sobre React.

• Principales preguntas y respuestas de la entrevista de React que necesita saber
• Pruebas unitarias en React: guía detallada
• ¿Para qué proyectos puede su empresa utilizar React?
• Lo que necesitas saber sobre React antes de usarlo en tu negocio
• 6 razones por las que React es tan popular