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

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

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

Классовый компонент создаётся через наследование от базового класса Component из библиотеки Preact:

import { h, Component } from 'preact';

class MyComponent extends Component {
    render() {
        return <div>Привет, Preact!</div>;
    }
}

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

  • Component — базовый класс для всех классовых компонентов.
  • Метод render обязателен и возвращает JSX, описывающий структуру интерфейса.
  • h импортируется для поддержки JSX в Preact, но при современных сборках можно не использовать явно.

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

Пропсы передаются компоненту при его вызове и доступны через this.props:

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

// Использование
<Greeting name="Алексей" />

Состояние компонента управляется через объект this.state и метод setState:

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>
        );
    }
}

Особенности работы со state:

  • setState выполняет слияние нового состояния с текущим.
  • Изменения состояния вызывают повторный рендер компонента.
  • Прямое изменение this.state не обновляет интерфейс.

Методы жизненного цикла

Классовые компоненты Preact поддерживают основные методы жизненного цикла:

  1. componentWillMount – вызывается перед первым рендером (устаревший, чаще используется constructor).
  2. componentDidMount – вызывается после первого рендера компонента. Используется для сетевых запросов, подписок, инициализации сторонних библиотек.
  3. componentWillReceiveProps(nextProps) – вызывается при получении новых пропсов (устаревший, рекомендуется componentDidUpdate).
  4. shouldComponentUpdate(nextProps, nextState) – позволяет контролировать, нужно ли перерендеривать компонент.
  5. componentWillUpdate(nextProps, nextState) – вызывается перед обновлением (устаревший, вместо него лучше getSnapshotBeforeUpdate).
  6. componentDidUpdate(prevProps, prevState) – вызывается после обновления.
  7. componentWillUnmount – вызывается перед удалением компонента. Используется для очистки таймеров, отписки от событий и других ресурсов.

Пример использования методов жизненного цикла:

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

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

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

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

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

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

class Toggle extends Component {
    constructor(props) {
        super(props);
        this.state = { on: false };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({ on: !this.state.on });
    }

    render() {
        return <button onCl ick={this.handleClick}>{this.state.on ? 'Вкл' : 'Выкл'}</button>;
    }
}

Альтернатива с использованием стрелочной функции:

handleClick = () => {
    this.setState({ on: !this.state.on });
};

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

Классовые компоненты можно оптимизировать с помощью методов жизненного цикла:

  • shouldComponentUpdate – предотвращает ненужные перерендеры.
  • PureComponent – наследование от Component с автоматической поверхностной проверкой пропсов и состояния. В Preact это реализуется через preact/compat для совместимости.

Особенности Preact

  • Preact легче и быстрее React, поэтому некоторые методы жизненного цикла могут иметь упрощённую реализацию.
  • Полная поддержка классовых компонентов позволяет плавно мигрировать приложения с React.
  • В Preact можно использовать функциональные компоненты с хуками для управления состоянием и эффектами, что делает классы не обязательными, но полезными для комплексных структур и наследования.

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

Оглавление