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

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

Uncontrolled компоненты в React — это подход к управлению данными формы, при котором состояние формы хранится не в React-состоянии компонента, а в самом DOM. Это противоположность controlled компонентам, где React полностью контролирует состояние через state и setState.

Основная идея и принцип работы

В uncontrolled компонентах вы используете рефы (ref) для получения доступа к DOM-элементам и их текущим значениям. React не перехватывает и не управляет каждым изменением поля — вместо этого вы читаете данные из DOM, когда они нужны (например, при отправке формы).

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    // Получаем значение напрямую из DOM
    console.log('Input value:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} defaultValue="initial" />
      <button type="submit">Submit</button>
    </form>
  );
}

Ключевые характеристики uncontrolled компонентов

• Источник данных — DOM: Значения хранятся в DOM-узлах
• Чтение значений через refs: Используются React.createRef() или useRef()
• Инициализация через defaultValue/defaultChecked: Атрибуты defaultValue (для текстовых полей) и defaultChecked (для чекбоксов) вместо value/checked
• Рендеринг не зависит от состояния: Компонент не перерисовывается при каждом изменении ввода

Практическое использование

// Uncontrolled компонент с несколькими полями
function UserForm() {
  const nameRef = useRef();
  const emailRef = useRef();
  const subscribeRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    
    const formData = {
      name: nameRef.current.value,
      email: emailRef.current.value,
      subscribe: subscribeRef.current.checked
    };
    
    console.log('Form data:', formData);
    // Отправка данных на сервер
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Имя:</label>
        <input 
          type="text" 
          ref={nameRef} 
          defaultValue="" 
          placeholder="Введите имя"
        />
      </div>
      
      <div>
        <label>Email:</label>
        <input 
          type="email" 
          ref={emailRef} 
          defaultValue="" 
          placeholder="email@example.com"
        />
      </div>
      
      <div>
        <label>
          <input 
            type="checkbox" 
            ref={subscribeRef} 
            defaultChecked={true}
          />
          Подписаться на рассылку
        </label>
      </div>
      
      <button type="submit">Зарегистрироваться</button>
    </form>
  );
}

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

• Простота реализации: Меньше кода, особенно для простых форм
• Лучшая производительность: Нет лишних ререндеров при каждом нажатии клавиши
• Нативная валидация: Легко интегрируется с HTML5 валидацией
• Интеграция с не-React кодом: Проще работать с сторонними библиотеками, которые манипулируют DOM напрямую
• Файловые инпуты: Для <input type="file"> uncontrolled подход — единственно возможный

Недостатки и ограничения

• Сложность динамической валидации: Валидация "на лету" требует дополнительных усилий
• Затруднённая модификация значений: Программное изменение значений сложнее, чем в controlled компонентах
• Меньше контроля: React не "знает" о текущем состоянии формы
• Сложность тестирования: Тесты должны симулировать реальные DOM-события

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

Идеальные сценарии применения:

1. Простые формы с малым количеством полей, где нужны только конечные данные
2. Файловые загрузки (<input type="file">)
3. Интеграция с не-React библиотеками (например, jQuery плагины)
4. Сценарии, где критична производительность и нужно избегать лишних ререндеров
5. Быстрые прототипы и MVP, где важна скорость разработки

Сравнение с controlled компонентами

Гибридный подход

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

function HybridForm() {
  // Controlled поле
  const [email, setEmail] = useState('');
  const [isValid, setIsValid] = useState(true);
  
  // Uncontrolled поле
  const nameRef = useRef();

  const handleEmailChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    setIsValid(value.includes('@')); // Динамическая валидация
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      name: nameRef.current.value, // из uncontrolled
      email: email                   // из controlled
    };
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Uncontrolled поле */}
      <input type="text" ref={nameRef} defaultValue="" placeholder="Имя" />
      
      {/* Controlled поле с валидацией */}
      <input 
        type="email" 
        value={email}
        onChange={handleEmailChange}
        style={{ borderColor: isValid ? 'green' : 'red' }}
      />
    </form>
  );
}

Заключение

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