Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de React Hooks: ejemplos de useState y useEffect

 En este tutorial, aprenderemos sobre React Hooks y veremos ejemplos del uso del useState()gancho para agregar estado y el useEffect()gancho para realizar efectos secundarios en sus componentes funcionales.

React Hooks es una nueva característica lanzada recientemente por el equipo de React. Está incluido en React a partir de v16.7.

Tutorial de React Hooks

En este tutorial, aprenderemos a migrar nuestro proyecto anterior para usar componentes de función y React Hooks en lugar de componentes de clase, métodos de ciclo de vida y el objeto de estado.

Prerrequisitos

Necesitas tener:

  • Node.js 6+, npmv5.2 + y create-react-apppara ejecutar la aplicación React,
  • Conocimientos básicos de ES6.

Introducción a React Hooks

Antes de migrar nuestro proyecto de demostración a componentes funcionales y React Hooks, primero comprendamos qué son los hooks y por qué debemos usarlos.

Entonces, ¿por qué todo ese rumor sobre React hooks? ¿Y qué pueden hacer por ti?

Simplemente, si necesita usar funciones de React como eventos / métodos de estado y ciclo de vida (que es a menudo la mayoría de las veces), necesitará usar o cambiar a las clases de ES6 extendiendo React.Component . Pero ese ya no es el caso; con ganchos: ahora puede usar las características que se necesitan comúnmente en sus componentes funcionales .

¿Qué es un React Hook?

React es hoy en día la biblioteca de UI más popular y utilizada del mundo. El equipo está constantemente tratando de mejorar tanto el rendimiento de la biblioteca como la experiencia del desarrollador agregando nuevas funciones que facilitan la vida de los desarrolladores.

Un React Hook es una nueva característica para usar las React.Componentcaracterísticas en un componente funcional.

Estas funciones incluyen:

  • El objeto de estado,
  • Eventos del ciclo de vida como componentWillMountcomponentDidMountcomponentWillUpdatecomponentDidUpdateetc.
  • El contexto,
  • Los árbitros, etc.

Los componentes basados ​​en clases siguen siendo útiles. Es solo que ahora tiene más opciones para hacer lo mismo y depende de sus preferencias usar clases o funciones para crear sus aplicaciones React sin estar limitado por la falta de funciones con ninguna opción.

Al igual que con los otros conceptos de React; tienen nombres elegantes pero son conceptos simples de entender. Los enganches también son funciones simples que permiten a los desarrolladores "conectarse" a los métodos de estado y ciclo de vida de React desde componentes funcionales.

Los React Hooks no están disponibles en componentes basados ​​en clases, sino que le permiten usar React sin clases de JavaScript. Si prefiere usar funciones en lugar de clases (lo que se recomienda en JavaScript), simplemente puede comenzar a usar Hooks sin preocuparse por migrar todas sus aplicaciones a las clases.

Los Hooks le permiten usar "características de clase" en React al proporcionar un conjunto de funciones integradas como:

  • El useState()gancho para usar estados de componentes de funciones,
  • El useEffect()gancho para la realización de los efectos secundarios de los componentes de función (es equivalente a los métodos del ciclo de vida como componentDidMountcomponentDidUpdatecomponentWillUnmounten React clases),
  • El useContext()gancho para suscribirse a React Context desde un componente de función,

  • El useReducer()gancho para gestionar el estado de los componentes con un reductor.

  • useRef para React Refs,

  • El useCallbackgancho para devoluciones de llamada,

  • El useMemogancho de los valores memorizados,

  • El useImperativeMethodsgancho de los métodos imperativos,

  • El useMutationEffectgancho de los efectos de mutación,

  • El useLayoutEffectgancho para efectos de diseño.

También puede crear sus Hooks personalizados para reutilizar cualquier comportamiento con estado entre diferentes componentes.

Nota : React Hooks le permite tener componentes funcionales con estado .

Los React Hooks son funciones típicas de JavaScript, con la excepción de que deben obedecer algunas reglas:

  • Los React Hooks deben usarse en el nivel superior, es decir, no dentro de funciones anidadas u otras construcciones JS como bucles o condiciones if , etc.
  • Los React Hooks deben usarse en componentes funcionales, no en funciones regulares de JavaScript. También puede llamar a Hooks integrados desde sus Hooks personalizados

El equipo de React proporciona un complemento de linter que los desarrolladores pueden utilizar para asegurarse de que se respeten estas reglas para que los React Hooks puedan funcionar como se espera en su aplicación.

Ejemplo de acceso al estado en funciones con useState()

Ahora que hemos visto algo de teoría sobre React Hooks. Veamos un ejemplo simple de un componente de función con estado con el useState()gancho. Comencemos con un componente de función sin estado simple con el que estamos familiarizados.

Esta es una aplicación React simple con un ContactPagecomponente de función:

import React from 'react';
import { render } from 'react-dom';

function ContactPage(props) {
   return (
    <div>
     <h1>Contact Page</h1>
    </div>);
}

render(
  <ContactPage />,
  document.querySelector('#root'));

En el antiguo React, si queremos mantener o trabajar con cualquier estado en este componente, necesitaremos convertirlo en un componente de clase. Por ejemplo, digamos que necesitamos usar una variable de correo electrónico en nuestro componente. Esto es lo que tendremos que hacer:

class ContactPage extends React.Component {
  state = {
    email: 'a@email.com'
  }


  render() {
    return (
     <div>
       <h1>Contact Page</h1>
        <p>My email is {this.state.email}</p>
       </div>
    );
  }
}

Reescribimos nuestro componente para usar una clase en lugar de una función para poder usar el objeto de estado .

Ahora, gracias a React Hooks, podemos simplemente usar este código alternativo sin volver a escribir su componente:

import React,  { useState }  from  'react';
import { render } from 'react-dom';

function ContactPage(props) {
   const  [email, setEmail]  =  useState('a@email.com');
   return (
    <div>
       <h1>Contact Page</h1>
        <p>My email is {this.state.email}</p>     
    </div>);
}

Esta es nuestra función regular pero ahora tiene un estado gracias a la useState()función de gancho.

Nota : Las funciones de Hook comienzan con la palabra de uso, que es otra regla de Hooks.

El useState()gancho toma un estado inicial y devuelve una matriz con dos elementos:

  • El estado actual,
  • y una función para establecer el estado.

En nuestro ejemplo, pasamos la cadena a@email.com como estado inicial y usamos la asignación de destrucción de matrices para tomar variables y cambiarles el nombre correctamente.

Podemos acceder al estado actual usando emaily la función para establecer el estado usando setEmail().

El useState()gancho nos proporciona dos variables a las que debemos renombrar con nombres propios. Para poder cambiar el nombre de estas variables correctamente, necesita saber estas dos cosas:

  • El primer elemento de la matriz devuelta presenta el valor equivalente this.stateen los componentes de la clase.
  • El segundo elemento es una función para establecer ese valor que es equivalente a this.setState()en clases.

El estado puede ser cualquier objeto JavaScript válido.

Ejemplo de uso de The Effect Hook en React

Ahora que hemos visto el State Hook con un ejemplo y entendemos por qué necesitamos usarlo, es decir, tener estado en los componentes funcionales de React. Veamos un ejemplo usando el Effect Hook para poder realizar efectos secundarios en nuestros componentes funcionales sin recurrir al uso de métodos de ciclo de vida que solo están disponibles en componentes de clase.

Nota : Efecto ganchos son equivalentes a componentDidMountcomponentDidUpdatecomponentWillUnmountmétodos de ciclo de vida combinado.

Los efectos secundarios son operaciones comunes que la mayoría de las aplicaciones web deben realizar, como:

  • Obtener y consumir datos de una API de servidor,
  • Actualizando el DOM,
  • Suscripción a Observables, etc.

Nota : Los Hooks de efectos se ejecutarán después de cada renderizado, incluido el primer renderizado.

Aquí hay un ejemplo:

import React, { useState } from 'react';

function Customers() {
  const [customers, setCustomers] = useState([]);

  useEffect(() => {
    fetch('127.0.0.1:8000/customers')
      .then(response => response.json())
      .then(data => {
        setCustomers(data); // set customers in state
      });
  }, []); 
}

Primero usamos el useState()gancho con una matriz vacía para el estado inicial para crear una customersvariable de estado.

A continuación, usaremos el useFetch()gancho para ejecutar un efecto secundario que está enviando una solicitud, usando la API de Fetch, a un punto final de API que devuelve una lista de clientes.

Finalmente usamos el setCustomers()método para asignar los datos devueltos a la customersvariable de estado.

Conclusión

Puedes combinar muchos tipos de ganchos o usar el mismo gancho varias veces en tu aplicación sin ningún problema. De hecho, en la mayoría de las aplicaciones, tendrá que usar ambas para poder usar completamente los componentes funcionales sin recurrir a ninguna característica en los componentes basados ​​en clases.

Publicar un comentario

0 Comentarios