Учебное пособие по React Context API с примером является сегодня ведущей темой. Контекст обеспечивает способ передачи данных через дерево компонентов без необходимости передавать реквизиты вручную на каждом уровне. В типичном приложении React данные передаются сверху вниз ( от родителя к потомку ) через реквизиты, но это может быть громоздко и не очень хорошо. типы свойств (например, предпочтение языкового стандарта, тема), которые требуются для многих компонентов в приложении. Команда React предлагает придерживаться props, если вам нужно пройти всего несколько уровней дочерних элементов, потому что это все еще гораздо менее сложный API, чем Context API .
Учебное пособие по React Context API с примером
Создайте новое приложение React, используя следующее команда.
npx create-react-app contextapicd contextapinpm start
Когда вы запускаете сервер разработки React и обнаруживаете любую ошибку, касающуюся webpack-dev-server , вы найдете решение в терминале, если он работает для вас, лучше всего, иначе вы можете использовать решение ниже.
Создайте один .env файл в корне и добавьте в него следующий код.
SKIP_PREFLIGHT_CHECK = true
Установить bootstrap 4 css также с помощью следующей команды.
yarn add bootstrap # ornpm install bootstrap
Вы создаете контекст, используя React.createContext () , который возвращает объект Context .
const {Provider, Consumer } = React.createContext ()
Затем вы создаете компонент-оболочку, который возвращает компонент Provider , и добавляете в качестве дочерних все элементы, из которых вы хотите доступ к контексту. Давайте рассмотрим пример.
Напишите следующий код внутри src >> App.js
//App.jsimport React, {Component} из 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const BtnColorContext = React.createContext ('btn btn-dark'); класс App расширяет компонент {render () {return ( ); }} function Button (props) {return ( );} класс ThemedButton расширяет компонент {static contextType = BtnColorContext; render () {return ; }} экспортировать приложение по умолчанию;
В выводе веб-страницы видно, что цвет кнопки изменен в соответствии с btn btn-info.
Объяснение React Context API
Контекст предназначен для обмена данными, которые можно рассматривать как « глобальные »для дерева компонентов React, таких как текущий аутентифицированный пользователь, тема или предпочтительные языковые настройки. В приведенном выше примере мы сделали следующее. Давайте посмотрим по очереди.
Сначала мы создаем контекст класса кнопки и назначаем btn btn-dark.
Затем внутри класса App мы изменили значение контекста на btn btn-info.
Теперь, внутри компонента App , вложенным компонентом является кнопка . Это компонент без состояния, то есть просто функциональный компонент, который получает реквизиты в качестве аргумента.
Теперь внутри этого компонента у нас есть еще один вложенный компонент под названием ThemedButton. Но мы не передали никаких свойств из компонента Button в
Итак, если мы хотим чтобы получить доступ к значению класса кнопки, который мы определили в контексте React , нам нужно написать следующий код внутри класса ThemedButton .
класс ThemedButton расширяет Component {static contextType = BtnColorContext; render () {return ; }}
Итак, мы определили static contextType и используем текущее значение контекста с помощью this.context, и теперь мы можем увидеть последнее значение контекста, которое описано в этом коде.
Теперь, если мы напишем приведенный выше код таким образом, то увидим результат в результате.
Сохраните файл и посмотрите цвет кнопки. Он изменится на темный в соответствии с определенным контекстом реакции. Это означает, что если мы изменим контекст между родительским и дочерним потоками, тогда он будет принимать последнее значение, иначе он будет принимать первое определенное значение.
React Context API
1. React.createContext
Вы можете создать контекст, используя следующий синтаксис.
const MyContext = React.createContext (defaultValue);
Создает объект контекста. Когда React визуализирует компонент, который подписывается на этот объект Context, он считывает текущее значение контекста от ближайшего соответствующего Provider над ним в дереве. Мы использовали это в нашем примере, чтобы изменить класс кнопки с dark на info.
Аргумент defaultValue используется только в том случае, если компонент не имеет соответствующего Поставщика над ним в дерево. Это очень полезно для изолированного тестирования компонентов, не оборачивая их. Обратите внимание, что передача undefined в качестве значения Provider не приводит к тому, что потребляющие компоненты используют defaultValue .
2. Context.Provider
Синтаксис следующий.
Каждый объект Context поставляется с компонентом Provider React, который позволяет потребляющим компонентам подписываться на изменения контекста. Принимает свойство value для передачи потребляющим компонентам, которые являются потомками этого Provider . Один провайдер может быть подключен ко многим потребителям. Провайдеры могут быть вложенными для переопределения значений глубже в дереве. Поскольку мы переопределили значение по умолчанию для className и получили последнее значение className в дереве компонентов.
3. Context.Consumer
Синтаксис следующий.
{value =>/* рендеринг чего-либо на основе значения контекста */ }
Это компонент React , который подписывается на изменения контекста. Это позволяет нам подписаться на контекст внутри функционального компонента. Требуется функция как ребенок.
Функция получает текущее значение контекста и возвращает узел React. Аргумент value , переданный функции, будет равен свойству value ближайшего провайдера для этого контекста выше в дереве. Если для приведенного выше контекста нет Провайдеров, аргумент value будет равен defaultValue , который был передан в createContext () .
Наконец, Учебное пособие по React Context API с примером завершено.
