Хук React useContext— это мощный инструмент для обмена состоянием между компонентами без необходимости передавать данные через длинную цепочку реквизитов. С помощью useContextвы можете легко обмениваться состоянием по всему дереву компонентов, что делает его полезным инструментом для управления глобальным состоянием.

В этой статье мы рассмотрим основы хука useContextи посмотрим, как мы можем использовать его для управления состоянием в наших приложениях React.

Что такое useContext?

useContext— это встроенный хук React, который позволяет вам использовать данные из контекста, созданного родительским компонентом. Контекст — это объект, содержащий некоторые общие данные о состоянии, к которым может получить доступ любой компонент, являющийся потомком компонента, создавшего контекст.

Хук useContextпринимает объект контекста в качестве аргумента и возвращает текущее значение этого контекста. Это означает, что любые обновления контекста автоматически вызовут повторный рендеринг всех компонентов, которые его потребляют.

Как использовать useContext?

Чтобы использовать useContext, нам сначала нужно создать объект контекста. Мы можем сделать это, используя createContextметод из Reactбиблиотеки. Вот пример:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Компонент Appоборачивает свои дочерние компоненты в MyContext.Providerкомпонент и передает текущее значение общего состояния в качестве реквизита value. В этом случае значение представляет собой объект, содержащий countсостояние и setCountфункцию.

Компонент Counterпотребляет MyContextобъект с помощью useContextловушки и извлекает countсостояние и setCountфункцию из объекта контекста. Затем мы используем incrementфункцию для обновления общего состояния при нажатии кнопки.

Когда использовать useContext?

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

useContextтакже является хорошим выбором для случаев, когда вам нужно передать функции вниз по дереву компонентов. Передавая функцию через объект контекста, вы можете избежать ее прохождения через несколько уровней компонентов.

Заключение

Хук useContext— это мощный инструмент для управления глобальным состоянием.

Надеюсь, это многое вам объяснит.