Расскажите о различиях между управляемыми и неуправляемыми компонентами в React.

Sobes Copilot

Получайте ответы в реальном времени

Ответ от нейросети

sobes.tech AI

Управляемые компоненты управляют своим состоянием через useState (или классовые this.state) и получают данные и функции обратных вызовов через пропсы. Состояние формы, например, хранится в стейте React и обновляется через onChange обработчики ввода.

Неуправляемые компоненты хранят своё состояние внутри DOM. Для доступа к их значению используется useRef (или классовый React.createRef) для получения ссылки на DOM-элемент. Значение элементов формы, например, извлекается напрямую из DOM при submit.

Характеристика	Управляемый компонент	Неуправляемый компонент
Управление состоянием	React State (`useState`)	DOM
Доступ к значению	Через state и пропсы	Через Refs (`useRef`)
Обновление	Реактивно, при каждом изменении	При явном действии (например, submit)
Валидация	В логике React	Через стандартные HTML API или вручную после получения значения

Пример управляемого компонента:

import React, { useState } from 'react';

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

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

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

Пример неуправляемого компонента:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Значение input: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Получить значение</button>
    </>
  );
}

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