Жизненный цикл экранной формы

В процессе работы каждая экранная форма проходит следующую последовательность этапов жизненного цикла:

1. монтирование;
2. обновление;
3. размонтирование.

Жизненный цикл экранной формы аналогичен жизненному циклу компонента React, информация о котором содержится в Документации React.

Монтирование

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

Для реализации логики на этапе монтирования необходимо в секции Scripts экранной формы описать функцию без аргументов.

Следующий блок кода демонстрирует присвоение значений переменным состояния экранной формы на этапе монтирования. С помощью метода JS-библиотеки FrontendCore setState() переменным состояния foo и bar присваиваются значения.

Scripts={[
  () => {
     setState({
        foo: true,
        bar: 123 
     });
  }
]}

Обновление

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

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

Следующий блок кода демонстрирует присвоение значений переменным состояния экранной формы на этапе обновления. При изменении значения переменной bar переменной baz присваивается значение bar + 1.

Scripts={[
  (bar) => {
     setState({
        baz: bar + 1,
     });
  }
]}

Размонтирование

Этап жизненного цикла, на котором экранная форма удаляется из DOM (Document Object Model), называется размонтированием.

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

Следующий блок кода демонстрирует отмену регулярно выполняющегося действия с интервалом pleerInterval в момент размонтирования компонента Group, которое происходит при присвоении переменной состояния showFragment значения false.

<Group 
        Visible-var="showFragment"
        OnUnmount={() => clearInterval(getValue('pleerInterval'))}
  > 
    <MyFragment/>
</Group>