Пример: использование контекста и хуков для обмена состоянием между различными компонентами

Посмотрите приложение в действии в песочнице:

Песочница

Обзор высокого уровня

Используя Context, мы разделяем состояние между несколькими компонентами без явной передачи реквизита через каждый уровень дерева. В этом примере приложения показан рецепт, который вы можете использовать для сохранения такого общего состояния в своем приложении.

Вкратце, мы делаем следующее:

1. Мы создаем контекст с именем UsersContext
2. Мы заворачиваем компоненты в Провайдер этого UsersContext.
3. Отдельные компоненты используют использовать контекстный хук чтобы получить значение из контекста.

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

Подробности об этом приложении

В следующих разделах я собираюсь выделить важные детали из файла контекста, а также из некоторых компонентов:

Пользовательский контекст

В контексте мы сохраняем следующие реквизиты:

• пользователи (массив всех пользователей)
• selectedUser (объект, содержащий одного выбранного пользователя)
• setSelectedUser (функция для выбора пользователя)
• addUser (функция для добавления нового пользователя)

В этом файле мы создаем новый контекст и экспортируем его. Мы также экспортируем Provider и Consumer этого контекста:

UsersContext

Что происходит в этом файле

1. мы используем createContext из React для создания нового контекста. Контекст имеет Provider компонент и Consumer составная часть.
2. Мы экспортируем следующие три из этого файла:
   • Контекст
     Это будет использоваться другими компонентами через useContext Крюк
   • Поставщик:
     • получает начальные значения в качестве реквизита.
     • использует useState хуки для сохранения значений в состоянии.подробнее о хуках useState
     • имеет реквизиты по умолчанию (так что значения по умолчанию изначально сохраняются в состоянии, когда никакие реквизиты не передаются)
     • делает usersContext объект со значениями и функциями, которые нам нужны в контексте. (обратите внимание, что он также содержит функции для обновления состояния, которые возвращаются из useState Крюк)
     • Наконец, он возвращает поставщика контекста, упаковывающего дочерние элементы, и передает объект userContext в качестве своего объекта. value.
   • Потребитель
     Компонент React, который подписывается на изменения контекста. Это позволяет подписаться на контекст внутри функционального компонента.

Поставщик, используемый в App.js

Компонент App, который находится на первом уровне нашего приложения, заключает все свои дочерние элементы в UserContextProvider. Этому провайдеру передается начальный users ценность в качестве опоры. Как видно выше, значение, переданное в свойствах, становится начальным значением в контексте.

Теперь все потомки этого провайдера могут использовать использованиеконтекста крючок, как описано ниже

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

Использование хука useContext

в Список пользователей компонент, мы получаем контекст через использовать контекстный хук:

import React, { useContext } from "react";


import { UsersContext } from "./context";
.
.
.

const usersContext = useContext(UsersContext);
const { users, selectedUser, setSelectedUser } = usersContext;

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

Без хука useContext

Важно отметить, что без использованиеконтекста ловушка, потомки компонентов Provider могут использовать Потребитель составная часть. Компонент Consumer использует функцию renderProp.

import { Consumer } from "./context";
<Consumer>
  {usersContext => /* render something based on the context value */}
</Consumer>

Обновление значения в контексте

Сам контекст передает вниз функции, которые могут быть вызваны для обновления контекста. В этом примере мы вызываем функцию setSelectedUser заполнить selectedUser свойство в контексте.

// in UsersList Component
.
.
const usersContext = useContext(UsersContext);
const { users, selectedUser, setSelectedUser } = usersContext;
.
.
.
    // Within the returned JSX,
    <div onClick={() => setSelectedUser(user)}></div>
.
.

Помните, что компонент UsersContext фактически поддерживает selectedUser в состоянии (объяснено выше).

Другие компоненты также используют useContext.

Точно так же компоненты UserDetails и AddUser используют использованиеконтекста подключитесь, чтобы отобразить сведения о выбранном пользователе и добавить нового пользователя соответственно.

Вывод

Спасибо за посещение.
Я надеюсь, что этот пример поможет вам понять, что такое хук Context и useContext.

Дальнейшее чтение:

Подробнее о React Context
Посмотреть другие встроенные хуки