¿QUÉ SON LOS HOOKS?

Hooks son funciones que te permiten “enganchar” el estado de React y el ciclo de vida desde componentes funcionales. Los hooks no funcionan dentro de las clases — te permiten usar React sin clases. (No recomendamos reescribir tus componentes existentes de la noche a la mañana, pero puedes comenzar a usar Hooks en los nuevos si quieres.)

React proporciona algunos Hooks incorporados como useState.

Con respecto a las llamadas a los Hooks, hay que tener en cuenta que no debemos llamarlo dentro de ciclos, condicionales o funciones anidadas

Hook de estado(useState)

Importaremos useState de react:

1

En este primer ejemplo, utilizaremos useState en una función. Para crear una variable de estado en una función, usaremos la siguiente sintaxis:

const[NombreVariable,NombreFunción]=useState(ValorPorDefecto)

NombreFunción: este será el nombre de la función que nos permitirá cambiar el valor de nuestra variable.

2

Ya estamos preparados para pintar y cambiar el valor de la variable mediante un botón.

3

Finalmente pintaremos nuestra función en la App para ver el resultado.

4
5

También podremos utilizar las variables de estado en componentes, pero cambiara su sintaxis de la siguiente manera:

6
7
8

Hook de efecto(useEffect)

En nuestros componentes de React con clases, habitualmente queremos realizar cambios cuando esté haya actualizado el DOM.

Para ello encontramos los efectos componentDidMount y componentWillMount. En este ejemplo querremos cambiar el titulo de nuestra pagina cuando React haga cambios en el DOM.

Con Clases:

9

Deberemos usarlos juntos para conseguir el efecto de cargar el número de clicks, cuando nuestro componente ha sido montado o este sea actualizado, en nuestro título de la página.

Por lo que hemos duplicado el código en los dos métodos del ciclo de vida en la clase.

Este efecto podemos lograrlo con useEffect de la siguiente manera:Con Hooks:

10
11

Por defecto este efecto ejecuta después del primer renderizado y después de cada actualización.

Al usar este Hook, le estamos indicando a React que el componente tiene que hacer algo después de renderizarse. React recordará la función que le hemos pasado (nos referiremos a ella como nuestro “efecto”), y la llamará más tarde después de actualizar el DOM. En este efecto, actualizamos el título del documento.

Ejemplo Practico

Realizaremos una aplicación que nos dará la bienvenida en su título, pudiendo ser customizado con el nombre del usuario. Además, crearemos una sencilla tienda de productos con un componente usando variables de estado.

En primer lugar, comencemos con la bienvenida.

Necesitaremos una variable de estado para almacenar el nombre que el usuario introduzca y una función para realizar esta acción. Pero anteriormente deberemos importar los Hooks a utilizar:

12
13

En segundo lugar, pintaremos en nuestra página el nombre del usuario, la caja de texto y el botón para realizar la acción.

14

Por último, usaremos el useEffect para cambiar el título de nuestra página, añadiendo el nombre del usuario si este lo hubiera introducido.

15

Una vez finalizada la bienvenida nos dispondremos a realizar la tienda de productos.

Crearemos el componente y en el constructor instanciaremos la variable de estado que será el carrito y la función que hará la acción de introducir los productos.

16

Creamos la función comprar que llenara el carrito con el producto seleccionado.

17

Llamamos a dicha función en el evento clic de cada botón u pintamos el contenido del carrito en la página.

19

Para finalizar importamos el componente en App.js y lo llamamos en el render:

20
21

Autor/a: David Alpañes Peláez

Curso: Microsoft MCSA Web Applications + Microsoft MCSD App Builder + Xamarin

Centro: Tajamar

Año académico: 2019-2020

GitHub: https://github.com/davidalpanes/Hooks_React

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.