Контролируемые и неконтролируемые компоненты

В React есть два типа компонентов: контролируемые и неконтролируемые. Управляемые компоненты — это те, которые контролируются состоянием React, а неуправляемые компоненты — это те, которые поддерживают свое собственное внутреннее состояние.

Контролируемые компоненты

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

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

Вот пример управляемого компонента:

const ControlledInput = ({value, onChange}) => {
  const [inputValue, setInputValue] = useState(value);

  const handleChange = event => {
    setInputValue(event.target.value);
  };

  return (
    <input
      value={inputValue}
      onChange={handleChange}
    />
  );
};

В этом примере компонент ControlledInput принимает два реквизита: value и onChange. Свойство value — это текущее значение ввода, а свойство onChange — это обратный вызов обновления. Обратный вызов onChange вызывается, когда пользователь изменяет значение ввода. Обратный вызов обновляет состояние компонента, который, в свою очередь, обновляет значение ввода.

Неконтролируемые компоненты

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

Чтобы создать неуправляемый компонент, вам не нужно передавать компоненту никакие реквизиты. Компонент будет поддерживать свое собственное внутреннее состояние, и вы можете получить доступ к значению компонента, используя ссылку.

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

const UncontrolledInput = () => {
  const ref = useRef(null);

  return (
    <input
      ref={ref}
    />
  );
};

В этом примере компонент UncontrolledInput не принимает никаких реквизитов. Компонент поддерживает собственное внутреннее состояние, и вы можете получить доступ к значению компонента, используя функцию ref.

Какой тип компонента следует использовать?

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

Вот таблица, которая обобщает различия между контролируемыми и неконтролируемыми компонентами: