Чем отличается controlled от uncontrolled компонентов?

Question

В React можно выделить 4 разновидности контролируемых и неконтролируемых сущностей:

Контролируемый компонент (родителем) – родитель управляет состоянием дочернего через props.
Неконтролируемый компонент (родителем) – компонент сам управляет своим состоянием (через useState или useRef).
Контролируемый элемент формы – значение элемента хранится в state, а изменения отслеживаются через onChange.
Неконтролируемый элемент формы – значение хранится напрямую в DOM (обычно через ref).

YeaHub · Accepted Answer

1. Контролируемый компонент (родителем)Родительский компонент управляет состоянием дочернего с помощью props.Пример:function InputField({ value, onChange }) { return ; } function ParentComponent() { const [inputValue, setInputValue] = useState(''); return ( setInputValue(e.target.value)} /> ); }Особенности:InputField не хранит своё состояние.Состояние полностью контролируется родителем.2. Неконтролируемый компонент (родителем)Компонент управляет своим состоянием сам, без участия родителя.Пример:function UncontrolledComponent() { const [inputValue, setInputValue] = useState(''); const handleSubmit = () => { alert('Input value: ' + inputValue); }; return (

setInputValue(e.target.value)} />

); }Особенности:Состояние (inputValue) хранится внутри компонента.Родитель не контролирует этот input.Компонент полностью автономен.3. Контролируемый элемент формыЗначение элемента хранится в state и обновляется через onChange.Пример:function ControlledInput() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); }; return ; }Особенности:React хранит актуальное значение (value) в state.Каждое изменение вызывает onChange, что обновляет state.React полностью контролирует содержимое поля.4. Неконтролируемый элемент формыЗначение элемента хранится в DOM, а не в state.Пример:function UncontrolledInput() { const inputRef = useRef(); const handleSubmit = () => { alert('Input value: ' + inputRef.current.value); }; return (

); }Особенности:React не хранит значение поля.Доступ к значению осуществляется напрямую через ref.Такой подход проще, но не всегда подходит для сложных форм.ИтогКомпоненты (уровень родителя):Контролируемые → состояние передаётся через props.Неконтролируемые → компонент сам управляет своим состоянием.Элементы формы:Контролируемые → React хранит значение в state.Неконтролируемые → значение живёт в DOM, доступ через ref.