Sobes.tech
Back to questions
Junior — Middle
67

Как применяется React Hook useContext и в чем его основная функция?

Answer from AI

sobes.tech AI

React Hook useContext используется для доступа к значению контекста в функциональных компонентах React.

Основная функция useContext — получить текущее значение контекста, созданного с помощью React.createContext, без необходимости использовать компонент <Context.Consumer>.

Пример использования:

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

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}>Кнопка</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

В этом примере ThemedButton получает значение темы из контекста и использует его для стилизации кнопки.

Таким образом, useContext упрощает доступ к глобальным данным, которые могут использоваться в разных компонентах без передачи пропсов.