Что такое компоненты, контролируемые React, и неконтролируемые компоненты?

Question 1

Что такое контролируемые компоненты и неконтролируемые компоненты в ReactJS? Чем они отличаются друг от друга?

Question 2

Это относится к компонентам DOM с отслеживанием состояния (элементам формы), и документация React объясняет разницу:

Контролируемый компонент является тот , который берет свое текущее значение через propsи уведомляет изменения через обратные вызовы , как onChange. Родительский компонент «контролирует» его, обрабатывая обратный вызов и управляя своим собственным состоянием, а также передавая новые значения в качестве свойств контролируемому компоненту. Вы также можете назвать это «тупой компонент».
Неконтролируемый Компонент является тот , который сохраняет свое собственное состояние внутри, и вы запрашиваете DOM с помощью , refчтобы найти его текущее значение , когда вам это нужно. Это немного больше похоже на традиционный HTML.

Большинство нативных компонентов формы React поддерживают как контролируемое, так и неконтролируемое использование:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

В большинстве (или во всех) случаях следует использовать контролируемые компоненты .

Question 3

Управляемые компоненты уведомляют другие компоненты об изменениях с помощью обратных вызовов. Например: <Button onClick={() => console.log("clicked")}>Click</Button>.
Неконтролируемые компоненты не уведомляют другие компоненты о своих изменениях, и вы можете получить доступ к компоненту только с помощью ref-s. Ссылка может быть полезна, если вам нужно получить доступ к реальному домену HTML-элемента.

Question 4

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