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

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

Песочница

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

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

В двух словах мы делаем следующее:

Мы делаем контекст под названием Userscontext.
Мы обертываем компоненты в Провайдер этого пользователяContext.
Отдельные компоненты используют USECONTEXT крючок получить значение из контекста.

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

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

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

ПользовательContext.

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

Пользователи (Array всех пользователей)
Выбранный пункт (объект, содержащий один выбранный пользователь)
setSelectedUser (Функция для выбора пользователя)
AddUser (функция для добавления нового пользователя)

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

Userscontext.

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

Мы используем CreateContext Функция от реагирования на создание нового контекста. Контекст имеет Провайдер Компонент и A Потребитель составная часть.
Мы экспортируем следующие три из этого файла:
- Контекст Это будет использоваться другими компонентами через упреждающий текст Крюк
- Поставщик:
  - Получает начальные значения как реквизиты.
  - использует Уместите крючки, чтобы сохранить значения в состоянии. Узнайте больше о unesestate крючка
  - имеет реквизиты по умолчанию (так что значения по умолчанию хранятся в состоянии, когда не передаются реквизиты)
  - делает userscontext Объект со значениями и функциями, которые нам нужны в контексте. (Обратите внимание, что он также содержит функции для обновления состояния, которые возвращаются из Usestate крючок)
  - Наконец, он возвращает поставщику контекста, обертывая детей и передает объект USERContext в качестве его ценность Отказ
- Потребитель Актуальный компонент, который подписывается на изменения контекста. Это позволяет вам подписаться на контекст в рамках функционального компонента.

Поставщик используется в App.js

Компонент приложений, который находится на первом уровне в нашем приложении, убирает всех своих детей под UsercontextProvider Отказ Этот провайдер передан начальным Пользователи ценность как опора. Как видно выше, значение, передаваемое в реквизитах, становится начальным значением в контексте.

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

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

Использование крюка USEContext

В Пользовательскийлист Компонент, мы получаем контекст через USECONTEXT крючок :

// import the hook
import React, { useContext } from "react";

//Import the Context
import { UsersContext } from "./context";
.
.
.
// get the current value in UsersContext through the hook
const usersContext = useContext(UsersContext);
const { users, selectedUser, setSelectedUser } = usersContext;

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

Без USECONTEXT крючка

Важно отметить, что без упреждающий текст Крюк, потомок поставщика может использовать Потребитель составная часть. Потребительский компонент использует функцию RenderProp.

import { Consumer } from "./context";

  {usersContext => /* render something based on the context value */}

Обновление стоимости в контексте

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

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

Помните, что компонент пользователейContext на самом деле сохраняет выбор в штате (объяснено выше)

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

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

Заключение

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

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

Узнайте больше о React Context Смотрите другие встроенные крючки