Reaccionar useEffect en profundidad / uso de useEffect?

10

Estoy tratando de entender el useEffectgancho en profundidad.

Me gustaría saber cuándo usar qué método y por qué.

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

javascript reactjs react-redux John_ny
fuente

3

1. Se llama en el montaje y en cada actualización de dependencia (cualquier cambio de estado / accesorios). 2. Solo se llamó al montaje porque especificó una lista vacía de dependencias. 3. Llamado en el montaje y en el cambio de cualquiera de las dependencias enumeradas

ajobi

2

Dan Abramov ha escrito un excelente post sobre useEffect: overreacted.io/a-complete-guide-to-useeffect . Deberías leerlo ;-)

rphonika

18

useEffect(callback)

Se ejecuta en cada componente render.

Normalmente se usa para la depuración, de forma análoga a la ejecución del cuerpo de la función en cada render:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Se ejecuta una vez en un montaje de componentes.

Generalmente se usa para inicializar el estado de los componentes mediante la obtención de datos, etc.

Nota : La devolución de llamada ejecutada después de la fase de representación ("Gotcha" conocido).

useEffect(callback,[arg])

Se ejecuta en cambio de argvalor.

"Al cambiar" se refiere a una comparación superficial con el valor anterior de arg(compara el valor de argla representación anterior y la actual prevArg === arg ? Do nothing : callback()).

Usualmente se usa para ejecutar eventos en accesorios / cambio de estado.

Nota: Se pueden proporcionar dependencias múltiples: [arg1,arg2,arg3...]

Una guía completa useEffectde Dan Abramov
useEffectAPI .
Usando el efecto hook - React docs.

Dennis Vash
fuente

1

Si está familiarizado con los métodos de ciclo de vida de la clase React, puede pensar en useEffect Hook como componentDidMount, componentDidUpdate y componentWillUnmount combinados.

1.useEffect sin segundos parámetros: Esto se usa cuando queremos que algo suceda, ya sea cuando el componente se acaba de montar o si se ha actualizado. Conceptualmente, queremos que suceda después de cada render.

2.useEffect con segundos parámetros como []: Esto se usa cuando queremos que algo suceda en el momento del montaje del componente, si solo se ejecuta una vez en el momento del montaje. Está más cerca del componente familiarDidMount y componentWillUnmount.

3.useEffect con algunos argumentos pasados en el segundo parámetro: esto se usa cuando queremos que algo suceda en el momento en que pasó el pramter, por ejemplo Los argumentos han cambiado en su caso.

Para más información. marque aquí: https://reactjs.org/docs/hooks-effect.html

neelesh bisht
fuente

0

3.useEffect con algunos argumentos pasados en el segundo parámetro useEffect (() => {}, [arg])

se ejecutará primero y luego se ejecutará nuevamente si cambia arg

También se olvida de preguntar qué pasa con el retorno dentro de useEffect ... Sus usos para la limpieza se ejecutará cuando se desmonte el componente

Abu Dujana Mahalail
fuente

Reaccionar useEffect en profundidad / uso de useEffect?

Respuestas: