createContext

const SomeContext = createContext(defaultValue)

• Справочник
  • createContext(defaultValue)
  • SomeContext.Provider
  • SomeContext.Consumer
• Использование
  • Создание контекста
  • Импорт и экспорт контекста из файла
• Отладка
  • Не могу найти способ изменить значение контекста

Справочник

createContext(defaultValue)

Вызов createContext вне любого компонента создаёт контекст.

import { createContext } from 'react';

const ThemeContext = createContext('light');

См. примеры ниже.

Параметры

• defaultValue: Значение, которое будет иметь контекст, если в дереве компонентов над компонентом, считывающим контекст, нет соответствующего поставщика контекста. Если у вас нет осмысленного значения по умолчанию, укажите null. Значение по умолчанию используется в качестве «последней инстанции» резервного значения. Оно статичное и никогда не меняется.

Возвращаемое значение

createContext возвращает объект контекста.

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

• SomeContext.Provider позволяет предоставить значение контекста компонентам.
• SomeContext.Consumer — альтернативный, и редко используемый способ считывания значения контекста.

SomeContext.Provider

Оборачивайте ваши компоненты в поставщик контекста, чтобы указать значение этого контекста для всех компонентов внутри:

function App() {
  const [theme, setTheme] = useState('light');
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <Page />
    </ThemeContext.Provider>
  );
}

Свойства

• value: Значение, которое вы хотите передать всем компонентам, считывающим этот контекст внутри этого поставщика, независимо от глубины вложенности. Значение контекста может быть любого типа. Компонент, вызывающий useContext(SomeContext) внутри поставщика, получает value самого внутреннего соответствующего поставщика контекста над ним.

SomeContext.Consumer

До useContext существовал более старый способ считывания контекста:

function Button() {
  // 🟡 Legacy way (not recommended)
  return (
    <ThemeContext.Consumer>
      {theme => (
        <button className={theme} />
      )}
    </ThemeContext.Consumer>
  );
}

Хотя этот старый способ всё ещё работает, новый код должен считывать контекст с помощью useContext():

function Button() {
  // ✅ Recommended way
  const theme = useContext(ThemeContext);
  return <button className={theme} />;
}

Свойства

• children: Функция. React вызовет функцию, которую вы передаёте, с текущим значением контекста, определённым тем же алгоритмом, что и useContext(), и отобразит результат, который вы возвращаете из этой функции. React также будет повторно выполнять эту функцию и обновлять интерфейс пользователя всякий раз, когда контекст от родительских компонентов изменяется.

Использование

Создание контекста

Контекст позволяет компонентам передавать информацию глубоко вниз без явного передачи свойств.

Вызов createContext вне любых компонентов создаёт один или несколько контекстов.

import { createContext } from 'react';

const ThemeContext = createContext('light');
const AuthContext = createContext(null);

createContext возвращает объект контекста. Компоненты могут считывать контекст, передавая его в useContext():

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

function Profile() {
  const currentUser = useContext(AuthContext);
  // ...
}

По умолчанию, получаемые значения будут значениями по умолчанию, которые вы указали при создании контекстов. Однако само по себе это бесполезно, потому что значения по умолчанию никогда не изменяются.

Контекст полезен, потому что вы можете предоставлять другие, динамические значения из ваших компонентов:

function App() {
  const [theme, setTheme] = useState('dark');
  const [currentUser, setCurrentUser] = useState({ name: 'Taylor' });

  // ...

  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Теперь компонент Page и любые компоненты внутри него, независимо от глубины вложенности, будут «видеть» переданные значения контекста. Если переданные значения контекста изменяются, React будет перерисовывать компоненты, считывающие контекст.

Подробнее о чтении и предоставлении контекста, и см. примеры.

Импорт и экспорт контекста из файла

Часто компонентам в разных файлах нужен доступ к одному и тому же контексту. Вот почему принято объявлять контексты в отдельном файле. Затем вы можете использовать оператор export, чтобы сделать контекст доступным для других файлов:

// Contexts.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');
export const AuthContext = createContext(null);

Компоненты, объявленные в других файлах, могут затем использовать оператор import, чтобы прочитать или предоставить этот контекст:

// Button.js
import { ThemeContext } from './Contexts.js';

function Button() {
  const theme = useContext(ThemeContext);
  // ...
}

// App.js
import { ThemeContext, AuthContext } from './Contexts.js';

function App() {
  // ...
  return (
    <ThemeContext.Provider value={theme}>
      <AuthContext.Provider value={currentUser}>
        <Page />
      </AuthContext.Provider>
    </ThemeContext.Provider>
  );
}

Это работает аналогично импорту и экспорту компонентов.

Отладка

Не могу найти способ изменить значение контекста

Код подобный этому задаёт значение контекста по умолчанию:

const ThemeContext = createContext('light');

Это значение никогда не меняется. React использует это значение только как резервное, если не находит соответствующего поставщика выше.

Чтобы значение контекста изменялось со временем, добавьте состояние и оберните компоненты в поставщик контекста.