В чем разница между контролируемыми и неконтролируемыми компонентами React?

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

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

Контролируемые компоненты – это компоненты, значения которых управляются React через состояние. То есть каждое изменение значения поля ввода (например, текстового поля или селектора) управляется через пропсы и состояние компонента. А это значит, что вы можете легко следить за изменениями и делать валидацию.

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

import React, { useState } from 'react';

function ControlledComponent() {
    const [inputValue, setInputValue] = useState('');

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

    const handleSubmit = (event) => {
        alert('Submitted: ' + inputValue);
        event.preventDefault(); // Предотвращает перезагрузку страницы
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Введите текст:
                <input type="text" value={inputValue} onChange={handleChange} />
            </label>
            <button type="submit">Отправить</button>
        </form>
    );
}

export default ControlledComponent;

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

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

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

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

import React, { useRef } from 'react';

function UncontrolledComponent() {
    const inputRef = useRef(null);

    const handleSubmit = (event) => {
        alert('Submitted: ' + inputRef.current.value);
        event.preventDefault(); // Предотвращает перезагрузку страницы
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Введите текст:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Отправить</button>
        </form>
    );
}

export default UncontrolledComponent;

В этом примере мы используем useRef для создания ссылки на DOM-элемент. Значение поля ввода извлекается непосредственно из inputRef.current.value, а не управляется состоянием компонентов.

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

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

Заключение

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