0

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

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

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

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

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

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

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

1
  • Можете привести пример кода вашего компонента, что бы на нем показать как использовать хуки
    – ThisMan
    5 ноя 2021 в 0:52

1 ответ 1

2
+500

Ну во первых рендер компонента остановить нельзя, если совсем нечего рисовать используй 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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.