Что такое Controlled компоненты в React?

Что такое Controlled компоненты в React?

Controlled компоненты (управляемые компоненты) — это концепция в React, при которой данные формы (например, значения полей ввода, выбора или текстовых областей) полностью контролируются состоянием React-компонента. Это означает, что значение элемента формы привязано к React-состоянию, а его изменение обрабатывается через React-обработчики событий (например, onChange). Такой подход позволяет React быть "единственным источником истины" для данных формы, обеспечивая полный контроль над их валидацией, модификацией и поведением.

В управляемом компоненте каждое изменение значения (например, ввод текста в <input>) не обновляет элемент напрямую, а вместо этого запускает событие onChange, которое обновляет состояние React. Затем React перерисовывает компонент с новым значением, которое передаётся обратно в элемент формы. Это создаёт "цикл данных": React → элемент формы → событие → обновление состояния → React.

Ключевые отличия от Uncontrolled компонентов

• Uncontrolled компоненты полагаются на DOM для хранения состояния (например, используют ref для доступа к значению).
• Controlled компоненты хранят состояние в React и синхронизируют его с DOM через свойства (props).

Пример Controlled компонента

Ниже приведён простой пример управляемого компонента с полем ввода:

import React, { useState } from 'react';

function ControlledInput() {
  // Состояние для хранения значения поля ввода
  const [inputValue, setInputValue] = useState('');

  // Обработчик события onChange
  const handleChange = (event) => {
    setInputValue(event.target.value); // Обновление состояния
  };

  // Обработчик отправки формы
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправленное значение:', inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Имя:
        <input
          type="text"
          value={inputValue} // Значение привязано к состоянию
          onChange={handleChange} // Обработчик обновляет состояние
        />
      </label>
      <button type="submit">Отправить</button>
      <p>Текущее значение: {inputValue}</p>
    </form>
  );
}

export default ControlledInput;

В этом примере:

• Значение <input> управляется состоянием inputValue.
• При каждом вводе символа вызывается handleChange, обновляющий состояние через setInputValue.
• React перерисовывает компонент с новым значением inputValue, которое передаётся в атрибут value поля ввода.

Преимущества Controlled компонентов

• Полный контроль над данными: React-состояние позволяет легко валидировать, форматировать или изменять данные перед отображением. Например, можно автоматически преобразовывать ввод в верхний регистр:

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

• Синхронизация между несколькими элементами: Упрощает связь между разными частями формы. Например, можно синхронизировать поле ввода и текстовый блок:

  const [text, setText] = useState('');
  // ...
  <input value={text} onChange={(e) => setText(e.target.value)} />
  <p>Вы ввели: {text}</p>
  

• Интеграция с React-экосистемой: Совместимость с библиотеками управления состоянием (Redux, MobX) и формами (Formik, React Hook Form).
• Предсказуемость: Состояние формы всегда соответствует React-состоянию, что упрощает отладку и тестирование.

Недостатки Controlled компонентов

• Производительность: Каждое изменение вызывает перерисовку компонента, что может стать проблемой для сложных форм с сотнями полей (хотя на практике это редко критично, благодаря оптимизациям React).
• Более многословный код: Требуется писать обработчики событий и состояние для каждого поля.

Когда использовать Controlled компоненты?

• В большинстве стандартных форм (логин, регистрация, настройки).
• При необходимости валидации в реальном времени (например, проверка сложности пароля).
• Для динамического обновления интерфейса на основе ввода (поиск с автодополнением).

Альтернатива: Uncontrolled компоненты

Иногда управляемые компоненты избыточны, например, для простых форм без валидации. В таких случаях используют Uncontrolled компоненты, где данные извлекаются из DOM при отправке формы:

import React, { useRef } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Отправленное значение:', inputRef.current.value);
  };

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

Итог

Controlled компоненты — это фундаментальный паттерн React, обеспечивающий декларативное управление данными форм. Они рекомендуются для большинства случаев, благодаря гибкости и согласованности с философией React. Однако для оптимизации в специфических сценариях (например, формы с тысячами полей) можно комбинировать их с Uncontrolled подходами или использовать виртуализацию.