React useEffect dogłębnie / use useEffect?

10

Staram się useEffectdogłębnie zrozumieć hak.

Chciałbym wiedzieć, kiedy użyć której metody i dlaczego?

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 Jasio
źródło
3
1. Jest wywoływany podczas montowania i każdej aktualizacji zależności (zmiana dowolnego stanu / rekwizytu). 2. Wywoływane tylko podczas montowania, ponieważ określono pustą listę zależności. 3. Wezwany podczas montowania i zmiany którejkolwiek z wymienionych zależności
ajobi
2
Dan Abramov napisał doskonały post na blogu o useEffect: overreacted.io/a-complete-guide-to-useeffect . Powinieneś to przeczytać ;-)
rphonika

Odpowiedzi:

18 
useEffect(callback)

Działa na każdym renderowaniu komponentu.

Zwykle używany do debugowania, analogicznie do wykonywania treści funkcji na każdym renderowaniu:

const Component = () => {
  callback()
  return <></>;
};
useEffect(callback,[])

Działa raz w przypadku montażu komponentowego.

Zwykle używany do inicjowania stanu składników przez pobieranie danych itp.

Uwaga : Wywołanie zwrotne realizowane po tej fazie renderowania (znany „Mam cię”).

useEffect(callback,[arg])

Działa na zmianę z argwartością.

„Przy zmianie” odnosi się do płytkiego porównania z poprzednią wartością arg(porównuje wartość argz poprzedniego renderowania z bieżącym prevArg === arg ? Do nothing : callback()).

Zwykle używany do uruchamiania zdarzeń na rekwizytach / zmianie stanu.

Uwaga: Można podać wiele zależności: [arg1,arg2,arg3...]

Dennis Vash
źródło
1

Jeśli znasz metody cyklu życia klasy React, możesz pomyśleć o użyciu Haczyka Efektywnego jako połączonych składników componentDidMount, componentDidUpdate i componentWillUnmount.

1. useEffect bez drugich paramentów: Jest to używane, gdy chcemy, aby coś się wydarzyło albo po zamontowaniu komponentu, albo po jego aktualizacji. Koncepcyjnie chcemy, aby stało się to po każdym renderowaniu.

2. useEffect z drugim paramentem jako []: Jest używany, gdy chcemy, aby coś się wydarzyło w czasie montowania komponentu, jeśli wykona się tylko raz w momencie montowania. Jest bliżej znanego componentDidMount i componentWillUnmount.

3. useEffect z kilkoma argumentami przekazanymi w drugim parametrze: Jest on używany, gdy chcemy, aby coś się wydarzyło w momencie, gdy minął wózek, np. argumenty zmieniły się w twoim przypadku.

Po więcej informacji. sprawdź tutaj: https://reactjs.org/docs/hooks-effect.html

Neelesh Bisht
źródło
0

3. useEffect z niektórymi argumentami przekazanymi w drugim parametrze useEffect (() => {}, [arg])

uruchomi się najpierw, a następnie uruchomi się ponownie, jeśli arg zmieni się

Zapomniasz również zapytać, co ze zwrotem w useEffect ... Jego zastosowania do czyszczenia uruchomią się po zdemontowaniu komponentu

Abu Dujana Mahalail
źródło