Классовые компоненты

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

Определение классового компонента

Классовый компонент создаётся как класс, наследующий 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>
    );
  }
}

Ключевые моменты:

  • constructor(props) вызывается при создании компонента. В нём обычно инициализируется state.
  • this.state хранит локальное состояние компонента.
  • Методы класса могут быть использованы для изменения состояния через this.setState.
  • render() возвращает JSX-структуру, которая будет отображаться на странице.

Управление состоянием

Состояние компонента — это объект, хранящий данные, которые могут изменяться со временем. Для изменения состояния используется метод setState:

this.setState({ key: newValue });

Особенности setState в Inferno:

  • Обновления состояния могут быть асинхронными. Использование функции вместо объекта обеспечивает корректные расчёты на основе предыдущего состояния:
this.setState(prevState => ({ count: prevState.count + 1 }));
  • Каждый вызов setState инициирует перерисовку компонента, но Inferno оптимизирует обновления, минимизируя количество изменений в DOM.

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

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

Основные методы:

  • componentDidMount() — вызывается после первой отрисовки компонента. Используется для инициализации сторонних библиотек, сетевых запросов и таймеров.
  • componentDidUpdate(prevProps, prevState) — вызывается после каждого обновления компонента. Можно сравнивать старые и новые пропсы или состояние и выполнять соответствующие действия.
  • componentWillUnmount() — вызывается перед удалением компонента из DOM. Часто используется для очистки таймеров, отмены подписок и освобождения ресурсов.

Пример:

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

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

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

  render() {
    return <div>Прошло секунд: {this.state.seconds}</div>;
  }
}

Обработка событий

События в классовых компонентах привязываются через JSX. Важно учитывать контекст this. В ES6-классах это достигается либо через привязку в конструкторе:

this.handleClick = this.handleClick.bind(this);

либо использованием стрелочных функций для методов:

handleClick = () => {
  console.log(this.state);
}

Пропсы и их использование

Пропсы (props) передаются компоненту извне и доступны через this.props. Они неизменяемы внутри компонента, поэтому все изменения должны происходить через состояние:

class Greeting extends Component {
  render() {
    return <h1>Привет, {this.props.name}!</h1>;
  }
}

Рекомендации по организации классовых компонентов

  • Минимизировать использование сложного состояния. Для многих задач предпочтительны функциональные компоненты с хуками.
  • Разделять логику и визуальное представление. Методы класса должны отвечать за бизнес-логику, а render() — за отображение.
  • Избегать прямой модификации this.state. Всегда использовать setState.
  • Использовать методы жизненного цикла для синхронизации с внешними источниками данных, а не для управления визуальной частью напрямую.

Отличие классовых компонентов Inferno от React

Хотя API Inferno в части классовых компонентов во многом схож с React, есть оптимизации:

  • Inferno использует более быстрый виртуальный DOM и минимизирует избыточные рендеры.
  • Обновление состояния и рендеринга происходит быстрее за счёт внутренней оптимизации.
  • Некоторые методы жизненного цикла могут вызываться чуть иначе, но базовая логика остаётся совместимой.

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

Оглавление