Ответ
Контролируемые компоненты управляются React через состояние (state). Значение элемента формы (например, input) привязано к состоянию, а изменения обрабатываются через колбэки (onChange). React является "источником истины" для данных.
function ControlledComponent() {
const [value, setValue] = useState('');
return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}Неконтролируемые компоненты хранят своё состояние в DOM. Данные получаются через ref при необходимости (например, при отправке формы). React не контролирует значение напрямую.
function UncontrolledComponent() {
const inputRef = useRef();
const handleSubmit = () => {
console.log(inputRef.current.value);
};
return <input ref={inputRef} />;
}Ключевые различия:
- Контролируемые: значение синхронизировано с React-состоянием
- Неконтролируемые: значение хранится в DOM
- Контролируемые требуют больше кода, но дают больше контроля
- Неконтролируемые проще для интеграции с не-React кодом