Reactте useContext эмне?

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;