когда useEffect срабатывает в componentWillUnmount? - PullRequest
Новая
       24

когда useEffect срабатывает в componentWillUnmount?

0 голосов
/ 28 мая 2019

Я читаю ниже заявление в блоге, оно говорит что-то вроде этого 

useEffect(() => {
  API.getUser(userId);
}, [userId]);

При желании второй параметр также может быть просто пустым массивом, в в этом случае он будет выполняться только на componentDidMount и componentWillUnmount и эффект не будет работать на componentDidUpdate.

Выполняется ли API.getUser, когда компонент был размонтирован (componentWillUnmount)? как я знаю componentWillUnmount срабатывает, когда вы переходите со страницы А на страницу Б. Теперь я запутался, для меня приведенный выше код действует как componentDidMount, потому что userId изменится с undefined на id один раз.

Ответы [ 2 ]

1 голос
/ 28 мая 2019

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

например, вы можете получить вышеуказанный эффект как 

useEffect(() => {
  API.getUser(userId);
  return () => {
      // cancel api here
  }
}, [userId]);

Таким образом, в приведенном выше примере анонимная функция, возвращаемая useEffect, будет вызываться до того, как эффект будет запущен во второй раз (что происходит при изменении userId) или во время размонтирования

0 голосов
/ 28 мая 2019

Вы можете вернуть функцию очистки из useEffect, которая будет запускаться до unMount 

useEffect(() => {
  const subscription = props.source.subscribe(); // this will fire at after did Mount/ didUpdate
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount
  };
});

Если вы передаете пустой массив в качестве второго параметра. 

useEffect(() => {
  const subscription = props.source.subscribe(); // this run only after first rnede i.e componentDidmount
  return () => {
    // Clean up the subscription
    subscription.unsubscribe(); // this will afire at willUnmount ie componentWillUnmount
  };
}, []);
...