Arhn - архитектура программирования

Запрос на useEffect - React Hooks

Я разрабатываю приложение, в котором мне нужно выполнять несколько вызовов API при загрузке страницы, и мне нужно изменять одно состояние компонента при каждом вызове API. Архитектура выглядит так, как показано ниже.

const [stateForm, setStateForm] = useState(.....)

useEffect(()=>{
//FIRST API CALL
setStateForm({....})
},[])

useEffect(()=>{
//SECOND API CALL
setStateForm({....})
},[])

useEffect(()=>{
//THIRD API CALL
setStateForm({....})
},[])

//SO ON.....

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

24.09.2019

  • Вы также можете использовать обещания для своих вызовов. fetch (). then (() = ›fetch () ...) 24.09.2019
  • каждый setStateForm вызывает повторную визуализацию умножения. Посмотрите ответ: stackoverflow.com / questions / 55521912 / 24.09.2019
  • Будет ли изменение состояния в каждом хуке useEffect вызывать несколько повторных рендеров? - почти наверняка да, если только они не пришли одновременно. 24.09.2019
  • Также setStateForm не объединяет объекты состояния, как это делал метод setState на Component. Таким образом, каждый вызов будет отменять весь stateForm. Если вам нужно объединить состояние, используйте обратный вызов setStateForm(prevState => ({/* merge here */})) 24.09.2019
  • Множественный useEffect имеет смысл только в том случае, если их зависимости различны - в вашем случае это действительно не имеет смысла. 24.09.2019

Ответы:


1

Можно ли таким образом вызывать побочные эффекты?

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

Будет ли изменение состояния в каждом хуке useEffect вызывать несколько повторных рендеров?

React может группировать серию повторных рендеров, инициированных setStateForm, поэтому будет только один повторный рендеринг. Если setStateForm приходится иметь дело с обещаниями, тогда React не будет использовать пакетирование, иначе он может или не может.

24.09.2019
Новые материалы

Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..