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

В React компоненты можно классифицировать на контролируемые и неконтролируемые в зависимости от того, как они управляют своим состоянием, особенно в контексте форм.

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

Пример контролируемого компонента:

import React, { useState } from 'react'; 

function ControlledInput() {
  const [value, setValue] = useState(''); 
   
  const handleChange = (event) => {
      setValue(event.target.value); // Обновляем состояние при изменении  
  };  
  
  return (  
     <input type="text" value={value} onChange={handleChange} />  
  ); 
}

Здесь value — это состояние, которое управляет значением текстового поля. Каждое изменение обновляет состояние через setValue, обеспечивая синхронизацию.

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

Пример неконтролируемого компонента:

import React, { useRef } from 'react'; 

function UncontrolledInput() {
  const inputRef = useRef(null);  
  
  const handleSubmit = (event) => {
      event.preventDefault();    
      alert('Значение: ' + inputRef.current.value); // Доступ к значению через реф  
  };  
  
  return (  
    <form onSubmit={handleSubmit}>   
       <input type="text" ref={inputRef} />      
       <button type="submit">Отправить</button>    
    </form>  
  ); 
}

В этом случае значение поля ввода управляется самим компонентом, и мы используем реф для доступа к нему, когда это необходимо.

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