Próbuję zrozumieć ogólne doradztwo, które widziałem w odniesieniu do Reaguj i nieświeży zamknięcia .

W szczególności, jak to rozumiem, określenie "stare zamknięcie" służy do opisania scenariusza, w którym komponent i funkcja {X0}} jest skonstruowana w ten sposób

function WatchCount() {
  const [count, setCount] = useState(0);

  useEffect(function() {
    setInterval(function log() {
      console.log(`Count is: ${count}`);
    }, 2000);
  }, []);

  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1) }>
        Increase
      </button>
    </div>
  );
}

Reaguj połączenia WatchCount, aby uczynić komponentem i ustawia wartość zmiennej count. Gdy javascript wywołuje funkcję log dwie sekundy później zmienna count będzie zobowiązana do zmiennej count count została pierwsza nazywana. Wartość count nie odzwierciedla aktualizacji, które mogłyby stać się na wytworzeniu WatchCount, które miało miejsce w czasie pierwszej renderowania a kodem interwałowym ostatecznie strzelając.

Porady ogólne, które są przekazane "rozwiązać", jest wymienienia zmiennej w tablicy zależności - drugi argument do useEffect

useEffect(function iWillBeStale() {
  setInterval(function log() {
    console.log(`Count is: ${count}`);
  }, 2000);
}, [count]);

Jako programista JavaScript nie rozumiem, w jaki sposób to "rozwiązuje problem. Wszystko, co zrobiliśmy tutaj, stwarza tablicę, która zawiera w nim zmienną i przekazał tę tablicę do useEffect Mojego naiwnego widoku jest to, że zmienna count w log jest nadal zaskoczona do Pierwsze połączenie WatchCount i nadal powinno być stale.

Czy tęskniłem tutaj za nizolucję zakresu JavaScript?

Czy to "naprawiają" rzeczy z powodu czegoś, co robi useEffect z tych zmiennych?

Czy trzecia rzecz?

0
Alan Storm 16 kwiecień 2021, 01:29

1 odpowiedź

Najlepsza odpowiedź

Czy tęskniłem tutaj za nizolucję zakresu JavaScript?

Nie, masz rację, tworząc tablicę i przechodząc do useEffect nie wpływa na zamknięcie, stała zamknięta utrzymuje swoją wartość.

Czy to "naprawiają" rzeczy z powodu czegoś, co robi useEffect z tych zmiennych?

Tak. Reaguj uruchamia całą funkcję renderowania za każdym razem, gdy zmienia się stan, który tworzy nowe zamknięcie i ponownie przechodzi do useEffect ponownie. Po zmianie zależności, useEffect ponownie uruchamia funkcję efektu, która tworzy nowy interwał z nowym zamknięciem.

Ponadto funkcja efektu TH zwraca funkcję czyszczenia, która działa, gdy składnik odmówi lub przed uruchomieniem efektu następnym razem (gdy zmienia zależności). Ta funkcja oczyszczania wywołuje clearInterval, co oznacza, że zamknięcie zamknięcia nie zostanie ponownie wykonane, a liczba jednocześnie aktywnych interwałów nie wzrośnie.

Wprawdzie, ten proponowany rozwiązanie ma ogromny błąd: Wyczyszczenie interwału i rozpoczynając nowy interwał za każdym razem, gdy zmiany count nie prowadzi do ładnego okresowego okresu 2S, luki między dwoma dziennikami mogą być znacznie większe - rejestrowanie jest Zasadniczo odbite i będzie działać tylko wtedy, gdy żaden przyrost nastąpił w ostatnich 2s. Jeśli nie jest to pożądane, ref może być znacznie prostszym rozwiązaniem:

const [count, setCount] = useState(0);
const countRef = useRef(0);
countRef.current = count;

useEffect(function() {
  setInterval(function log() {
    console.log(`Count is: ${countRef.current}`);
  }, 2000);
}, []);
1
Bergi 16 kwiecień 2021, 00:46