Компонентная архитектура и жизненный цикл

Основы компонентной архитектуры

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

  • Функциональные компоненты – чистые функции, которые принимают свойства (props) и возвращают описание UI в виде JSX или VNode.
  • Классовые компоненты – расширяют базовый класс Inferno.Component, предоставляя возможность работы с внутренним состоянием и методами жизненного цикла.

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

Создание и использование компонентов

Классовый компонент создается следующим образом:

import { Component } from 'inferno';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Счёт: {this.state.count}</p>
        <button onCl ick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

export default Counter;

Функциональный компонент с использованием хуков состояния:

import { useState } from 'inferno';

function CounterFunction() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Счёт: {count}</p>
      <button onCl ick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

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

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

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

Монтаж (Mounting)

Этап, когда компонент впервые создаётся и добавляется в DOM. Для классовых компонентов доступны следующие методы:

  • componentWillMount() – вызывается перед первым рендером (устаревший, использовать с осторожностью).
  • render() – возвращает описание интерфейса.
  • componentDidMount() – вызывается после добавления компонента в DOM, идеальное место для инициализации сторонних библиотек или асинхронных запросов.

Функциональные компоненты используют эффекты (useEffect) для имитации componentDidMount:

import { useEffect } from 'inferno';

useEffect(() => {
  console.log('Компонент смонтирован');
}, []);
Обновление (Updating)

Компонент обновляется при изменении props или state. Основные методы классовых компонентов:

  • shouldComponentUpdate(nextProps, nextState) – позволяет оптимизировать производительность, предотвращая ненужные рендеры.
  • componentWillUpdate(nextProps, nextState) – вызывается перед обновлением (устаревший метод, редко используется).
  • render() – повторный рендер с новыми данными.
  • componentDidUpdate(prevProps, prevState) – вызывается после обновления DOM, удобно для синхронизации с внешними API.

В функциональных компонентах обновление обрабатывается через useEffect, реагирующий на изменение зависимостей:

useEffect(() => {
  console.log('count изменился');
}, [count]);
Размонтирование (Unmounting)

Когда компонент удаляется из DOM, вызывается метод componentWillUnmount(). Он используется для очистки таймеров, подписок или других ресурсов:

componentWillUnmount() {
  clearInterval(this.timer);
}

В функциональных компонентах очистка осуществляется через возвращаемую функцию в useEffect:

useEffect(() => {
  const timer = setInterval(() => console.log('тик'), 1000);
  return () => clearInterval(timer);
}, []);

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

Компоненты могут передавать данные друг другу через props. Компонент-родитель управляет состоянием и передает его вниз:

function Parent() {
  const [value, setValue] = useState(0);

  return <Child count={value} increment={() => setValue(value + 1)} />;
}

function Child({ count, increment }) {
  return (
    <div>
      <p>Счёт: {count}</p>
      <button onCl ick={increment}>Увеличить</button>
    </div>
  );
}

Для глубокого управления состоянием в больших приложениях часто используются контексты (Inferno.createContext) или сторонние менеджеры состояния, такие как Redux или MobX.

Ключевые особенности компонентного подхода в Inferno

  • Высокая производительность за счёт легковесного Virtual DOM.
  • Прямой контроль над рендером через методы жизненного цикла.
  • Гибкая интеграция хуков и классовых компонентов.
  • Повторное использование и композиция компонентов позволяют строить сложные интерфейсы из небольших, изолированных блоков.

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

Оглавление