Локальное состояние в классовых компонентах

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

Инициализация состояния

Состояние в классовом компоненте определяется через свойство state, которое обычно инициализируется в конструкторе:

import { Component } from 'preact';

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

constructor(props) вызывается при создании экземпляра компонента.
super(props) передаёт свойства родительскому классу Component.
this.state содержит объект с локальными данными компонента.

Можно инициализировать состояние вне конструктора, используя публичное поле класса:

class Counter extends Component {
  state = {
    count: 0
  };
}

Это упрощает синтаксис и делает код более компактным.

Обновление состояния

Для изменения состояния используется метод setState, который принимает объект с обновлениями или функцию, возвращающую объект. В Preact обновление состояния асинхронное, что важно учитывать при работе с последовательными изменениями:

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

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

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

Использование функции гарантирует правильное обновление при нескольких последовательных вызовах setState.

Привязка методов

В классовых компонентах обработчики событий должны быть привязаны к экземпляру класса, чтобы иметь доступ к this.state и this.props. Это можно сделать в конструкторе:

constructor(props) {
  super(props);
  this.state = { count: 0 };
  this.increment = this.increment.bind(this);
}

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

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

Использование состояния в рендере

Состояние влияет на вывод компонента через метод render:

render() {
  return (
    <div>
      <p>Текущее значение: {this.state.count}</p>
      <button onCl ick={this.increment}>Увеличить</button>
    </div>
  );
}

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

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

Лёгковесность: Preact имеет меньший размер, чем React, но поддерживает аналогичный API для классовых компонентов, включая state и setState.
Частичные обновления: Preact обновляет только те элементы DOM, которые реально изменились, что повышает производительность.
Совместимость с функциональными компонентами: Классовые компоненты могут использоваться вместе с функциональными компонентами и хуками, что обеспечивает гибкость архитектуры.

Передача состояния вниз по дереву

Состояние может передаваться дочерним компонентам через props:

class Display extends Component {
  render() {
    return <p>Значение: {this.props.value}</p>;
  }
}

class Counter extends Component {
  state = { count: 0 };

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

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

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

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

Состояние может быть не только числовым или строковым, но и объектом с множеством полей или массивом. Для обновления вложенных структур используется синтаксис копирования объектов:

this.setState(prevState => ({
  user: {
    ...prevState.user,
    name: 'Иван'
  }
}));

Это обеспечивает иммутабельность и корректную работу механизма ререндеринга.