Использование нового API контекста React

Контекстный API позволяет нам обмениваться данными между компонентами без передачи данных, используя управление состоянием, такое как Redux или MobX.
В практических примерах мы можем использовать его для обмена данными, такими как настройки устройства, языковые предпочтения (самый известный пример), аутентификация или информацию, необходимую пользователю.
В нашем случае мы будем использовать информацию о пользователе и языке.

Шаги:
- Используйте приложение create-response-app.
- Создайте папку контекста.
- Создайте контекст языка и контекст аутентификации.
- Предоставьте доступ к потребителю и поставщику (AuthConsumer, AuthProvider, LanguageConsumer, LanguageProvider )
- Добавить информацию о пользователе (вход, регистрация)
- Изменить языковые настройки

Наследие API контекста до 16.3:

Контекстный API был доступен в старой версии REACT, но не рекомендуется. С марта 2018 года команда React публикует новую версию 16.3, используя шаблон RenderProp для передачи данных потомкам.

Как это работает:

  • Языковой контекст (открывающий поставщик и потребитель)
  • Контекст аутентификации (открывающий поставщик и потребитель)

Их обоих выставляем в index.js в папке контекста

import * as Auth from “./auth”;
import * as Language from “./language”;
export { Auth, Language };

Это помогает получить доступ от каждого поставщика и потребителя, только импортируя контекст, подобный этому import * as Context from '../context';, и используя его, как в этом примере ниже.

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

static contextType —React v16.6

Этот API позволяет нам подписаться на контекст и получить доступ к значению с помощью this.context, но мы можем подписаться только на один и один контекст. Чтобы использовать множественный контекст, мы должны использовать приведенный выше пример с использованием шаблона опоры рендеринга :-).

Прежде всего, мы собираемся раскрыть наш LanguageContextcreated with React.createContext().
export const LanguageContext = React.createContext();

Наш класс компонента должен выглядеть так

Что дальше:

  • Протестируйте перехватчики React (useContext, useState, useReducer, useEffect)
  • Протестируйте React.memo React.lazy

Спасибо за потраченное время, ХЛАПИТЕ и ПОДЕЛИТЕСЬ, если вам понравилась эта статья, и НАСЛАЖДАЙТЕСЬ МЕНЯ ЗА ОТЗЫВЫ ❤