Фазы жизненного цикла

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

Создание компонента

Mounting (монтирование) — это процесс добавления компонента в DOM. В Preact он включает несколько ключевых моментов:

  1. constructor Конструктор вызывается при создании экземпляра класса компонента. Здесь обычно инициализируется состояние (this.state) и привязываются методы к текущему контексту (this).

    class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = { counter: 0 };
        this.handleClick = this.handleClick.bind(this);
    }
}

  2. componentWillMount (устаревший) В современных версиях Preact использование этого метода не рекомендуется. Логика, связанная с подготовкой данных до рендера, переносится в конструктор или методы useEffect при использовании функциональных компонентов.

  3. render Метод render отвечает за генерацию виртуального DOM. На этом этапе создаётся описание структуры компонента без непосредственного добавления в реальный DOM.

    render() {
    return <button onCl ick={this.handleClick}>{this.state.counter}</button>;
}

  4. componentDidMount Этот метод вызывается после того, как компонент был смонтирован в DOM. Он идеально подходит для выполнения асинхронных операций, установки таймеров или подписки на события.

    componentDidMount() {
    console.log("Компонент смонтирован");
}

Для функциональных компонентов эквивалентом componentDidMount является хук useEffect с пустым массивом зависимостей:

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

Обновление компонента

Updating (обновление) происходит при изменении props или state. Основные методы жизненного цикла при обновлении:

  1. shouldComponentUpdate(nextProps, nextState) Позволяет контролировать необходимость повторного рендера. Возврат false предотвращает обновление, что важно для оптимизации производительности.

    shouldComponentUpdate(nextProps, nextState) {
    return nextState.counter !== this.state.counter;
}

  2. componentWillUpdate (устаревший) Ранее использовался для подготовки к обновлению. Сейчас рекомендуется использовать getDerivedStateFromProps или логику внутри render.

  3. render При обновлении метод render вызывается заново для генерации нового виртуального DOM. Preact затем сравнивает старый и новый виртуальные DOM-деревья (diffing) и обновляет только изменённые части реального DOM.

  4. componentDidUpdate(prevProps, prevState) Вызывается после завершения обновления. Служит для синхронизации состояния с внешними системами, вызова сторонних API или изменения DOM вне виртуального дерева.

    componentDidUpdate(prevProps, prevState) {
    if (prevState.counter !== this.state.counter) {
        console.log(`Счётчик изменился на ${this.state.counter}`);
    }
}

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

useEffect(() => {
    console.log(`Счётчик изменился на ${counter}`);
}, [counter]);

Удаление компонента

Unmounting (демонтирование) — стадия удаления компонента из DOM. Ключевой метод:

  • componentWillUnmount Выполняется перед удалением компонента. Здесь освобождаются ресурсы, отменяются таймеры и подписки на события.

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

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

useEffect(() => {
    const timer = setInterval(() => console.log("Tick"), 1000);
    return () => clearInterval(timer);
}, []);

Особенности жизненного цикла в Preact

  • Лёгкость и скорость: Preact использует оптимизированный diffing, что ускоряет обновление DOM по сравнению с React.
  • Минимальный набор методов: Не все методы React доступны, некоторые устаревшие методы заменяются современными подходами (useEffect, getDerivedStateFromProps).
  • Функциональные компоненты в приоритете: Хуки позволяют управлять состоянием и побочными эффектами без классов, что упрощает жизненный цикл.

Практические рекомендации

  • Для новых компонентов предпочтение отдаётся функциональным компонентам с хуками.
  • Асинхронные операции и подписки размещаются в componentDidMount или useEffect, очистка — в componentWillUnmount или возвратной функции useEffect.
  • shouldComponentUpdate и оптимизация ререндеринга критичны для производительных приложений с большим количеством компонентов.

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

Оглавление