¡Bienvenido de nuevo, me alegro de que estés aquí! Hoy voy a repasar los React Hooks porque he estado trabajando con ellos en mi proyecto actual y creo que son extremadamente útiles. Voy a hacer un recorrido rápido que, con suerte, lo ayudará a usarlos en su próxima aplicación React. Repasaré el propósito de los ganchos y por qué son tan útiles. Luego, te mostraré cómo implementar Hooks en tu aplicación React y te guiaré con un ejemplo. ¡Empecemos!

Introducción a los ganchos de reacción

React Hooks fue una nueva API que se incluyó en la implementación de React v16.8 y se presentó como una nueva forma de usar el estado en componentes funcionales sin crear una clase. ¡Pero los ganchos son mucho más poderosos que eso! Los ganchos permiten a los desarrolladores de React usar el estado y otros métodos de ciclo de vida dentro de los componentes funcionales. También funcionan bien junto con el código existente, por lo que pueden adoptarse fácilmente en una base de código.

Beneficios de los ganchos de reacción

Según la documentación oficial de ReactJS , hubo tres razones principales para el lanzamiento de React Hooks. Primero, antes de Hooks, era muy difícil reutilizar la lógica de estado entre los componentes. Hooks le permite reutilizar la lógica de estado entre los componentes sin cambiar su composición. En segundo lugar, las clases son difíciles de usar y, a veces, confusas. Para usar las clases tendrías que entender cómo estoen JavaScript funciona, que es muy diferente de otros lenguajes. React Hooks ayuda a facilitar la transición de otros lenguajes y permite a los desarrolladores obtener los beneficios de React sin tener que usar clases. Por último, ayuda a simplificar los componentes al permitir que los desarrolladores separen un solo componente en particular en varias funciones más pequeñas en función de qué partes del componente separado están relacionadas.

Dos reglas de los ganchos de reacción

Solo hay dos reglas que el equipo central de React ha descrito en su propuesta que deben cumplirse estrictamente al usar React Hooks. La primera es, no utilice Hooks dentro de bucles, condiciones o funciones anidadas . Al seguir la primera regla, “ …garantiza que los Hooks se llamen en el mismo orden cada vez que se renderiza un componente y permite que React conserve correctamente el estado de los Hooks entre múltiples useStatey useEffectllamadas. “La segunda es, solo usa ganchos dentro de una función de React . Al seguir la segunda regla, “ garantiza que toda la lógica con estado en un componente sea claramente visible desde su código fuente. ”

¿Cómo implementamos los ganchos de reacción?

Ahora que tiene una mejor comprensión de React Hooks, está listo para aprender cómo implementarlos. En realidad, hay 10 Hooks incorporados en React v16.8, pero solo cubriré el Hook más fundamental, useState() . Voy a ver un ejemplo para mostrarle cómo se usa useState() y la sintaxis. ¡Una vez que aprenda a usar esta función, estará bien encaminado para implementar Hooks en su aplicación React!

usarEstado()

El gancho useState() permite a los desarrolladores actualizar, manejar y manipular el estado dentro de los componentes funcionales. Como dije anteriormente, es el más básico y fundamental de los Hooks y te permitirá alejarte del uso de clases. Veamos el siguiente ejemplo para explicar el poder y la sintaxis del gancho useState() .

Lo primero que debemos hacer en el componente es asegurarnos de importar el gancho useState() de React (ver línea 1). Ahora, como puede ver arriba, puedo usar una función en lugar de crear una clase para el componente de la aplicación. En la línea 5, verá la sintaxis utilizada para establecer un objeto de estado, edad . La segunda variable, setAge , funciona igual que setState() cuando usamos clases, y te permite cambiar el objeto de estado, age . El parámetro dentro de useState() es el valor predeterminado/inicial del objeto de estado. Luego puede ver en la línea 7 que la función setAge se usa para cambiar el valor de la edadvariable cada vez que se hace clic en el botón. Puede ver cómo se ve en el navegador a continuación.

Puede ver en el navegador que cada vez que un usuario presiona el botón, la edad, que también se muestra, aumentará en 1.

Conclusión

Ahora que ha obtenido toda la información y los conceptos básicos sobre React Hooks, ¡debe estar armado con las herramientas para implementarlos en su próxima aplicación React! Mencioné anteriormente que en realidad hay 10 Hooks diferentes que vienen con la API. También pueden ser muy útiles en la construcción de componentes funcionales limpios. Sin embargo, con useState() tiene suficiente para comenzar la implementación. ¡Te desafío a leer más a fondo la documentación de React Hooks para aprender sobre los otros Hooks en la API! ¡Estoy tan contenta de que me hayas acompañado de nuevo y si sigues el ritmo, te veré la semana que viene!