A medida que la biblioteca ReactJs recibe nuevas actualizaciones, se están agregando muchas cosas y algunas que también están obsoletas. ReactJs se está volviendo más poderoso día a día debido a tales actualizaciones. Como desarrollador, debe mantenerse actualizado con las nuevas funciones que aparecen en cada versión.
¿Has oído hablar de React Hooks?
Bueno, React Hooks, una característica que está disponible en React v16.7.0-alpha, es algo increíble que debes conocer.
Aquí hay un adelanto de React Hooks.
En el código anterior, useStatees el primer Hook.
Ahora saltemos al problema que Reacts Hooks resolverá.
Después de todo, todas las funciones nuevas se introducen para resolver un problema. Aquí está la lista de cosas que el sitio web oficial de react tiene que decir sobre los problemas que se resolverán.
Es difícil reutilizar la lógica con estado entre componentes
El comportamiento reutilizable no se puede adjuntar al componente React. Un buen ejemplo de ello podría ser la conexión a la tienda. Si tiene algo de experiencia en React, es posible que conozca algunos de los patrones, como los accesorios de renderizado y los componentes de orden superior, que pueden ser útiles para resolver tales problemas. Al usar estos patrones, los componentes deben reestructurarse para poder usarlos, lo que hace que el código sea más difícil de seguir y mantener.
Con la introducción de Hooks, la lógica con estado se puede extraer del componente. Esto permite que se pruebe de forma independiente y se pueda reutilizar.
Con Hooks, puede reutilizar la lógica con estado sin cambiar realmente la jerarquía de sus componentes.Los componentes complejos se vuelven difíciles de entender
Hay momentos en que un componente pasa de tener un estado pequeño a un estado inmanejable de lógica con estado.
Cada método de ciclo de vida a veces contiene una combinación de lógica no relacionada. Por ejemplo, un componente puede realizar la recuperación de algunos datos a través de llamadas API en componentDidMounty componentDidUpdate. Sin embargo, el mismo componentDidMountmétodo también puede contener parte de la lógica no relacionada.
Esta lógica configura detectores de eventos con limpieza realizada en componentWillUnmount. El código relacionado que cambia juntos se divide.
El código no relacionado que se combina en un solo método trae errores e inconsistencias.
A menudo nos encontramos con una situación en la que no podemos dividir un componente grande en otros más pequeños debido a los valores con estado. Además, resulta difícil probarlos.
Para resolver este problema, Hooks le permite dividir un componente en funciones más pequeñas según las piezas relacionadas. Un buen ejemplo de ello podría ser la configuración de una suscripción o la obtención de datos , independientemente de la división del código según el método del ciclo de vida.
Con Hooks, se pueden usar más funciones de React sin la necesidad de clases.Pero, ¿cómo funcionan realmente los Hooks?
Aquí está el fragmento de código que vimos arriba:
Enlace a CodeSandbox
El uso de useStatees el Hook del que estamos hablando.
Lo llamamos dentro de un componente de función para agregarle un estado local. React conservará este estado entre todos los sucesos de re-renderización. useStatedevuelve un par que tiene el valor del estado actual y una función que le permite actualizar el valor.
Puede llamar a esta función desde un controlador de eventos o desde otro lugar. Es similar a this.setStateuna clase React, pero no fusiona el estado antiguo y el nuevo por completo.
Solo hay un argumento para useStateeso es el estado inicial. En este ejemplo dado arriba, el estado inicial es 0porque nuestro contador comienza desde cero. Tenga en cuenta que this.state, a diferencia de esto , el estado aquí no tiene que ser necesariamente un objeto; sin embargo, puede ser un objeto si lo desea.
Declarar múltiples variables de estado
La sintaxis de desestructuración de matrices da diferentes nombres a las variables de estado que declaramos llamando useState. Estos nombres no pertenecen a parte de la useStateAPI. En cambio, React asume que si llamas muchas veces, lo estás haciendo en el mismo orden durante el tiempo de cada render.
Gancho de efecto
Al trabajar con React, es posible que ya haya trabajado en la obtención de datos, las suscripciones o el cambio manual del DOM de los componentes de React. Llamamos a estas operaciones como "efectos secundarios" (o "efectos" en resumen).
El gancho de efectos useEffect, agrega la capacidad de realizar los efectos secundarios de un componente de función. Tiene el mismo propósito que componentDidMount, componentDidUpdatey componentWillUnmounten las clases React, pero unificado en una única API.
Por ejemplo, el siguiente componente establece el título del documento después de que React actualice el DOM:
Enlace a CodeSandbox
Cuando haces una llamada a useEffect, le estás diciendo a React que ejecute tu función de "efecto" después de eliminar los cambios en el DOM. Los efectos se declaran dentro del componente y, por lo tanto, tienen acceso a sus accesorios y estado. De forma predeterminada, React ejecuta los efectos después de cada renderizado que ocurre, incluido el primer render.
Reglas de Hooks
Los hooks son funciones de JavaScript, pero tienen dos reglas adicionales:
- Solo llame a Hooks en el nivel superior . No intente llamar a Hooks dentro de bucles, condiciones o funciones anidadas.
- Solo llame a Hooks desde los componentes de la función React . No intente llamar a Hooks desde funciones regulares de JavaScript.
Bueno, este es un vistazo rápido a React Hooks. Para una descripción más detallada, siga este enlace a continuación:
Ganchos de un vistazo - React
Una biblioteca de JavaScript para crear interfaces de usuario reactjs.org
¡Feliz aprendizaje! ? ?