React'in useContextkancası, verileri uzun bir destek zincirinden geçirmek zorunda kalmadan bileşenler arasında durumu paylaşmak için güçlü bir araçtır. ile useContext, durumu tüm bileşen ağacında kolayca paylaşabilir, bu da onu genel durumu yönetmek için yararlı bir araç haline getirir.

Bu makalede, kancanın temellerini inceleyeceğiz useContextve onu React uygulamalarımızda durumu yönetmek için nasıl kullanabileceğimizi göreceğiz.

nedir useContext?

useContextbir üst bileşen tarafından oluşturulmuş bir bağlamdan veri kullanmanıza izin veren yerleşik bir React kancasıdır. Bağlam, içeriği oluşturan bileşenin soyundan gelen herhangi bir bileşen tarafından erişilebilen bazı paylaşılan durum verilerini tutan bir nesnedir.

Kanca useContext, bağımsız değişkeni olarak bir bağlam nesnesi alır ve bu bağlamın geçerli değerini döndürür. Bu, bağlamdaki herhangi bir güncellemenin, onu tüketen tüm bileşenlerin yeniden oluşturulmasını otomatik olarak tetikleyeceği anlamına gelir.

Nasıl kullanılır useContext?

kullanmak için useContextöncelikle bir bağlam nesnesi oluşturmamız gerekir. createContextBunu kütüphanedeki metodu kullanarak yapabiliriz React. İşte bir örnek:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Bileşen App, alt bileşenlerini bileşene sarıyor MyContext.Providerve paylaşılan durumun geçerli değerini destek olarak iletiyor value. Bu durumda değer, countdurumu ve setCountişlevi içeren bir nesnedir.

Bileşen , kancayı kullanarak nesneyi Countertüketiyor ve durumu ve işlevi bağlam nesnesinden çıkarıyor . Ardından , düğme tıklandığında paylaşılan durumu güncellemek için işlevi kullanıyoruz .MyContextuseContextcountsetCountincrement

Ne zaman kullanılır useContext?

useContextuygulama boyunca birden çok bileşen tarafından erişilmesi gereken genel durumu yönetmek için en kullanışlıdır. Pervane delmenin külfetli olacağı veya birden fazla bileşen katmanından geçiş yapmaktan kaçınmak istediğiniz durumlar için iyi bir seçimdir.

useContextişlevleri bileşen ağacından aşağıya aktarmanız gereken durumlar için de iyi bir seçimdir. Bir işlevi bağlam nesnesinden geçirerek, onu birden çok bileşen katmanından geçirmek zorunda kalmayabilirsiniz.

Çözüm

Kanca useContext, küresel durumu yönetmek için güçlü bir araçtır.

Umarım bu kadarı hepinizi açıklar.