YouTube :

KodSandbox :

Motivasyon

React durumunu işlemek için neden Context kullanılır? Uygulama mağazanızı yönetmek için Redux'u kullanmanızla aynı nedenle . Bileşenleriniz birbiriyle konuşuyorsa ve kaldırma durumu hantal hale geliyorsa, Bağlam, uygulama durumunuzla başa çıkmanın yerel bir yoludur.

Önkoşullar

<App>Context'i kullanmak için yerel durumu kullanan yeniden düzenleme yapacağız:

Gördüğünüz gibi, sayımı artıran veya azaltan 2 düğmeli bir sayaç var.

Sağlayıcı

<Provider>Prop oluşturun ve value0'a ayarlayın:

Şurada <Provider>en üst düzey bileşen olarak işleyin index.js:

Sağlayıcıyı valueşununla alın useContext:<App>

kullanımRedüktör

Bir azaltıcı işlevi oluşturun:

Durumu iletin ve şuradan useReducerSağlayıcı desteğine gönderin value:

<App>Yeni bağlam değeriyle güncelleyin :

Tüketici

Bir alternatif TüketicidiruseContext .

Consumerİlk olarak, Bağlamdan dışa aktarın :

Ardından useContextşununla değiştirin <Consumer>:

<Consumer>prop için bir geri arama işlevi gerektirir children. 1. argüman Sağlayıcıdır value.

Sınıf

Sınıf bileşenleri için Sağlayıcı değerine şuradan erişilebilir this.context:

Yapmak

İyileştirmeler için fikirler:

• için özel bir kanca oluşturun useContext(Context).
• Sabitlere yeniden düzenleme eylem türleri.
• Aksiyon yaratıcıları oluşturun.
• displayNameReact DevTools'da görünürlüğü iyileştirmek için Bağlam'a ayarlayın .

• Youtube videosu
• CodeSandbox demosu
• Bağlam
• kullanımRedüktör