Что такое контролируемые и неконтролируемые компоненты?

Краткий ответ

Контролируемые компоненты — это компоненты, состояние которых управляется React через состояние (state). Неконтролируемые компоненты — это компоненты, состояние которых управляется напрямую DOM, без участия React.

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

Состояние управляется через React state
Значение всегда соответствует state
Позволяют валидацию и манипуляции в реальном времени

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

Состояние управляется DOM напрямую
Значение получается через refs
Меньше кода, ближе к традиционному HTML

Ключевое правило: В большинстве случаев используйте контролируемые компоненты для лучшего контроля и валидации! 🎯

Полный ответ

Представьте, что вы ведёте машину. Контролируемые компоненты — это как адаптивный круиз-контроль, который постоянно следит за скоростью. Неконтролируемые компоненты — это как механический круиз-контроль, который просто удерживает нажатой педаль газа.

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

Контролируемые компоненты — это компоненты, значение которых контролируется React:

// Контролируемый компонент
function ControlledInput() {
  const [value, setValue] = useState('');
  
  return (
    <input 
      type="text" 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}

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

Неконтролируемые компоненты — это компоненты, значение которых управляется DOM напрямую:

// Неконтролируемый компонент
function UncontrolledInput() {
  const inputRef = useRef(null);
  
  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };
  
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleSubmit}>Получить значение</button>
    </div>
  );
}

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

Характеристика	Контролируемые	Неконтролируемые
Управление состоянием	Через React state	Через DOM
Валидация	В реальном времени	При отправке
Код	Больше	Меньше
Гибкость	Высокая	Ограниченная
Производительность	Может быть ниже	Обычно выше

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

✅ Используйте контролируемые компоненты, когда:

Нужна валидация в реальном времени
Значение зависит от других состояний
Нужно программно изменять значение
Требуется мгновенная реакция на изменения

// Пример с валидацией
function EmailInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  
  const validateEmail = (value) => {
    if (!value.includes('@')) {
      setError('Некорректный email');
    } else {
      setError('');
    }
  };
  
  return (
    <div>
      <input 
        type="email" 
        value={email} 
        onChange={(e) => {
          setEmail(e.target.value);
          validateEmail(e.target.value);
        }}
        style={{ borderColor: error ? 'red' : 'green' }}
      />
      {error && <span style={{ color: 'red' }}>{error}</span>}
    </div>
  );
}

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

✅ Используйте неконтролируемые компоненты, когда:

Нужно интегрироваться с библиотеками, которые работают с DOM
Компонент редко изменяется
Нужно минимизировать код
Интеграция с не-React кодом

// Пример с интеграцией сторонней библиотеки
function DatePicker() {
  const dateRef = useRef(null);
  
  useEffect(() => {
    // Инициализация сторонней библиотеки
    new SomeDatePickerLibrary(dateRef.current);
  }, []);
  
  return <input type="text" ref={dateRef} />;
}

Распространённые ошибки

1. Смешивание подходов

// ❌ Ошибка - смешивание контролируемых и неконтролируемых
function BadComponent() {
  const [value, setValue] = useState('');
  
  return (
    // Указан и value, и defaultValue - конфликт!
    <input 
      value={value} 
      defaultValue="initial" 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}
 
// ✅ Правильно - выбрать один подход
function GoodControlled() {
  const [value, setValue] = useState('initial');
  return (
    <input 
      value={value} 
      onChange={(e) => setValue(e.target.value)} 
    />
  );
}
 
function GoodUncontrolled() {
  return <input defaultValue="initial" />;
}

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

// ❌ Неправильно - когда нужен контроль
function BadForm() {
  // Невозможно валидировать или сбросить форму
  return (
    <form>
      <input type="text" name="username" ref={useRef()} />
      <input type="email" name="email" ref={useRef()} />
      <button type="submit">Отправить</button>
    </form>
  );
}
 
// ✅ Правильно - когда нужен контроль
function GoodForm() {
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    // Валидация и отправка данных
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={username} 
        onChange={(e) => setUsername(e.target.value)} 
      />
      <input 
        type="email" 
        value={email} 
        onChange={(e) => setEmail(e.target.value)} 
      />
      <button type="submit">Отправить</button>
    </form>
  );
}

Резюме

Контролируемые и неконтролируемые компоненты — это как два разных стиля вождения! 🚗

Контролируемые — как автомат с адаптивным круиз-контролем: полный контроль, комфорт, но немного сложнее
Неконтролируемые — как механика: проще, быстрее, но меньше контроля

Когда что выбирать:

Нужна валидация и контроль? Контролируемые! ✅
Простая интеграция со сторонними библиотеками? Неконтролируемые! ✅

Практическое правило: Начинайте с контролируемых компонентов — они решают 90% задач с формами! Если возникают сложности с интеграцией, тогда рассматривайте неконтролируемые.

Понимание этих концепций поможет вам создавать более предсказуемые и удобные формы в ваших React-приложениях! 💪

Хотите больше полезных статей о React? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и прокачивайтесь каждый день! 🚀