რა არის useContext React-ში?

useContext - ეს არის ჰუკი React-ში, რომელიც საშუალებას აძლევს ფუნქციურ კომპონენტებს გამოწერონ კონტექსტის ცვლილებებზე. ის უზრუნველყოფს მონაცემების გადაცემის გზას კომპონენტების ხეზე, გარეშე რომ აშკარად გადმოსცეთ პროპსები თითოეულ დონეზე.

მუშაობის პრინციპი:

1. კონტექსტის შექმნა: გამოიყენება React.createContext() კონტექსტის ობიექტის შესაქმნელად. ამ ობიექტში შედის Provider და Consumer (ან useContext გამოყენება ფუნქციურ კომპონენტებში).
2. მნიშვნელობის მიწოდება: კონტექსტის Provider ირგვლივ აყრის კომპონენტების ხეს, რომელთაც სურთ მნიშვნელობის მიღება. value პროპით გადაეცემა მნიშვნელობა, რომელიც ყველას ხელმისაწვდომი იქნება.
3. მნიშვნელობის მიღება: useContext(MyContext) იძახება ფუნქციურ კომპონენტში, სადაც MyContext არის ადრე შექმნილი კონტექსტი. ჰუკი აბრუნებს მიმდინარე მნიშვნელობას. როდესაც კონტექსტის მნიშვნელობა იცვლება, ის ავტომატურად იწერება מחדש.

უპირატესობები:

• მონაცემების მარტივი გადაცემა: ამცირებს საჭიროებას prop drilling-ის, ანუ პროპსების გადაცემას მრავალი კომპონენტის შორის.
• გლობალური მდგომარეობა: მოსახერხებელია გლობალური მდგომარეობის მართვაში (მაგ. თემა, ავტორიზაცია, ლოკალიზაცია).
• პროდუქტიულობა: React ოპტიმიზირებს useContext-ით გამოყენებულ კომპონენტებს, რომლებიც იწერებიან მხოლოდ ცვლილებების დროს.

მძიმე მხარეები:

• დაბადების სირთულე: კონტექსტის მნიშვნელობის წყაროს მიყოლა შეიძლება იყოს რთული, შედარებით პროპებთან.
• პროდუქტიულობა ხშირი განახლებებისას: თუ კონტექსტის მნიშვნელობა ხშირად იცვლება, ეს შეიძლება გამოიწვიოს ყველა მიმწოდებელი კომპონენტის ხშირი გადახატვით.

მაგალითი:

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

// 1. კონტექსტის შექმნა
const ThemeContext = createContext('light');

// პროვაიდერი კომპონენტი
function ThemeProvider({ children }) {
  const theme = 'dark'; // მაგალითის მნიშვნელობა
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

// კონტექსტის გამოყენების კომპონენტი
function ThemedComponent() {
  // 3. მნიშვნელობის მიღება
  const theme = useContext(ThemeContext);
  return <div style={{ background: theme === 'dark' ? '#333' : '#fff', color: theme === 'dark' ? '#fff' : '#000' }}>თემა: {theme}</div>;
}

// გამოყენება
function App() {
  return (
    <ThemeProvider> {/* 2. მნიშვნელობის მიწოდება */}
      <ThemedComponent />
    </ThemeProvider>
  );
}

export default App;