React es un marco de JavaScript front-end. Si bien crear páginas HTML y administrarlas puede volverse tedioso, React facilita las cosas al dividir los elementos en pantalla y su lógica en componentes.

React aporta mucho, pero una de las características más útiles es la gestión del estado. En este artículo, aprenderá cómo administrar el estado usando React Hooks. Antes de continuar, este artículo asume que conoce los conceptos básicos de React.

¿Qué son los Hooks en ReactJS?

El gancho es un nuevo concepto introducido en React para administrar el estado y otros características de React. Al usar ganchos en React, puede evitar escribir código extenso que de otra manera usaría clases. El siguiente ejemplo muestra un ejemplo de useState gancho.

const [variable, setVariable] = useState (valor inicial);

Aquí el variable es el estado y el setVariable es la función que establece el estado. useState es el gancho que contiene el valor inicial de la variable de estado. No se preocupe si esto no tiene ningún sentido para usted. Al final de este tutorial, tendrá una sólida comprensión de los ganchos.

Hay dos tipos de anzuelos:

• Ganchos básicos
  1. useState
  2. useEffect
  3. useContext
• Ganchos adicionales
  1. useRef
  2. useMemo
  3. useReducer

useState ()

los useState el gancho ayuda a administrar el estado. Anteriormente, en el desarrollo de React, la gestión del estado se realizaba mediante clases. La sintaxis del estado se escribió dentro del constructor y usó la esta palabra clave. Con la introducción de React hooks, los desarrolladores tienen la libertad de administrar el estado utilizando componentes funcionales.

Puede consultar el ejemplo anterior para conocer la sintaxis de los ganchos de React. El ejemplo más simple de explicar useState () es el ejemplo de variable de recuento:

importar {useState} de "reaccionar";
función App () {
const [cuenta, setCount] = useState (0);
regreso (


Ejemplo de ganchos

{contar}

setCount (count + 1)}> Agregar
setCount (count-1)}> Restar



);
}

los useState hook tiene una variable y un método que se usa para establecer el valor de la variable. los useState hook acepta el valor inicial del estado como parámetro. Puede establecer cualquier valor para la variable de recuento utilizando el setCount método.

Hay dos botones en el código anterior para incrementar y disminuir el valor del contar variable. Mientras incrementa, puede agregar +1 al estado de conteo actual y -1 para disminuir el conteo en 1.

useEffect

los useEffect hook actualiza el estado de la página web después de cada cambio de estado. los useEffect Hook se introdujo para eliminar los efectos secundarios de los componentes basados ​​en clases. Antes de la introducción de componentes basados ​​en funciones, se realizaba un seguimiento de los cambios de estado mediante los componentes del ciclo de vida: componenteDidMount y componentDidUpdate. los useEffect hook acepta una matriz de dependencia. Todos los cambios en las variables de estado mencionadas en la matriz de dependencia se rastrean y muestran mediante el useEffect gancho.

Un ejemplo clásico del uso de useEffect gancho es obteniendo datos de una API o calcular los me gusta o las suscripciones en una publicación.

useEffect (() => {
// código
}, [matriz de dependencia]);

Considerando el ejemplo anterior

importar {useState, useEffect} de "reaccionar";
función App () {
const [cuenta, setCount] = useState (0);
useEffect (() => {
document.title = `Ha hecho clic durante $ {count} veces`;
}, [contar]);
regreso (


Ejemplo de ganchos

{contar}

 setCount (count + 1)}> Agregar



);
}

Al pasar el contar variable de estado en el useEffect matriz de dependencia, comprueba si el estado ha cambiado o no. A continuación, establece el título del documento en la variable de recuento.

useContext

los useContext hook ayuda a pasar datos a través del componente sin hacerlo manualmente a través de accesorios. Hace que el uso de la API de contexto sea rápido y fácil. Tendrá una mejor comprensión después de ejecutar un ejemplo.

Primero, comprenda cómo se ve el código sin usar Context. Como puede ver, debe pasar el texto a través de accesorios al componente secundario. Para evitar complejidades, puede utilizar el useContext gancho.

exportar aplicación de función predeterminada () {
let text = "Hola, Bienvenido a MUO";
regreso (






);
}
const ChildComponent = ({texto}) => {
regreso 
{texto}
;
};

En primer lugar, cree un proveedor en su archivo principal (App.js).

const Context = React.createContext (nulo);

los Aplicación El componente es el componente de nivel superior o el componente "principal". Necesita envolver todo el componente en el y pase el objeto o los datos que desea representar en el componente secundario.

exportar aplicación de función predeterminada () {
let text = "Hola, Bienvenido a MUO";
regreso (








);
}

Ahora, cree un componente secundario y acceda a la propiedad de texto usando el useContext gancho. Pasa el Contexto variable usando createContext.

const ChildComponent = () => {
let text = useContext (Contexto);
console.log (texto);
regreso 
{texto}
;
};

Relacionado: Frameworks de JavaScript que vale la pena aprender​​​​​

Mucho más para explorar con React

Acabas de aprender los conceptos básicos de los ganchos. Es una de las mejores características de React y también bastante amigable para los desarrolladores. React es uno de los mejores frameworks frontend para aprender hoy sobre oportunidades laborales, crear aplicaciones de una sola página o simplemente para ampliar su conocimiento de programación.

Hablando de ampliar su conocimiento, administrar el estado es solo una habilidad que los desarrolladores de React deben practicar. Otras características clave, como los accesorios, merecen la misma atención.

Cómo usar accesorios en ReactJS

Si está buscando consejos sobre cómo usar accesorios en ReactJS, está en el lugar correcto.

Leer siguiente

Sobre el Autor