Saltar al contenido

Introducción a Reaccionar useEffect hookNov, 24thIn este tutorial, vamos a aprender acerca de cómo utilizar useEffect …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo utilizar useEffect en aplicaciones reaccionar con ejemplos.

Nota: Si usted no sabe acerca de ganchos y luego salir Qué es un gancho

¿Cuál es el gancho useEffect?

Si no está familiarizado con los métodos de ciclo de vida reacciona normalmente se usan en componentes basadas en clases. En

reaccionar, useEffect gancho nos ayuda a usar algunos métodos de ciclo de vida de los componentes funcionales.

Ellos son tres métodos de ciclo de vida componentDidMount, componentDidUpdate y componentWillUnmount que podemos utilizar los combinaron en un gancho useEffect.

Vamos a aprender la useEffect mediante el uso de ejemplos.

import React, { useEffect, useState } from "react";

function App() {
const [value, setValue] = useState(0);

// this function runs when component mounts and component updates useEffect(() => { document.title = "My app"; });
return (

{value}

);
}

En el código anterior, nos importó dos ganchos que son useEffect y useState.

Si usted no sabe acerca de useState gancho entonces el pago my tutorial anterior

El useEffect gancho toma la función como un argumento y se ejecuta esta función cada vez que los montajes componentis a la DOM.

también hemos añadido un botón de incremento que se utiliza para incrementar el valor y vuelve a renderizar el DOM, pero siempre que el componente es re-renderizados useEffect Vuelve a ejecutar la función que se pasa como argumento porque en la actualidad, hemos activado dos métodos de ciclo de vida componentDidMount, componentDidUpdate.

Para detener el método del ciclo de vida componentDidUpdate necesitamos pasar una matriz vacía [] como un segundo argumento al gancho useEffect.

import React, { useEffect, useState } from "react";

function App() {
const [value, setValue] = useState(0);

//The function only runs when component mounts to dom useEffect(() => { document.title = "My app"; },[]);
return (

{value}

);
}

Ahora, que dejó de funcionar cuando la función de un componente se re-prestados.

En lugar de dejar la matriz vacía, sino que también puede pasar un valor condicional a la matriz para ejecutar la función siempre que la condición dada es verdadera.

function App() {
const [value, setValue] = useState(0);
const [active, setActive] = useState(false);

//The function runs when component mounts to dom
useEffect(
() => {
document.title = "My app";
if (value === 5) {
setActive(!active); }
},
// re-run the function when value === 5
[value === 5] );

return (

{value}

{/*We only disabled the button when value===5*/}

{active &&

You've reached your limit for today

}

);
}

En el código anterior, pasamos el valor condicional === 5 a la matriz de modo que la función se ejecuta inicialmente se monta cuando el componente a dom y se ejecuta de nuevo cuando los alcances de valor a 5.

¿has visto en la imagen de arriba desactivamos el botón cuando el valor alcanza a 5?

useEffect gancho ejemplo de datos Obtención

también puede utilizar el useEffect para ir a buscar los datos en componentes funcionales.

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const useFetch = url => {
const [data, setData] = useState(null);

async function fetchData() {
const response = await fetch(url); const json = await response.json();
setData(json); }

useEffect(() => {fetchData()},[url]);
return data;
};

function App() {

const data = useFetch("https://jsonplaceholder.typicode.comodos/1");

if (!data) {
return

Loading...

;
} else {
return (

  • {data.id}
  • {data.title}

)
}
}

export default App;