🤔 В чём отличие между контролируемыми и неконтролируемыми объектами?

В React различают два типа компонентов для обработки пользовательского ввода: контролируемые (controlled) и неконтролируемые (uncontrolled) компоненты. Понимание их различий важно для выбора подходящего способа управления состоянием формы.

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

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

import React, { useState } from 'react';

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

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

    return (
        <div>
            <label>
                Name:
                <input type="text" value={inputValue} onChange={handleChange} />
            </label>
            <p>Current value: {inputValue}</p>
        </div>
    );
};

export default ControlledComponent;

🚩Особенности контролируемых компонентов

🟠Состояние в React
Значение элемента формы хранится в состоянии компонента.
🟠Обработка событий
Все изменения отслеживаются через события (например, onChange) и обновляют состояние компонента.
🟠Односторонний поток данных
Данные идут от состояния компонента к элементу формы, обеспечивая контроль над значением.

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

Неконтролируемый компонент управляет своим состоянием через DOM. Значение элемента формы извлекается непосредственно из DOM, а не из состояния компонента.

import React, { useRef } from 'react';

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert('Submitted value: ' + inputRef.current.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={inputRef} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
};

export default UncontrolledComponent;

🚩Особенности неконтролируемых компонентов

🟠Состояние в DOM
Значение элемента формы хранится в самом DOM-элементе.
🟠Использование рефов
Для доступа к значению элемента используется реф (например, через useRef).
🟠Двусторонний поток данных
Данные могут быть извлечены из DOM в любой момент времени, что делает управление состоянием менее очевидным.

Ставь 👍 и забирай 📚 Базу знаний