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

103

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

reactjs react-component Синь
источник
22
Назначение для повторного открытия. На самом деле это довольно точный вопрос. Не уверен, что это можно считать слишком широким.
Чарли Флауэрс

Ответы:

127

Это относится к компонентам 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>

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

Аарон Бил
источник
1
Разве ценность не воспринимается, stateскорее, чем props?
Иванка Тодорова
9
@IvankaTodorova Для управляемого компонента значение передается через props. Неконтролируемый компонент будет использовать stateдля внутреннего контроля самого значения. Это ключевое отличие.
Аарон Билл,
1
Разница между ними заключается в том, что компоненты, значение которых устанавливается / передается и имеют обратный вызов, называются controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) по сравнению с традиционным HTML, где элемент ввода обрабатывает свое собственное значение и может быть прочитан через refsвызываемую uncontrolled components( <value type="text" />). Управляемые компоненты управляют своим собственным состоянием через setStateродительский компонент или получают его в качестве свойств.
Лиор Элром,
Как бы вы назвали компонент, который получает его defaultValueчерез реквизиты, но уведомляет контроллер onBlur?
Пол Разван Берг
@PaulRazvanBerg Звучит как антипаттерн, состояние должно контролироваться в одном месте . Обычно вы относите состояние к ближайшему общему предку.
Аарон
1
  • Управляемые компоненты уведомляют другие компоненты об изменениях с помощью обратных вызовов. Например: <Button onClick={() => console.log("clicked")}>Click</Button>.
  • Неконтролируемые компоненты не уведомляют другие компоненты о своих изменениях, и вы можете получить доступ к компоненту только с помощью ref-s. Ссылка может быть полезна, если вам нужно получить доступ к реальному домену HTML-элемента.
Shobe
источник
1

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

Луарла Гагелла
источник