использовать второй вариант вариации аргумента в React hook? - PullRequest
Новая
       13

использовать второй вариант вариации аргумента в React hook?

0 голосов
/ 19 марта 2019

В реактивных хуках, в чем разница между этими 3 фрагментами. 

//1.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  });
}

//2.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, []);
}

//3. 

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, [isOn]);
}

Разница между передачей пустого массива, массива с элементом и не передачей вообще?

Ответы [ 2 ]

4 голосов
/ 19 марта 2019

Первый запустит эффект при монтировании и при каждом изменении состояния.Очистка будет вызываться при изменении состояния и при размонтировании.

Вторая будет запускать эффект только один раз при монтировании, а очистка будет вызываться только при размонтировании.

Последняя будет выполнятьсяэффект при монтировании и при каждом изменении состояния isOn.Очистка будет вызвана при изменении isOn и при размонтировании.

В ваших примерах первый и последний примеры будут вести себя одинаково, потому что единственное состояние, которое изменится, это isOn.Если бы в первом примере было больше состояния, этот эффект также восстановился бы, если бы другое состояние изменилось.

Полагаю, я должен также добавить, что порядок вещей будет выглядеть следующим образом: mount: -> run effect, state change: run clean up -> run effectunmount -> run clean up.

1 голос
/ 19 марта 2019

Есть две вещи, которые вы должны отметить при использовании useEffect

Не передавая второй аргумент

В приведенном выше случае useEffect очистит предыдущий эффект, еслибыла указана функция возврата и запускался новый эффект для каждого рендера компонента

Передача второго аргумента в виде пустого массива

В указанном выше случае эффект будет запущенпри первоначальном рендеринге и при размонтировании эффект будет очищен с указанием возвращаемой функции

Передача второго аргумента в виде массива значений

В приведенном выше случае эффект будет работатьпри начальном рендере и при изменении любого из параметров, указанных в массиве.Метод clean, возвращаемый из эффекта, запускается до создания нового эффекта

...