Порядок действий и жизненный цикл компонента (React Native)

Question

Вопрос собственно такой:
как организовать последовательность исполнения функций в компоненте React Native.

Порядок должен выглядеть вот так:

Запускаем компонент. (пустой, ничего не рендерится, только полоса загрузки)
Запрос к API
Логика, основываясь на ответе запроса
Если логика из пункта 3 успешна, установить состояния для элементов => рендер (динамическое количество элементов)
Запустить mqtt-клиента основываясь на условиях из пункта 3 (состояния и пропсы для элементов)
При выходе с экрана закрыть клиента, очистить состояния

То есть запускать mqtt-клиента сразу не имеет смысла до получения информации от API, т.к. конфигурация компонента еще не известна.

Вопрос больше объяснительно-философский. Компоненты использую только функциональные, поэтому такие методы как componentDidMount или componentWillUnmount не использую.

Для достижения упорядоченности я использую хук useState с одним недостатком: что при большом количестве компонентов порядок больше напоминает кашу.

Знатоки, упорядочите мои знания. Как организовать работу компонента шаг за шагом?

Answer 1

Что-бы компоненты выполнялись шаг за шагом, Вы можете сделать задержку между выполняемыми функциями. Лично я использовал такую команду:

setTimeout(someMethod, 1000)

P.S. 1000 - количество миллисекунд, выполняемой задержки

Answer 2

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

useEffect и набор состояний из useState

Цепочки организовать можно по разному начиная от состояния, так правильнее, заканчивая цепочкой Promise.

На 6й вопрос, в функциональном React did и will решаются через useEffect с пустой [] зависимостью и результатом такого эффекта должна быть функция willUnmount

const {useState, useEffect} = React;

function Component() {
  let [status, setStatus] = useState(0);
  let [userData, setUserData] = useState(null);
  useEffect(async () => { // Шаг первый
    console.log("Статус: " + status);
    if (status == 0) {
      // Что-то делаем, и обновляем статус
      setTimeout(function() {
        setStatus(1);
      }, 1000)
    }
    if (status == 1) {
      // Что-то делаем, и обновляем статус
      setTimeout(function() {
        setStatus(2);
      }, 1000)
    }
    if (status == 2) {
      // Что-то делаем, и обновляем статус
      setTimeout(function() {
        setUserData("Компонента загруженна");
        setStatus(3);
      }, 1000)
    }
  }, [status]);
  
  useEffect(() => {
    console.log("componentDidMount");
    return function() {
      console.log("componentWillUnmount");
    };
  }, []);
  
  if (status !== 3) return <>Полоса загрузки</>;
  return <>{userData}</>
}

ReactDOM.render(<Component />, document.getElementById("app"));

Полный пример на codepen https://codepen.io/latdev/pen/dyzexjW

БЛОГ НА HUSL

Порядок действий и жизненный цикл компонента (React Native)

Ответы (2 шт):