Блог

Главная - Вопросы по программированию - Два эффекта использования против двух вызовов API внутри одного эффекта использования

Два эффекта использования против двух вызовов API внутри одного эффекта использования

#reactjs #react-hooks

#reactjs #реагирующие хуки

Вопрос:

Когда компонент монтируется, мне нужно получить данные из двух конечных точек API. На данный момент у меня есть:

   useEffect(() => {
    dispatch(loadSomeDataOne());
  }, [dispatch]);

  useEffect(() => {
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

Я думал сделать это в рамках одного эффекта использования:

   useEffect(() => {
    dispatch(loadSomeDataOne());
    dispatch(loadSomeDataTwo());
  }, [dispatch]);

Есть ли какая-то разница между этими двумя решениями? Какой из них лучше?

Комментарии:

1. Нет. Я думаю, что первый лучше, если ваш проект будет больше. Например: через некоторое время вам понадобится другое условие для обработки с помощью обоих API, которым очень сложно управлять в одном useEffect . А также первый также имеет лучшую читаемость

2. Имейте в виду, что вы также можете убрать useEffect() вызовы в пользовательский хук…

3. Голосование за закрытие, как это выглядит, привлечет упрямые ответы. Если все, что вам нужно сделать, это отправить действие (или два) при монтировании компонента, то второй вариант — это очевидный выбор IMO, нет необходимости их разделять. Даже если вам нужно было выполнять все более и более сложную логику при монтировании компонента, я бы настоятельно рекомендовал вам учитывать каждую «вещь» в обратном вызове и по-прежнему вызывать оба из одного перехвата эффекта. У @PatrickRoberts есть веская точка зрения относительно пользовательских перехватов, но вам действительно нужны пользовательские перехваты, только если логика будет использоваться в другом месте.

Ответ №1:

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

   useEffect(() => {
    dispatch(loadSomeDataOne(varA));
  }, [varA]);

  useEffect(() => {
    dispatch(loadSomeDataTwo(varB));
  }, [varB]);

Таким образом, useEffect при varA обновлении или выполняется только желаемое varB . Если вы хотите, чтобы все выполнялось одновременно, тогда вам просто нужен 1 useEffect .

Ответ №2:

В этой статье вы узнаете о useEffect https://www.robinwieruch.de/react-hooks-fetch-data Для меня: поскольку вы хотите вызывать API только при монтировании компонента, вы можете написать такой код:

  useEffect(() => {
    dispatch(loadSomeDataOne());
    dispatch(loadSomeDataTwo());
  }, []);

Это означает, что вам нужны только два вызова данных загрузки функции один раз