Referans

useContext(SomeContext)

’e abone olmak ve değerini okumak için useContext’i bileşeninizin üst düzeyinde çağırın.

Parametreler

  • SomeContext: Daha önce ile oluşturduğunuz context. Context’in kendisi bilgileri tutmaz, yalnızca tedarik edeceğiniz ya da bileşenlerden okuyacağınız bilginin türünü temsil eder.

Dönüş değerleri

useContext, çağrılan bileşen için Context değerini döndürür. Bu değer, ağaçtaki çağrılan bileşenden önceki en yakın SomeContext.Provider’a iletilen value olarak belirlenir. Böyle bir sağlayıcı yoksa, döndürülen değer o Context için ile belirlediğiniz defaultValue olacaktır. Döndürülen değer her zaman günceldir. Eğer bir Context değişirse, React otomatik olarak bu Context’i kullanan bileşenleri yeniden render eder.

Dikkat Edilmesi Gerekenler

  • Bir bileşendeki useContext() çağrısı, aynı bileşenden dönen sağlayıcılardan etkilenmez. İlgili <Context> useContext()` çağrısını yapan bileşenin üstünde olmalıdır.
  • React, farklı bir değer alan sağlayıcıdan başlayarak belirli bir bağlamı kullanan tüm çocukları otomatik olarak yeniden işler. Önceki ve sonraki değerler karşılaştırması ile karşılaştırılır. Yeniden oluşturma işlemlerinin ile atlanması, çocukların yeni bağlam değerleri almasını engellemez.
  • Derleme sisteminiz çıktıda yinelenen modüller üretiyorsa (ki bu sembolik bağlantılarda olabilir), bu durum bağlamı bozabilir. Bir şeyi bağlam yoluyla iletmek, yalnızca bağlamı sağlamak için kullandığınız SomeContext ve onu okumak için kullandığınız SomeContext, === karşılaştırmasıyla belirlendiği gibi tam olarak aynı nesne ise çalışır.

Kullanım

Veri geçişini ağaca derinlemesine sağlama

Bileşeninizin üst düzeyinde useContext’i çağırarak ’e abone olabilir ve değerini okuyabilirsiniz:

useContext, parametre olarak geçtiğiniz context için context değerini döndürür. Context değerini belirlemek için, React bileşen ağacını tarar ve context’e özgü en yakındaki context sağlayıcısını bulur.

Button bileşenine context geçmek için, bileşeni veya üst bileşenlerinden birini ilgili context sağlayıcısına sarın:

Button ile sağlayıcı arasında ne kadar katman olduğu önemsizdir. Form’un herhangi bir yerindeki Button’da useContext(ThemeContext) çağırıldığında "dark" değerini alacaktır.

Context üzerinden geçirilen verileri güncelleme

Genellikle, context’in zaman içinde değişmesini istersiniz. Context’i güncellemek için, ile birlikte kullanın. Üst bileşende bir state değişkeni tanımlayın ve state’i sağlayıcının context değeri olarak aşağıya geçirin.

Artık sağlayıcı içerisindeki herhangi bir Button, güncel theme değerini alacaktır. setThemei çağırarak sağlayıcıya iletilen theme değerini güncellerseniz, tüm Button bileşenleri yeni 'light' değeriyle yeniden render olacaktır.

Varsayılan fallback değeri belirtme

React, üst ağaçta söz konusu context’in sağlayıcısını bulamazsa, useContext() tarafından döndürülen değer belirttiğiniz varsayılan değer olacaktır:

Varsayılan değer asla değişmez. Eğer context’i güncelleyebilmek istiyorsanız, state ile birlikte kullanın.

Genellikle varsayılan değer olarak null yerine kullanabileceğiniz daha anlamlı bir değer vardır, örneğin:

Bu sayede, kazara sağlayıcı tanımlamadan bazı bileşenleri render ederseniz, kod kırılmaz. Ayrıca, bileşenlerinizin bir sürü sağlayıcı ayarlanmadan test ortamında iyi çalışmasını sağlar.

Aşağıdaki örnekte, “Temayı değiştir” butonu her zaman açık renkli olarak görüntülenir çünkü tema context’i sağlayıcısının dışında yer alır ve varsayılan context değeri 'açık'tır. Varsayılan temayı 'koyu' olarak düzenlemeyi deneyin.

Ağacın bir kısmında context’i geçersiz kılma

Ağacın bir bölümünü farklı bir değere sahip sağlayıcıyla sarmalayarak context’i geçersiz kılabilirsiniz.

İhtiyacınız olduğu kadar çok sağlayıcıyı iç içe yerleştirebilir ve geçersiz kılabilirsiniz.

Nesneler ve fonksiyonları geçirirken tekrar render işlemlerini optimize etmek

Herhangi bir değeri, nesne veya fonksiyon dahil, context aracılığıyla iletebilirsiniz.

Burada, context değeri iki özellikli JavaScript nesnesidir ve bunlardan biri fonksiyondur. MyApp yeniden render edildiğinde (örneğin, bir rota güncellendiğinde), farklı fonksiyona işaret eden farklı bir nesne olur. Bu nedenle React, ağaçtaki useContext(AuthContext) çağrılan tüm bileşenlerin yeniden render etmek zorunda kalır.

Daha küçük uygulamalarda bu bir sorun değildir. Ancak, currentUser gibi altında yatan veriler değişmediyse, bunları yeniden render etmek gerekli değildir. React’ın bu gerçeği kullanmasına yardımcı olmak için, login fonksiyonunu ve nesne oluşturmayı ile sarmalayabilirsiniz. Bu bir performans optimizasyonudur:

Bu değişiklik sonucunda, MyApp yeniden render edilse bile, useContext(AuthContext) çağıran bileşenler, currentUser değişmediği sürece yeniden render edilmeyecektir.

ve hakkında daha fazla bilgi edinin.

Sorun giderme

Bileşenim sağlayıcının değerini görmüyor

Bunun birkaç yaygın sebebi vardır:

  1. <SomeContext> öğesini useContext() öğesini çağırdığınız bileşenle aynı bileşende (veya altında) oluşturuyorsunuz. <SomeContext> öğesini useContext() öğesini çağıran bileşenin üstüne ve dışına taşıyın.
  2. Bileşeninizi <SomeContext> ile sarmayı unutmuş ya da ağacın düşündüğünüzden farklı bir bölümüne koymuş olabilirsiniz. Hiyerarşinin doğru olup olmadığını kullanarak kontrol edin
  3. Araçlarınızda, sağlayan bileşen tarafından görülen SomeContext ile okuyan bileşen tarafından görülen SomeContextin iki farklı nesne olmasına neden olan bir derleme sorunuyla karşılaşıyor olabilirsiniz. Örneğin, sembolik bağlantılar kullanıyorsanız bu olabilir. Bunu window.SomeContext1 ve window.SomeContext2 gibi globallere atayarak ve ardından konsolda window.SomeContext1 === window.SomeContext2 olup olmadığını kontrol ederek doğrulayabilirsiniz. Aynı değillerse, bu sorunu derleme aracı düzeyinde düzeltin.

Varsayılan değer farklı olsa bile context’den her zaman undefined alıyorum

Ağaçta value verilmemiş bir sağlayıcı olabilir:

value belirtmeyi unutursanız, value={undefined} geçmiş gibi davranır .

Yanlışlıkla farklı bir özellik adı kullanmış da olabilirsiniz:

Her iki durumda da konsolda React uyarısı görmelisiniz. Bunları düzeltmek için prop’u value olarak adlandırın:

CreateContext(defaultValue) çağrınızdan gelen [varsayılan değerin] (#specifying-a-fallback-default-value) yalnızca yukarıda eşleşen bir sağlayıcı yoksa kullanılır. Üst ağacın herhangi bir yerinde bir <SomeContext value={undefined}> bileşeni varsa, useContext(SomeContext) çağrısını yapan bileşen *bağlam değeri olarak undefined alır.