UseContext'te Uzmanlaşma: React'in Context API'sine Derin Bir Dalış

Bugün, React'te bileşenler arasında verimli veri paylaşımına izin veren ve bileşen iletişimini basitleştiren useContext kancasının kullanımını tartışacağız.

React'teki useContextkanca, donanım delmeye gerek kalmadan bileşenler arasında verimli veri paylaşımına izin verir.
Bileşenlerin birden çok bileşen düzeyinden geçmesine gerek kalmadan bileşenlerin genel duruma erişmesi için bir yol sağlayarak bileşen iletişimini basitleştirir.
Bu, daha organize ve bakımı kolay bir kod tabanının yanı sıra gereksiz yeniden işlemelerden kaçınarak gelişmiş performans sağlar. Ek olarak, useContext, Redux gibi diğer durum yönetimi kitaplıklarına bir alternatif olarak kullanılabilir.

useContextİşte kancanın bir React bileşeninde nasıl kullanılacağına dair bir örnek :

import React, { useContext } from 'react';

// Create the context
const MyContext = React.createContext();

// Provide a context value
function MyProvider({ children }) {
  const [value, setValue] = React.useState("Hello, World!");
  const providerValue = { value, setValue };
  return <MyContext.Provider value={providerValue}>{children}</MyContext.Provider>;
}

function MyComponent() {
  // Use the context
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
        <p>{value}</p>
        <button onClick={() => setValue('Hello, React!')}>Change Value</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

Bileşen MyProvider, bağlama bir değer sağlayan bir bileşendir. useStateBağlam için bir başlangıç ​​değeri ayarlamak üzere kancayı kullanır . Bileşen daha sonra, alt öğelerini saran ve bağlama değer sağlayan MyProviderbir öğe oluşturur. MyContext.Providerve sağlayıcıya tek bir nesne olarak iletilir value.setValue

Bileşen , kancayı MyComponentkullanarak bağlamdan değer tüketen bir bileşendir . useContextKanca , useContextdaha önce oluşturduğumuz bağlam nesnesi ile çağrılır ve bağlamın geçerli değerini döndürür. Bu örnekte, bağlamın değeri bir dizedir, ancak herhangi bir veri türü olabilir.

Bileşen MyComponentdaha sonra, bağlamdaki değeri görüntüleyen bir paragraf öğesi ve bir düğme öğesi içeren bir div öğesi oluşturur; düğme tıklandığında, bağlamın değerini değiştirecek ve bileşeni şu şekilde yeniden oluşturacak olan setValue işlevini çağırır: güncellenen değeri görüntüleyin.

Son olarak bileşen, bileşeni ve Appbileşeni oluşturan üst düzey bileşendir. Bu bileşen, bileşene bağlam değeri sağlamaktan ve bileşeni işlemekten sorumludur .MyProviderMyComponentMyProviderMyComponent

App bileşeni işlendiğinde, bağlam için değeri ayarlayan MyProvider bileşenini ve useContextkancayı kullanarak bağlamdan değer alan MyComponent bileşenini işler.

Bu örnekle, useContextkancanın, değerleri bileşen ağacının birden çok düzeyinden aşağı aktarmanıza gerek kalmadan bileşenler arasında kolayca paylaşmanıza nasıl izin verdiğini görebilirsiniz.

Umarım beğenirsiniz

Mutlu kodlama!

önerilerde bulunmak istiyorum:-

beni LinkedIn Twitter'da bul

Bana [email protected] adresinden e-posta gönder