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

Question

Контролируемые компоненты управляются через state.
Неконтролируемые компоненты хранят состояние внутри DOM.
Контролируемые дают больше контроля и предсказуемости.
Неконтролируемые проще, но менее гибкие.

YeaHub · Accepted Answer

Работа с формами — один из базовых сценариев в React.ОпределениеКонтролируемый компонент — значение элемента управляется через stateНеконтролируемый компонент — значение хранится в DOM и читается через refКонтролируемые компонентыОсобенности:значение задаётся через valueизменения обрабатываются через onChangeсостояние всегда синхронизировано с UIconst [value, setValue] = useState(''); setValue(e.target.value)} /> Неконтролируемые компонентыОсобенности:значение хранится в DOMиспользуется defaultValueчтение происходит через ref Сравнение подходовКонтролируемые:проще валидироватьудобнее тестироватьлегче синхронизироватьНеконтролируемые:меньше кодаподходят для простых формКраткий выводКонтролируемые компоненты предпочтительны для сложных форм и бизнес-логики. Неконтролируемые подходят для простых сценариев.