Często czuję tę sytuację za pomocą reagowania zwrotów zwrotnych:

const MyComponent = ({ onLoad }) => {
  useEffect => {
    // some stuff
    onLoad(/* args */);
  }, [onLoad]);

  return (<div />);
}

Problemem jest. Uważam, że mój komponent powinien ponownie załadować tylko raz. A dzięki Usefect muszę ustawić Onload w zależności, powodują to każdą zmianę władzy władzy, aby wywołać efekt.

Generalnie rozwiązuję ten problem z ref

const MyComponent = ({ onLoad: _onLoad }) => {
  const onLoadRef = useRef(_onLoad);
  onLoadRef.current = _onLoad;

  useEffect => {
    // some stuff
    onLoadRef.current(/* args */);
  }, []); // No dependencies anymore

  return (<div />);
}

Działa dobrze i rozwiązywać wiele podobnych problemów, ale uważam za nieco brzydki, a nie naprawdę przyjazny dla początkujących. Zastanawiam się, czy są lepsze rozwiązania, czy też to, co robię, to anty-patern?

0
Poyoman 28 październik 2020, 15:14

1 odpowiedź

Najlepsza odpowiedź

Podobnie jak z powyższych komentarzy: jest to dobry zasób, jak korzystać z useeffect https://reaccttraining.com/blog/useeffect-is- not -The-New-ComponentDidMount /

Niniejszy artykuł podkreśla główne przyczyny, dlaczego musisz myśleć o Useffect inaczej z metod cyklu życia komponentów klasy.

Często robimy pewną konfigurację, gdy składnik pierwszy montuje się jak połączenie sieciowe lub subskrypcja. Uczyliśmy się myśleć w kategoriach "momentów w czasie" z takimi rzeczami takimi jak ComponentDidMount (), ComponentDidUpdate () i ComponentWillMount (). Naturalne jest podjęciem tej wcześniejszej wiedzy na temat reakcji i poszukiwania równoważników 1: 1 w haczykach. Zrobiłem to sam i myślę, że wszyscy na początku. Często zobaczę w moich warsztatach ...

"Jakie są haczyki odpowiadające [niektóre metodzie cyklu życia]?"

Szybką odpowiedź jest to, że haczyki są zmianą paradygmatu z myślenia pod względem "cyfrów i czasu" do myślenia w zakresie "stanu i synchronizacji z domem". Próbując wziąć starego paradygmatu i zastosować go do haczyków, nie działa bardzo dobrze i może cię powstrzymać.

Daje również dobry bieg z Useffect i przykład konwersji z komponentu klasy do haczyków.

Innym dobrym źródłem jest https://overreaged.io/a-complete-guide-to -UseEffect / z Dana Abramowa. Zdecydowanie polecam to, nawet jeśli jest bardzo długo do czytania. Naprawdę pomogło mi, kiedy po raz pierwszy zacząłem używać haków, aby myśleć o nich we właściwy sposób.

Oto mały fragment od początku artykułu.

Ale czasami podczas użytkowania, kawałki nie pasują do siebie. Masz dokuczliwe uczucie, że czegoś brakuje. Wydaje się podobnie do cyrnych cyfr ... Ale czy to naprawdę? Znajdujesz się pytając pytania:

🤔 Jak powtórzyć ComponentDidMount z UseEffect?

🤔 Jak poprawnie pobieram dane wewnątrz Useffect? Co jest []?

🤔 Czy muszę określić funkcje jako zależności efektu, czy nie?

🤔 Dlaczego czasami dostaję nieskończoną pętlę pobierania?

🤔 Dlaczego czasami dostaję starą wartość lub proporcje w moim efekcie?

Kiedy zacząłem używać haków, byłem także zdezorientowany przez wszystkie te pytania. Nawet podczas pisania początkowego dokumentów, nie miałem mocnego zrozumienia niektórych subtelności. Odkąd miałem kilka chwil "Aha", które chcę podzielić się z tobą. To głębokie nurkowanie sprawi, że odpowiedzi na te pytania wyglądają oczywiste dla ciebie.

Aby zobaczyć odpowiedzi, musimy zrobić krok z powrotem. Celem tego artykułu nie należy podać listy przepisów punktowych punktów. To, aby pomóc naprawdę "GROK" Useffect. Nie będzie wiele do nauczenia. W rzeczywistości spędzimy większość zużycia czasu.

Dopiero po tym, jak przestałem patrzeć na Haczyk Useffect przez pryzmat znanych metod życia cykli, że wszystko dla mnie spotkało.


Jeśli chodzi o pierwotne pytanie powyżej, stosowanie refs jest dobrym sposobem, aby móc nie mieć efektu, ma określone funkcje i wartości jako zależności.

W szczególności są dobre, jeśli chcesz przeczytać najnowszą wartość, a nie schwytaną wartość w jakimś wywołaniu zwrotnym określonym w efekcie

W tym przykładzie z plakatu:

const MyComponent = ({ onLoad: _onLoad }) => {
  const onLoadRef = useRef(_onLoad);
  onLoadRef.current = _onLoad;

  useEffect => {
    // some stuff
    onLoadRef.current(/* args */);
  }, []); // No dependencies anymore

  return (<div />);
}

Jest to całkowicie ważny sposób na robienie rzeczy, choć w zależności od argsów, które przebiega, a jak to działa, może to być dobry pomysł, aby dodać dodatkowe elementy do tablicy zależności, aby zawsze była synchronizowana.

Można tu abstrakcjonistycznie w Wysteriness UseW, ale niestety zasady Hooks EsLint Plugin nie rozpoznałby go jako ref. Pracowałoby, wystarczy dodać ONLOADREF do tablicy zależności, choć nigdy nie spowodowałoby ponownego uruchomienia efektu. Jest podobny do rzeczy, takich jak wysyłka z Reacture-Redux, gdzie wiesz, że jest stabilna, ale wtyczka EsLint nie może tego wiedzieć.

function useRefUpdater(value) {
  const ref = useRef(value);
  // I forget where I saw that you should change the ref in a useEffect
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref;
}
const MyComponent = ({ onLoad: _onLoad }) => {
  const onLoadRef = useRefUpdater(_onLoad)
  useEffect(() => {
    // some stuff
    onLoadRef.current(/* args */);
  }, []); 
     // React Hook useEffect has a missing dependency: 'onLoadRef'. Either include it or remove the dependency array.
  return <div />;
};
2
Zachary Haber 29 październik 2020, 14:22