Когда дело доходит до создания веб-приложений с помощью React, очень важно понимать концепцию контролируемых и неконтролируемых компонентов. В этой статье мы рассмотрим, что означают эти термины, чем они отличаются, и предоставим примеры кода, которые помогут вам понять эти концепции. Итак, приступим!

Что такое контролируемые компоненты?
Управляемые компоненты в React — это те, значения формы которых контролируются состоянием компонента. Другими словами, состояние компонента является единственным источником истинного значения входных данных формы. Всякий раз, когда пользователь взаимодействует с вводом, состояние компонента соответствующим образом обновляется.

Пример кода:

import React, { useState } from 'react';
const ControlledComponent = () => {
  const [value, setValue] = useState('');
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};
export default ControlledComponent;

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

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

Пример кода:

import React, { useRef } from 'react';
const UncontrolledComponent = () => {
  const inputRef = useRef();
  const handleClick = () => {
    const value = inputRef.current.value;
    console.log(value);
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </div>
  );
};
export default UncontrolledComponent;

В приведенном выше коде inputRefиспользуется для получения ссылки на элемент ввода. При нажатии кнопки функция handleClickизвлекает входное значение, обращаясь к inputRef.current.value.

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

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