Методы компонента

Компоненты в фреймворке Marko обладают мощными механизмами для обработки состояния, данных и событий, а также для взаимодействия с другими компонентами и внешними сервисами. Каждый компонент в Marko включает набор методов, которые позволяют управлять его жизненным циклом, обновлять данные и обрабатывать действия пользователя.

Жизненный цикл компонента

Методы компонента тесно связаны с его жизненным циклом. Это набор этапов, через которые проходит компонент от его создания до уничтожения.

  1. constructor Конструктор компонента вызывается при его создании. Здесь обычно инициализируются начальные значения состояния компонента или выполняются другие настройки, необходимые для работы компонента.

    Пример:

    class MyComponent {
  constructor() {
    this.state = {
      count: 0
    };
  }
}

  2. onCreate Метод onCreate вызывается, когда компонент был создан и готов к использованию. Он полезен для выполнения операций, требующих доступа к данным или состоянию компонента.

    Пример:

    class MyComponent {
  onCreate() {
    console.log("Компонент создан и готов.");
  }
}

  3. onRender Метод onRender вызывается всякий раз, когда компонент рендерится. Он используется для работы с визуальными аспектами компонента и может быть полезен для обновления состояния или данных перед рендерингом.

    Пример:

    class MyComponent {
  onRender() {
    console.log("Компонент рендерится.");
  }
}

  4. onUpdate Метод onUpdate вызывается каждый раз, когда обновляются данные компонента (например, через изменение состояния). Это позволяет выполнять операции, когда данные изменяются, например, сетевые запросы или обновление внешних зависимостей.

    Пример:

    class MyComponent {
  onUpdate() {
    console.log("Данные компонента обновлены.");
  }
}

  5. onDestroy Метод onDestroy вызывается при уничтожении компонента. Это полезное место для очистки ресурсов, таких как отмена подписок, остановка таймеров и другие операции, которые требуют корректной очистки.

    Пример:

    class MyComponent {
  onDestroy() {
    console.log("Компонент уничтожен.");
  }
}

Работа с состоянием

Методы компонента позволяют работать с состоянием компонента и изменять его. Это ключевая часть логики компонента, которая определяет, как он будет взаимодействовать с пользователем и другими компонентами.

  1. this.state Состояние компонента хранится в объекте state. Через него можно задавать начальные значения и обновлять данные.

    Пример:

    class MyComponent {
  constructor() {
    this.state = {
      count: 0
    };
  }
}

  2. setState Для обновления состояния компонента используется метод setState. При его вызове компонент будет перерендерен с новыми значениями состояния. Это позволяет отслеживать изменения и обновлять UI.

    Пример:

    class MyComponent {
  updateCount() {
    this.state.count += 1;
    this.setState({ count: this.state.count });
  }
}

Работа с событиями

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

  1. handleEvent Метод handleEvent используется для обработки событий. В Marko можно назначать обработчики событий прямо в шаблонах компонентов, и в случае возникновения события, этот метод будет вызываться.

    Пример:

    class MyComponent {
  handleEvent(event) {
    if (event.type === "click") {
      console.log("Клик по кнопке!");
    }
  }
}

  2. this.emit Для отправки событий из компонента в родительский компонент используется метод this.emit. Это позволяет организовывать взаимодействие между компонентами и передавать данные или действия наружу.

    Пример:

    class MyComponent {
  handleClick() {
    this.emit("increment", { value: 1 });
  }
}

Доступ к данным родительского компонента

Для доступа к данным родительского компонента или внешним источникам в Marko используется механизм пропсов. Компоненты могут передавать данные другим компонентам через атрибуты в шаблонах.

  1. this.input Данные, передаваемые в компонент через атрибуты, доступны через свойство this.input. Это свойство позволяет компоненту обращаться к данным, предоставленным родителем, и использовать их для рендеринга или логики.

    Пример:

    class MyComponent {
  onCreate() {
    console.log(this.input.someValue);  // Получаем данные от родителя
  }
}

Асинхронные операции

Методы компонента также поддерживают асинхронные операции, что позволяет работать с внешними источниками данных, например, делать сетевые запросы или работать с базой данных.

  1. onRenderAsync Метод onRenderAsync позволяет работать с асинхронными задачами перед рендером компонента. Он полезен, если необходимо загрузить данные или выполнить другую асинхронную операцию перед тем, как компонент отобразится.

    Пример:

    class MyComponent {
  async onRenderAsync() {
    this.state.data = await fetchDataFromAPI();
  }
}

  2. setStateAsync Важно, что метод setState также поддерживает асинхронные операции. Это дает возможность изменять состояние компонента после выполнения асинхронной задачи.

    Пример:

    class MyComponent {
  async updateData() {
    const newData = await fetchData();
    this.setState({ data: newData });
  }
}

Взаимодействие с другими компонентами

В Marko компоненты могут взаимодействовать друг с другом. Это позволяет строить сложные UI-структуры, где компоненты взаимодействуют друг с другом, передавая данные или реагируя на изменения.

  1. this.parent Для получения доступа к родительскому компоненту используется свойство this.parent. Это позволяет компонентам взаимодействовать и обмениваться данными.

    Пример:

    class MyComponent {
  onCreate() {
    console.log(this.parent.someData);  // Доступ к данным родителя
  }
}

  2. this.children Компоненты также могут взаимодействовать с дочерними элементами через свойство this.children. Это дает возможность обращаться к компонентам, вложенным в текущий компонент.

    Пример:

    class MyComponent {
  onCreate() {
    console.log(this.children.length);  // Количество дочерних компонентов
  }
}

Заключение

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

Оглавление