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

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

Песочница

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

Используя 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
Посмотреть другие встроенные хуки

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *