React kontrollü bileşenler ve kontrolsüz bileşenler nelerdir?

106

ReactJS'deki kontrollü bileşenler ve kontrolsüz bileşenler nelerdir? Birbirlerinden nasıl farklılar?

reactjs react-component

— Xin
kaynak

Yeniden açılmak için aday gösteriliyor. Aslında oldukça kesin bir soru. Nasıl çok geniş kabul edilebileceğinden emin değilim.

— Charlie Flowers

134

Bu, durum bilgili DOM bileşenleri (form öğeleri) ile ilgilidir ve React belgeleri farkı açıklar:

Bir Kontrollü Bileşen yoluyla bugünkü değerini alır biridir propsve bildirdiğinde değişiklikler gibi geri aramaları yoluyla onChange. Bir ana bileşen, geri aramayı yöneterek ve kendi durumunu yöneterek ve yeni değerleri props olarak kontrollü bileşene geçirerek onu "denetler". Buna "aptalca bir bileşen" de diyebilirsiniz.
Bir Kontrolsüz Bileşen depolar kendi devlet içten ve bir kullanarak DOM sorgu olduğunu biridir refihtiyacınız olduğunda bugünkü değeri bulmak için. Bu biraz daha geleneksel HTML'ye benziyor.

Çoğu yerel React form bileşeni, hem kontrollü hem de kontrolsüz kullanımı destekler:

// 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>

Çoğu (veya tüm) durumda , kontrollü bileşenleri kullanmalısınız .

— Aaron Beall
kaynak

Değer stateyerine geçmiyor propsmu?

— Ivanka Todorova

@IvankaTodorova Kontrollü bir bileşen için değer aktarılır props. Kontrolsüz bir bileşen state, değerin kendisini dahili olarak kontrol etmek için kullanacaktır . Anahtar fark budur.

— Aaron Beall

Aralarındaki fark, değerlerinin ayarlandığı / iletildiği ve bir geri araması olan bileşenlerin controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) ile bir giriş öğesinin kendi değerlerini işlediği ve ( ) aracılığıyla okunabildiği geleneksel HTML ile refsçağrılmasıdır . Kontrollü bileşenler kendi durumlarını yönetiyor veya üst bileşenlerinden destek olarak alıyor. uncontrolled components<value type="text" />setState

— Lior Elrom

defaultValueProps'dan geçiren, ancak denetleyiciyi bilgilendiren bir bileşeni nasıl çağırırsınız onBlur?

— Paul Razvan Berg

@PaulRazvanBerg Kulağa bir anti-model gibi geliyor, devlet tek bir yerden kontrol edilmelidir . Genellikle durumu en yakın ortak ataya kaldırırsınız .

— Aaron Beall

Kontrollü bileşenler, geri aramaları kullanarak değişiklikleri diğer bileşenlere bildirir. Örneğin: <Button onClick={() => console.log("clicked")}>Click</Button>.
Kontrolsüz bileşenler diğer bileşenlere değişiklikleri hakkında bildirimde bulunmazlar ve bileşene yalnızca ref-s kullanarak erişebilirsiniz. Gerçek HTML öğesi etki alanına erişmeniz gerekiyorsa ref yararlı olabilir

— Shobe
kaynak

Kontrollü bileşen, geri çağırma işlevinden değiştirilen değeri alan bileşendir ve kontrolsüz bileşen, DOM'dan olan bileşendir. Örneğin, input değeri değiştirildiğinde Controlled Component'te onChange fonksiyonunu kullanabiliriz ve aynı zamanda DOM gibi ref kullanarak değeri elde edebiliriz.

— LuarlaGagella
kaynak