Що таке контрольовані та некеровані компоненти React?

101

Що таке керовані та неконтрольовані компоненти в ReactJS? Чим вони відрізняються один від одного?

reactjs react-component

— Сінь
джерело

Номінація на повторне відкриття. Це насправді досить точне питання. Не впевнений, як його можна вважати занадто широким.

— Charlie Flowers

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>

У більшості (або у всіх) випадках слід використовувати контрольовані компоненти .

— Аарон Білл
джерело

Хіба вартість не сприймається, stateа не props?

— Іванка Тодорова

@IvankaTodorova Для контрольованого компонента значення передається через props. Неконтрольований компонент буде використовувати stateдля внутрішнього контролю самого значення. Це ключова різниця.

— Аарон Білл

Різниця між ними полягає в тому, що компоненти, для яких їх значення встановлюється / передається і мають зворотний виклик, називаються controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) порівняно з традиційним HTML, де вхідний елемент обробляє їхнє власне значення і може бути прочитаний через refsвикликаний uncontrolled components( <value type="text" />). Контрольовані компоненти управляють своїм власним станом за допомогою setStateбатьківського компонента або отримують його як пропс.

— Ліор

Як би ви назвали компонент, який отримує його defaultValueчерез реквізит, але який повідомляє контролер onBlur?

— Пол Разван Берг,

@PaulRazvanBerg Це звучить як анти-шаблон, державою слід керувати в одному місці . Зазвичай ви піднімаєте стан до найближчого спільного предка.

— Аарон Білл

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

— шоб
джерело