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

Question

Контролируемые компоненты — это компоненты, которые получают свое состояние и поведение через пропсы, а изменения состояния управляются родительским компонентом. Неконтролируемые компоненты, с другой стороны, управляют своим внутренним состоянием сами и могут использовать рефы для доступа к значениям. Контролируемые компоненты более предсказуемы, так как состояние управляется централизованно.

YeaHub · Accepted Answer

В React компоненты можно классифицировать на контролируемые и неконтролируемые в зависимости от того, как они управляют своим состоянием, особенно в контексте форм. Контролируемые компоненты — это компоненты, которые получают свое состояние через пропсы и обновляют его через коллбеки. Это означает, что значение элемента формы (например, текстовое поле) всегда берется из состояния родительского компонента. Это делает компоненты более предсказуемыми и позволяет легко управлять их состоянием.Пример контролируемого компонента:import React, { useState } from 'react'; function ControlledInput() { const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); // Обновляем состояние при изменении }; return ( ); }Здесь value — это состояние, которое управляет значением текстового поля. Каждое изменение обновляет состояние через setValue, обеспечивая синхронизацию. Неконтролируемые компоненты управляют своим состоянием сами и используют рефы для доступа к значениям. Они позволяют избежать необходимости в синхронизации состояния с родительским компонентом, но могут привести к менее предсказуемому поведению.Пример неконтролируемого компонента:import React, { useRef } from 'react'; function UncontrolledInput() { const inputRef = useRef(null); const handleSubmit = (event) => { event.preventDefault(); alert('Значение: ' + inputRef.current.value); // Доступ к значению через реф }; return ( ); }В этом случае значение поля ввода управляется самим компонентом, и мы используем реф для доступа к нему, когда это необходимо. В общем, контролируемые компоненты обеспечивают более явное управление состоянием и более легкую обработку событий, тогда как неконтролируемые компоненты могут быть полезны, когда требуется минимальная настройка и меньшее вмешательство в состояние компонента. Выбор между ними зависит от конкретных требований вашего приложения.