Jaka jest różnica między useEffect, gdy przekazujesz zależności jako drugi parametr, a useCallback? Zasadniczo nie uruchamiaj obu funkcji/kodu przekazanego jako pierwszy parametr, gdy ...

2
klondike 29 czerwiec 2021, 07:41

4 odpowiedzi

Najlepsza odpowiedź

Zbyt się różnią.

useEffect uruchamia funkcję wewnątrz, gdy zmieni się tablica zależności.

useCallback utworzy nową funkcję, gdy zmieni się tablica zależności.

Nie możesz przełączyć useEffect za pomocą samego useCallback, ponieważ potrzebujesz również logiki do uruchomienia nowo utworzonej funkcji. (Przypuszczam, że mógłbyś to zaimplementować, gdybyś również użył ref, ale byłoby to dość dziwne.)

Nie możesz zamienić useCallback na useEffect, ponieważ bardzo często nie chcesz uruchomić nowo utworzonej funkcji od razu - raczej zwykle chcesz przekazać ją jako właściwość do innego komponentu.

useCallback istnieje głównie w celu optymalizacji, aby ograniczyć ponowne renderowanie komponentu podrzędnego.

3
CertainPerformance 29 czerwiec 2021, 04:44

useEffect uruchomi funkcję wewnątrz, gdy zmieni się tablica zależności.

useCallback utworzy nową funkcję, gdy zmieni się tablica zależności.

Weźmy przykład, jeśli uruchomię poniższy kod i kliknę pierwszy przycisk, zawsze zrenderuje również MemoComponent. Dlaczego bo za każdym razem przekazujemy do tego nową funkcję onClick. Aby uniknąć ponownego renderowania MemoComponent, możemy jedynie wrap onClick to useCallback. Za każdym razem, gdy chcesz utworzyć nową funkcję, przekaż stan do tablicy zależności.

Jeśli chcesz wykonać jakąś akcję przy zmianie stanu, możesz napisać w useEffect.

const Button = ({ onClick }) => {
  console.log("Render");
  return <button onClick={onClick}>Click</button>;
};


const MemoComponent = React.memo(Button);
export default function Home() {
    const [state, setState] = useState(1);

    useEffect(() => {
        console.log(state); // this will execute when state changes
    }, [state]);

    const onClick = () => {};

    // const onClick = useCallback(() => {},[])
    return (
        <main>
        <button onClick={() => setState(1 + state)}>{state}</button>
        <MemoComponent onClick={onClick} />
        </main>
    );
}
1
Rahul Sharma 29 czerwiec 2021, 04:52

Nie, nie są takie same.

useEffect — służy do uruchamiania efektów ubocznych w komponencie, gdy coś się zmieni. useEffect robi nic ci nie zwracam. Po prostu uruchamia fragment kodu w komponencie.

useCallback — podczas gdy useCallback zwraca funkcję, w rzeczywistości nie wykonuje kodu. Ważne jest, aby to zrozumieć funkcje są obiektami w JavaScript. Jeśli nie używasz useCallback, funkcja, którą definiujesz w komponencie to tworzone od nowa za każdym razem, gdy komponent jest przebudowywany.

Przykład

Rozważmy ten przykład, ten składnik przejdzie w nieskończoną pętlę. Zastanów się dlaczego?

const TestComponent = props => {
  const testFunction = () => {
    // does something.
  };

  useEffect(() => {
    testFunction();
    // The effect calls testFunction, hence it should declare it as a dependency
    // Otherwise, if something about testFunction changes (e.g. the data it uses), the effect would run the outdated version of testFunction
  }, [testFunction]);
};

Ponieważ przy każdym renderowaniu funkcja testFunction byłaby tworzona od nowa i już wiemy, że ueEffect uruchomi kod, gdy tylko funkcja testFunction się zmieni. A ponieważ testFunction zmienia się przy każdym renderowaniu, useEffect będzie nadal działać, a zatem będzie nieskończona pętla.

Aby to naprawić, musimy powiedzieć React, hej, proszę nie odtwarzaj funkcji testFunction przy każdym renderowaniu, twórz ją tylko przy pierwszym renderowaniu (lub gdy coś się zmieni, od czego to zależy).

const TestComponent = props => {
  const testFunction = useCallback(() => {
    // does something.
  }, []);

  useEffect(() => {
    testFunction();
    // The effect calls testFunction, hence it should declare it as a dependency
    // Otherwise, if something about testFunction changes (e.g. the data it uses), the effect would run the outdated version of testFunction
  }, [testFunction]);
};

Nie będzie to nieskończona pętla, ponieważ instancja testFunction zmieni się tylko przy pierwszym renderowaniu, a zatem useEffect uruchomi się tylko raz.

2
Archit Garg 29 czerwiec 2021, 05:13

useeffect

Jest to alternatywa dla metod cyklu życia komponentu klasy componentDidMount, componentWillUnmount, componentDidUpdate itp. Możesz również użyć go do stworzenia efektu ubocznego przy zmianie zależności, np. „Jeśli jakaś zmienna się zmieni, zrób to”.

Zawsze, gdy masz jakąś logikę, która jest wykonywana jako reakcja na zmianę stanu lub zanim zmiana ma się wydarzyć.

useEffect(() => {
  // execute when state changed
  () => {
    // execute before state is changed
  }
}, [state]);

OR

useEffect(() => {
  // execute when state changed
  () => {
    // execute before state is changed
  }
}, []);

usecallback

Przy każdym renderowaniu wszystko, co znajduje się w funkcjonalnym komponencie, zostanie uruchomione ponownie. Jeśli komponent potomny jest zależny od funkcji z komponentu nadrzędnego, potomek będzie ponownie renderowany za każdym razem, gdy rodzic ponownie renderuje, nawet jeśli ta funkcja „nie zmieni się” (odwołanie się zmieni, ale to, co robi funkcja, będzie t). Jest używany do optymalizacji poprzez unikanie niepotrzebnych renderów od dziecka, dzięki czemu funkcja zmienia referencję tylko wtedy, gdy zmieniają się zależności. Powinieneś go używać, gdy funkcja jest zależnością efektu ubocznego, np. użyjEfekt.

Zawsze, gdy masz funkcję, która zależy od pewnych stanów. Ten zaczep służy do optymalizacji wydajności i zapobiega ponownemu przypisaniu funkcji wewnątrz komponentu, chyba że zmieni się stan zależności.

const myFunction = useCallback(() => {
  // execute your logic for myFunction
}, [state]);

Bez useCallback, myFunction będzie ponownie przypisywane przy każdym renderowaniu. Dlatego wykorzystuje więcej czasu obliczeniowego niż w przypadku useCallback.

0
Anu Singh 29 czerwiec 2021, 05:26