Ինչ է useContext-ը React-ում։

useContext - դա React-ում հուկ է, որը թույլ է տալիս ֆունկցիոնալ կոմպոնենտներին բաժանորդագրվել կոնտեքստի փոփոխություններին։ Այն տրամադրում է տվյալների փոխանցման միջոց՝ կոմպոնենտների ծառայով՝ առանց հստակ Prop-եր փոխանցելու յուրաքանչյուր մակարդակում։

Աշխատանքի սկզբունքը:

1. Կոնտեքստի ստեղծում: Օգտագործվում է React.createContext()՝ կոնտեքստի օբյեկտ ստեղծելու համար։ Այս օբյեկտը պարունակում է Provider և Consumer (կամ useContext ֆունկցիոնալ կոմպոնենտներում օգտագործելու համար)։
2. Արժեքի տրամադրում: Կոնտեքստի Provider-ը շրջապատում է կոմպոնենտների ծառը, որոնց անհրաժեշտ է հասանելիություն ունենալ արժեքին։ value Prop-ով փոխանցվում է արժեքը, որը հասանելի կլինի բոլոր բաժանորդագրված կոմպոնենտներին։
3. Արժեքի ստացում: useContext(MyContext) կանչվում է ֆունկցիոնալ կոմպոնենտի ներսում, որտեղ MyContext-ն նախապես ստեղծված կոնտեքստն է։ Հուկը վերադարձնում է ընթացիկ արժեքը։ Երբ կոնտեքստի արժեքը փոխվում է, օգտագործող կոմպոնենտը ավտոմատ կերպով վերաարտադրվում է։

Առավելություններ:

• Հեշտ փոխանցում տվյալների: Հեռացնում է անհրաժեշտությունը prop drilling-ով փոխանցելու մեծ քանակությամբ միջնորդական կոմպոնենտներ։
• Գլոբալ վիճակ: Հարմար է գլոբալ վիճակների կառավարման համար՝ օրինակ, թեմա, մուտք գործել, տեղայնացում։
• Արդյունավետություն: React-ը օպտիմիզացնում է useContext-ը օգտագործող կոմպոնենտների ռենդերը՝ վերաարտադրելով միայն այները, որոնք բաժանորդագրված են կոնտեքստի փոփոխություններին։

Անբարենպաստություններ:

• Դեբագիրման բարդություններ: Կոնտեքստի արժեքի աղբյուրն հետևելը կարող է ավելի բարդ լինել՝ համեմատած Prop-երի հետ։
• Արդյունավետության խնդիրներ հաճախակի թարմացումների դեպքում: Եթե կոնտեքստի արժեքը շատ հաճախ թարմացվում է, դա կարող է հանգեցնել բոլոր բաժանորդագրված կոմպոնենտների հաճախակի վերաարտադրմանը։

Օրինակ:

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;