реагирует useEffect работает и извлекает данные без остановки - PullRequest
Новая
       13

реагирует useEffect работает и извлекает данные без остановки

0 голосов
/ 10 ноября 2018

У меня есть простой компонент реагирования, который использует реагирующие крючки. Я использую useEffect и useState.
Проблема в том, что я понял, что мой API получает огромное количество обращений, после отладки я вижу, что useEffect работает без остановки!

Это мой очень простой код: 

function DisplayUser({userId}) {
  const [loggedUser, setLoggedUser] = React.useState(null);
  React.useEffect(() => {
    fetchData(userId).then(user => {
      setLoggedUser(user);
    })
  });
  return (
    <div>
      <div>{loggedUser}</div>
    </div>
  );
}

1 Ответ

0 голосов
/ 10 ноября 2018

Здесь происходит то, что useEffect работает после каждого рендера

Запускается ли useEffect после каждого рендера? Да! По умолчанию он запускается как после первого рендера, так и после каждого обновления ...

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

Если массив пуст, это означает, что для этого эффекта нет «зависимостей», и он будет запущен только один раз (вполне аналогично componentDidMount).

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

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

function DisplayUser({userId}) {
  const [loggedUser, setLoggedUser] = React.useState(null);
  React.useEffect(() => {
    fetchData(userId).then(user => {
      setLoggedUser(user);
    })
  }, [userId]); // only run when userId changed
  return (
    <div>
      <div>{loggedUser}</div>
    </div>
  );
}
...