Neden Bağlam-API Kullanılır?

• Context-API'yi neden kullandığımızı anlamak için önce What is Props-Drilling'i göreceğiz .

• Sol bileşen ağacı resmine bakın.
• Bir bu durumda söz konusu olabilir ağacın altındaki Çocuk Bileşen .ama, veri gerekecektir Konteyner Bileşenleri veya orta Çocuk Bileşenleri Veri o gerekmeyebilir.
• Bu durumda, ortadaki Bileşen veriye ihtiyaç duymasa da, onu sadece alt Bileşene iletmek için alması gerekir.
• Başvurunuz çok büyükse, bu büyük bir soruna neden olur. Geliştiricilerin verileri bir bileşenden diğerine aktarmaya devam etmesi gerekir.
• Bu sorun, Props Drilling olarak bilinir.

• Context-API'de, verileri depolamamız gereken Bileşen ağacının dışında ayrı bir depolama alanı oluşturulur.
• Artık herhangi bir bileşenin içindeki bu verilere ihtiyacımız olursa, Context-API'den verilere doğrudan erişebiliriz.
• Şimdi bunun bir örnekle nasıl çalıştığını görelim.

• CreateContext için kullanabileceğimiz createContext () arasında tepki.
• UserContext oluşturulduktan sonra dışa aktarmamız gerekir.
• Şimdi Bağlam içine Veri eklemek için ana öğeyi <UserContext.Provider> veya <UserProvider> ile sarmamız gerekiyor.
• Wrapper ile bir kez sardığımızda, verileri value niteliğine geçirmemiz gerekir .

1) İşlev Bileşeninde.

2) Sınıf Bileşeninin Yaşam Döngüsü Yöntemlerinde.

3) Sınıf Bileşeninin Render Yönteminde.

1) İşlev Bileşeninde: -

• İşlevsel Bileşen veya Kancaların içinde, React paketi tarafından sağlanan useContext() Kancasını kullanmalıyız .
• Şimdi UserContext'i içe aktarmamız ve onu useContext() öğesine iletmemiz gerekiyor .
• useContext(UserContext) , daha fazla kullanabileceğimiz Context. içindeki kullanıcı Verilerini döndürür.

• Bir sınıf bileşeninden Context'e erişmenin en yaygın yolu static contextType.
• Context değerinin dışında renderveya bir yaşam döngüsü yönteminde ihtiyacınız varsa, bu şekilde kullanacaksınız.

• Bağlam değerlerini almanın geleneksel yolu, alt bileşeni Consumer.
• Oradan prop değerine şu şekilde erişebileceksiniz props.
• Bunu hala görebilirsiniz, ancak bu daha çok Context'e erişmenin eski bir yoludur.