Контролируемые и неконтролируемые компоненты

Основные концепции

В Preact, как и в React, компоненты формы можно разделить на контролируемые и неконтролируемые. Это деление определяется тем, как управляются значения элементов формы: с помощью состояния компонента или напрямую через DOM.

  • Контролируемый компонент: значение элемента формы хранится в состоянии компонента и обновляется через события. Компонент полностью контролирует ввод пользователя.
  • Неконтролируемый компонент: значение элемента формы управляется самим DOM, а компонент лишь получает доступ к текущему значению через ссылки (ref) или события.

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

Контролируемые компоненты

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

Пример текстового поля
import { h } from 'preact';
import { useState } from 'preact/hooks';

function ControlledInput() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onIn put={handleChange} />
  );
}

Разбор ключевых моментов:

  • Состояние value хранит текущее значение поля.
  • Событие onInput обновляет состояние при каждом вводе.
  • Атрибут value синхронизирован с состоянием, что делает компонент контролируемым.
Контролируемые чекбоксы и радио

Для элементов типа checkbox и radio управление также осуществляется через состояние:

function ControlledCheckbox() {
  const [checked, setChecked] = useState(false);

  const toggle = () => setChecked(!checked);

  return (
    <input type="checkbox" checked={checked} onCha nge={toggle} />
  );
}

Особенность: для checkbox и radio используется атрибут checked вместо value.

Неконтролируемые компоненты

Неконтролируемые компоненты хранят свое состояние внутри DOM. Доступ к значению осуществляется через ref, что упрощает работу с формами без постоянного синхронизирования с состоянием.

Пример текстового поля
import { h } from 'preact';
import { useRef } from 'preact/hooks';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onCl ick={handleSubmit}>Отправить</button>
    </div>
  );
}

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

  • useRef создаёт ссылку на DOM-элемент.
  • Значение вводимого текста не хранится в состоянии компонента.
  • Получение значения происходит только при необходимости (например, при отправке формы).

Сравнение подходов

Характеристика Контролируемый компонент Неконтролируемый компонент
Хранение данных В состоянии компонента В DOM
Валидация Легко, на каждом шаге Только при необходимости
Сложность реализации Выше Ниже
Поддержка сложной логики Отличная Ограниченная
Реактивность интерфейса Полная Частичная

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

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

Preact совместим с большинством API React для форм, но есть нюансы:

  • onInput предпочтительнее onChange для текстовых полей, так как Preact правильно обрабатывает ввод через это событие.
  • Неконтролируемые компоненты работают идентично React, но при большом количестве форм использование ref может быть более производительным, так как избегается постоянное обновление состояния.
  • Для сложных форм с множеством полей и динамической валидацией лучше использовать контролируемые компоненты с централизованным состоянием.

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

  1. Использовать контролируемые компоненты, если требуется:

    • Валидация на лету;
    • Динамическое изменение значений;
    • Интеграция с внешними источниками данных (API, глобальное состояние).

  2. Использовать неконтролируемые компоненты, если:

    • Форма простая и не требует постоянного контроля;
    • Необходимо минимизировать ререндеры;
    • Цель — быстро собрать данные из полей при сабмите.

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

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

Оглавление