React Hooks serimin bu devamında, kancaya dalıyoruz useContext. Önceki bloglarımı takip ettiyseniz, useStateve useEffectkancalarını nasıl kullanacağınız konusunda zaten iyi bir anlayışa sahipsiniz. Şimdi, React Hooks kitaplığındaki bir başka önemli kancayı keşfetme zamanı, useContext. Bu kanca, donanımları her düzeyde manuel olarak aktarmak zorunda kalmadan bileşen ağacından veri aktarmanın bir yolunu sağlar. Bu blogun sonunda, useContextdurumu React bileşenleriniz genelinde yönetmek ve paylaşmak için nasıl etkili bir şekilde kullanacağınız konusunda derin bir anlayışa sahip olacaksınız. Öyleyse başlayalım!

React, Tek Yönlü Bir Veri Bağlamadır!

Önce veri bağlamanın ne olduğunu anlayalım.
Veri Bağlama, kullanıcı arabirimi ile verileri arasında bağlantı kurma işlemidir. Bu veriler her değiştiğinde, UI bileşeni güncellenecektir.

Şimdi, tek yönlü Veri Bağlama nedir?
Tek Yönlü Veri Bağlama, verilerin yalnızca bir yönde akacağı anlamına gelir, yani tek JavaScript dosyası, verileri HTML dosyasına gönderir. Yani, veriler yalnızca tek yönlü akacaktır.

React'te, veriler görünüme ve alt öğeye iletilir. Durumu (yani verileri) çocuğa yalnızca ebeveyn gönderebilir. Verileri alt bileşenden üst bileşene aktarmanın doğrudan bir yolu yoktur.

Durumlar ebeveynden çocuğa ve görünüme iletilir. Görünümden tetiklenen olay daha sonra durumu güncelleyebilir.

Tepki Bağlamı Nedir?

Prop'ları kullanarak ana bileşenden alt bileşene durumu aktarıyoruz. Bir üst bileşenden alt bileşene durum geçişi, aksesuarlar kullanılarak kolayca yapılabilir. Bununla birlikte, derinlemesine iç içe geçmiş bileşenlere geçiş durumu söz konusu olduğunda, bu yöntem hızla karmaşık hale gelebilir ve büyük uygulamalarda bakımı zorlaşabilir. React bileşen ağacını yönetmek de külfetli olabilir. Örneğin,

En üst düzeyde (mavi) bildirilen durum, alt düzey bileşene (kırmızı) ulaşmak için ara bileşenlerden (siyah) geçmelidir.

Bir üst bileşenden alt bileşenlerine veri aktarma sürecini basitleştirmek için React, Bağlam kullanımını sağlar. Bağlam ile ana bileşen, verilerini ağaçtaki tüm alt bileşenleriyle paylaşarak, destekleri sürekli olarak zincirden aşağıya geçirme ihtiyacını azaltır. Bu, ağaçtaki konumu ne olursa olsun herhangi bir alt bileşenin ebeveyn tarafından sağlanan verilere erişmesini kolaylaştırır.

Bağlam, verileri ebeveynden alacak ve orta bileşenlerden geçmeden çocuklara sağlayacaktır.

Bağlam aşağıdaki gibi verileri içerebilir:

• küresel devlet
• tema
• uygulama yapılandırması
• kimliği doğrulanmış kullanıcı adı
• Kullanıcı ayarları
• tercih edilen dil
• bir hizmet koleksiyonu

Bir uygulamada bağlamı kullanma

Verilerin bağlamını oluşturmak için şu üç adımı izliyoruz:

• Bağlam oluşturma
• Bağlamı sağlayın
• bağlamı tüket

createContextReact'te bağlam oluşturmak için , bağlam oluşturmak için yerleşik bir işlev olan that'yi kullanırız . Örneğin, uygulamamız için tema değiştirme işlevine bakalım.

export const ThemeContext = createContext(null);

Bağlamı sağlayın

Bağlam verilerine alt bileşenlerin erişimine izin vermek için, ağaçtaki ilgili bileşene sağlanmalıdır.

export default function App() {
  const [style, setStyle] = useState("light");

  function toggleStyle() {
    setStyle((style) => (style === "light" ? "dark" : "light"));
  }

  return (
    <ThemeContext.Provider
      value={{ style, toggleStyle}}
    >
      <Content /> //The child component
    </ThemeContext.Provider>
  );
}

Bağlamı Kullanma

Bağlamı kullanmak için , bir bağlam örneği olan useContextkancayı veya hangisini kullanabiliriz . ThemeContext.ConsumerÖrneğimizde kanca kullanıyoruz useContext.

import { useContext } from "react";
import { ThemeContext } from "./App";

function Theme() {
  const { style, toggleStyle } = useContext(
    ThemeContext
  );

  return (
    <div>
      <p>
        The theme is {style}.
      </p>
      <button onClick={toggleStyle}>Change Theme</button>
    </div>
  );
}

export default Theme;

Sonuç olarak, useContextReact uygulamanızdaki bileşenler arasında durumu yönetmenin ve paylaşmanın güçlü bir yolunu sağlar. Donanımlar aracılığıyla durumu aktarmanın karmaşıklığını azaltmaya yardımcı olabilir ve herhangi bir alt bileşenden verilere erişmenin kolay bir yolunu sağlar. Kancanın useContextkullanımı basittir ve işlevsel bir bileşendeki bağlam verilerine erişmeyi mümkün kılar. Bu, React Hooks'taki bir dizi blog yazısının parçasıdır. useStateReact Hooks hakkında bilgi edinmeye devam etmek için, tartıştığım serideki önceki bloglara baktığınızdan emin olun useEffect.

Blogu okuduğunuz için teşekkürler, daha fazlası için takip edin.

Linkedin —https://linkedin.com/in/joshiomkar04
Twitter —https://twitter.com/ye_joshya