React-də useContext nədir?

useContext React-də funksional komponentlərin kontekstdəki dəyişikliklərə abunə olmalarını təmin edən bir hook-dur. Bu, məlumatların komponentlər ağacında ötürülməsini, hər səviyyədə açıq şəkildə prop göndərməyə ehtiyac olmadan, təmin edir.

İş prinsipi:

1. Kontextin yaradılması: React.createContext() istifadə edilərək kontekst obyekti yaradılır. Bu obyekt, Provider və Consumer ehtiva edir (və ya useContext funksional komponentlərdə istifadə olunur).
2. Dəyərin təmin edilməsi: Kontekstin Provider komponenti, dəyərə çıxış etməli olan komponent ağacını əhatə edir. value prop-u vasitəsilə dəyər ötürülür və bu, bütün abunə olan komponentlər üçün əlçatan olur.
3. Dəyərin alınması: useContext(MyContext) funksional komponent daxilində çağırılır, burada MyContext əvvəlcədən yaradılmış kontekstdir. Hook, kontekstin hazırkı dəyərini qaytarır. Dəyər dəyişdikdə, useContext istifadə edən komponent avtomatik olaraq yenidən render olunur.

Üstünlüklər:

• Məlumatların ötürülməsinin asanlığı: "prop drilling" ehtiyacını aradan qaldırır, çoxsaylı aralıq komponentlər vasitəsilə məlumat ötürülməsini sadələşdirir.
• Qlobal vəziyyət: Tətbiqin qlobal vəziyyətinin idarə olunması üçün əlverişlidir (məsələn, mövzu, autentifikasiya, lokalizasiya).
• Performans: React optimallaşdırır useContext istifadə edən komponentlərin yenidən render olunmasını, yalnız bu kontekstdə dəyişikliklərə abunə olanları yenidən render edir.

Mənfi cəhətləri:

• Debugging çətinliyi: Kontekst dəyərinin haradan gəldiyini izləmək, props ilə müqayisədə daha çətin ola bilər.
• Performans ilə tez-tez yeniləmələr: Əgər kontekst dəyəri çox tez-tez yenilənirsə, bu, bütün abunə olan komponentlərin tez-tez yenidən render olunmasına səbəb ola bilər.

Nümunə:

import React, { createContext, useContext } from 'react';

// 1. Kontekstin yaradılması
const ThemeContext = createContext('light');

// Provider komponenti
function ThemeProvider({ children }) {
  const theme = 'dark'; // Nümunə dəyər
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// Kontekstdən istifadə edən komponent
function ThemedComponent() {
  // 3. Kontekst dəyərinin alınması
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>Mövzu: {theme}</div>;
}

// Tətbiq
function App() {
  return (
    <ThemeProvider> {/* 2. Dəyərin təmin edilməsi */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;