Введение
Техническое определение React Context API (RCA) — это способ создания глобальной переменной, которая будет передаваться в приложении. Что это на самом деле означает? Думайте о RCA как о круговороте воды. На рисунке выше вода не может перейти из одного озера в другое без предварительного испарения. Затем водяной пар должен конденсироваться в облака и разноситься ветром. Наконец, облако падает на второе озеро, завершая цикл.
Как вы можете заметить, я лучше всего понимаю концепции с помощью аналогий и наглядных пособий. Вода эквивалентна данным, которые необходимо передавать в приложении. Например, на Amazon, когда кто-то нажимает кнопку «добавить в корзину», выбранный продукт должен «испариться» или сохраниться в «облаке» или на уровне данных. Затем «ветер» или пользователь переходит на «второе озеро» или страницу оформления заказа, где информация «осаживается» или отображается.
Что такое опорное бурение?
Представьте, что в приведенной выше аналогии вода в первом озере должна была вернуться вверх по течению к своему первоначальному источнику, чтобы затем испариться. Это было бы очень неэффективно и было бы пустой тратой времени. Это то, что мы называем опорным бурением. Очень часто, если мы не используем RCA или что-то подобное, нам нужно передать свойства или данные по цепочке компонентов, чтобы они достигли назначенного компонента. Это может привести к увеличению времени загрузки страницы и потере данных.
Как выглядит код?
Давайте вернемся к приведенному выше примеру Amazon.
Это главная страница с выбором товара.
Когда пользователь нажимает кнопку «Добавить в корзину», данные отправляются в Product.js.
Здесь информация о продукте вставляется вместе с кодом в функцию возврата. Используя useStateValue, dispatch и addToBasket, данные теперь можно отправлять на уровень данных для сохранения. Dispatch можно использовать как для извлечения, так и для добавления на уровень данных.
Далее мы рассмотрим уровень данных, который находится в файле с именем reducer.js.
Обратите внимание, что и в Product.js, и в reducer.js есть функция «ADD_TO_BASKET». Это связывает домашнюю страницу со слоем данных и позволяет хранить выбранный продукт в массиве, называемом корзиной.
Наконец, был создан CheckoutProduct.js для отображения продукта на странице оформления заказа. Он также содержит useStateValue и диспетчеризацию, позволяющие извлекать данные из уровня данных.
Заключение
Надеемся, что аналогия, представленная в этой статье, поможет прояснить, что может делать React Context API. Это простой, но мощный инструмент, который позволяет разработчику создавать более эффективные приложения.