Использование нового 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
, но мы можем подписаться только на один и один контекст. Чтобы использовать множественный контекст, мы должны использовать приведенный выше пример с использованием шаблона опоры рендеринга :-).
Прежде всего, мы собираемся раскрыть наш LanguageContext
created with React.createContext()
. export const LanguageContext = React.createContext();
Наш класс компонента должен выглядеть так
Что дальше:
- Протестируйте перехватчики React (useContext, useState, useReducer, useEffect)
- Протестируйте React.memo React.lazy
Спасибо за потраченное время, ХЛАПИТЕ и ПОДЕЛИТЕСЬ, если вам понравилась эта статья, и НАСЛАЖДАЙТЕСЬ МЕНЯ ЗА ОТЗЫВЫ ❤