Краткое руководство по управлению состоянием с помощью Context API.
Контекстный API - одно из лучших решений для управления состоянием отдельных отключенных компонентов в React. Он решает сложность передачи данных через реквизиты между несколькими уровнями компонентов. В этой статье обсуждается Context API и реализуется образец мобильного приложения To Do с использованием Context API. Полный код можно взять здесь.
Когда мы обсуждаем управление состоянием, мы можем сказать, что Redux - отличное решение. Тебя интересует Redux? Тогда мой предыдущий пост будет полезен. Вы можете прочитать это отсюда.
Но разработчики Present перешли на Context API из-за его преимуществ. Redux как инструмент управления состоянием необходим для установки библиотек «react-redux», «redux» и «redux-thunk». Контекстный API является частью React. Следовательно, вы не хотите устанавливать какие-либо библиотеки для управления процессом управления. Это уменьшает размер вашего пакета.
1. Что такое Context API?
Контекст предоставляет способ передавать данные через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне. по источнику
Контекстный API предоставляет чистый и простой способ обмена состоянием между компонентами без передачи реквизитов самим React.
Например, вам нужно передать данные от компонента верхнего уровня к компоненту n-го уровня. Если вы не используете глобальное состояние, вы должны передавать данные в качестве свойств каждому компоненту вплоть до компонента n-го уровня. используя Context API, вы можете просто покрыть все компоненты из вашего компонента верхнего уровня с момента.
2. Строительный блок контекстного API
Мы можем разделить Context API на три части.
Контекст
Поставщик
Потребитель
2.1 Контекст
Сначала импортируйте React из «react». Затем функция createContext () из React, которая принимает значение по умолчанию в качестве первого аргумента. Здесь необязательно передавать объект Java Script. В одном приложении может быть несколько контекстов.
2.2 Провайдер
После создания контекста провайдер предоставляет возможность доступа к контексту, который заимствован из него. Он предоставляет данные и функции для передачи всем компонентам.
2.3 Потребитель
Потребитель разрешает доступ к значению дочерним компонентам, родительский элемент которых заключен в оболочку Поставщиком. Он бывает двух типов.
1. ‹Контекст.Потребитель›
Context.Consumer может использоваться как на основе классов, так и на функциональных компонентах. Однако при таком подходе к контексту можно получить доступ только внутри рендера.
2. статический contextType
static contextType можно использовать только компоненты на основе классов.
Теперь мы реализуем наш образец проекта React Native «ToDo» с помощью Context API. Структура папок проекта показана ниже.
TaskList включает текущие задачи в виде списка и задачу удаления. Нижний колонтитул включает функцию добавления новой задачи.
context.js
GlobalState.js
GlobalState хранит логику приложения отдельно.
TasksList.js
Footer.js
App.js
После того, как App.js обернут компонентом GlobalState, TaskList и Footer могут получить доступ к контексту.
Ссылки
Https://academind.com/learn/react/redux-vs-context-api
«Https://blog.logrocket.com/use-hooks-and-context-not-react-and-redu большой секс
