Управляемые компоненты управляют своим состоянием через useState (или классовые this.state) и получают данные и функции обратных вызовов через пропсы. Состояние формы, например, хранится в стейте React и обновляется через onChange обработчики ввода.
Неуправляемые компоненты хранят своё состояние внутри DOM. Для доступа к их значению используется useRef (или классовый React.createRef) для получения ссылки на DOM-элемент. Значение элементов формы, например, извлекается напрямую из DOM при submit.
| Характеристика | Управляемый компонент | Неуправляемый компонент |
|---|---|---|
| Управление состоянием | React State (useState) | DOM |
| Доступ к значению | Через state и пропсы | Через Refs (useRef) |
| Обновление | Реактивно, при каждом изменении | При явном действии (например, submit) |
| Валидация | В логике React | Через стандартные HTML API или вручную после получения значения |
Пример управляемого компонента:
jsxПример неуправляемого компонента:
jsxВыбор между ними зависит от сложности логики и необходимости мгновенной реакции на изменения ввода. Управляемые компоненты предпочтительнее для сложных форм и необходимости валидации в реальном времени. Неуправляемые удобны для простых форм или для интеграции с сторонними DOM-библиотеками.