React useEffect dogłębnie / use useEffect?

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])

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...]

• Kompletny przewodnik useEffectpo Dan Abramov
• useEffectAPI .
• Korzystanie z haka efektu - Reaguj dokumenty.

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

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