UseContext'e "setState" ile tepki verin

Question

Yakın zamanda Context React Api'yi useContext Hook ile kullanmaya başladım. Bir durum değişkenine sahip olduğumuzda, yani const someState = useState (state, setState) olduğunda, bazı geliştiricilerin setSate'i doğrudan sağlayıcı değerlerinde geçirdiğini ve sonra onu alt bileşenlerde çağırdığını gözlemledim. Bu iyi bir uygulama mı?

Bağlam kullanmadığınızda, bir alt bileşendeki setState'e "erişmek" için bir işleyici oluşturmanız gerekir. Hala işleyici işlevlerini kullanıyorum ve bunları alt gruptaki bağlamdan içe aktarmak için sağlayıcı değerlerine aktarıyorum.

SetState'i bağlamda geçirmek iyi bir uygulama mı? Normalde setState'i doğrudan bir bileşene geçiremeyeceğiniz için hala bazı şüphelerim var. Performansta herhangi bir farklılık veya dikkate almam gereken başka dezavantajlar var mı?

Teşekkür ederim.

Answer 1

Doğru anladıysam, fark, bir şekilde durumun ana bileşenden, diğerinde durumun alt bileşenden ayarlanmasıdır. Bazen insanlar durumu değiştirerek döngü oluşturmadan kaçınmak için bunu yapar. Hiçbir sakınca olmaması gerekir, ancak işleyici işlevlerini kullanmak, gitmenin normal yoludur.

Answer 2

Düzenleme: Aslında seni yanlış anladığımı düşünüyorum ama emin değilim. Cevabım, durumu olan kendi sağlayıcınızı yazmanız durumunda geçerlidir. Yalnızca ayarlayıcı sağlayan varsayılan bir sağlayıcı kullanıyorsanız, Amel'in cevabına katılıyorum.

---

Ben şahsen yapmazdım, ama bu daha çok bir hayal. Ancak, her zaman olduğu gibi, büyük ölçüde hangi hedefe ulaşmak istediğinize bağlıdır.

Bunu yapmanın olumlu bir yönü, useState tarafından verilen durum ayarlayıcıların her yeniden oluşturucu için her zaman aynı kalmasıdır. Özel bir değer iletirseniz, useContext kullanarak değişikliği dinleyen her bileşen yeniden oluşturulacağından çok sık değişmesini önlemelisiniz.

Yine de durumu ayarlamak için özel bir nesneyi (örneğin, gereksiz yeniden oluşturuculardan kaçınmak için bir useMemo'dan gelen) bir geri arama ile iletmeyi tercih ederim. Gelecekte daha fazla şey sağlamak istiyorsanız, genişletmek daha kolaydır.

Bunun gibi bir şey (çok basit bir örnek, elbette böyle bir anlam ifade etmiyor, sadece anlamak için):

function MyProvider({children}) {
   const [state, setState] = useState(0);
   const provided = useMemo(() => ({
       value: state,
       setValue: (value) => setState(value)
   }, [value]);
   return <MyContext.Provider value={provided}>{children}</MyContext.Provider>;
}

Bağlamın kullanıldığı her yerde kodu değiştirmeden genişletmek daha kolay olacaktır. Bununla birlikte, başarmak istediğiniz şey buysa, sadece pasörü geçmenin özel bir kötü yanı olmadığını düşünüyorum.