Если вы знакомы с React, то вы знаете и легкость, с которой он позволяет создавать и отображать сеть компонентов, с которыми взаимодействует пользователь, и трудности, связанные с правильным подключением и передачей данных по всем этим компонентам. Когда вы добавляете вложенные компоненты в свое приложение, оно становится загроможденным «реквизитами» и функциями обработчика, которые передают данные вверх и вниз по уровням компонентов.

Взаимодействие между компонентами необходимо для приложений React, и было разработано несколько инструментов, чтобы упростить управление этим. Redux - популярная библиотека, которая пытается добиться этого, и недавно React добавил свой собственный API, чтобы помочь с этим, React Context. Я не собираюсь вдаваться в подробности, как он сравнивается с другими библиотеками управления данными, но я покажу вам, как его настроить, чтобы вы могли протестировать его на себе.

Контекст работает с использованием компонента ‹Provider›, который можно обернуть вокруг верхних уровней дерева компонентов приложения, и компонента ‹Consumer›, который вы оборачиваете вокруг вложенных компонентов, чтобы они получали доступ к данным, передаваемым поставщику. Таким образом, приложение может обойти «детализацию» данных по компонентам, которые не используют эти данные. Итак, для начала вам нужно создать новый объект контекста с помощью библиотеки React.

Я предлагаю выделить этот код в отдельный файл контекста, а затем экспортировать нужные нам части. Объект контекста содержит компоненты Provider и Consumer, которые нам нужно разместить внутри нашего приложения. Вы можете назначить эти свойства их собственным переменным и экспортировать их.

Теперь, когда у нас есть этот файл, доставляющий нужные нам части, мы можем переключиться на верхнюю часть нашего приложения, чтобы импортировать Provider. Обычно вы хотите обернуть Provider как можно выше, чтобы он охватывал все компоненты, которые могут захотеть подключиться к нему как Consumer.

Теперь у нас есть «очень важные данные», которые нам нужно глубоко вложить в наше приложение, чтобы достичь определенного компонента. Мы не хотим делиться этой информацией с NotImportantComponent, потому что, ну, это недостаточно важно. Поэтому вместо того, чтобы передавать данные этому компоненту в качестве свойств, мы передадим их нашему поставщику.

Теперь мы можем перемещаться по дереву компонентов настолько далеко, насколько нам необходимо, и предоставлять желаемому компоненту доступ к нашему контексту через теги Consumer. Итак, давайте пройдемся по нашему приложению и найдем очень важный компонент.

Хорошо, теперь, когда мы исследовали произвольное количество компонентов этого очень реального и очень функционального приложения, пришло время импортировать этого потребителя, которого мы экспортировали ранее, чтобы мы могли связать его с этим компонентом.

Внутри потребительских тегов мы помещаем функцию, которая принимает контекст в качестве аргумента и возвращает любой JSX, который мы хотим. Внутри JSX мы можем свободно получить доступ к контексту, который содержит все, что мы передали ему в Provider. В этом случае я передал только строку, но, как и в случае передачи реквизита, я мог бы так же легко передать функции или объекты или все, что нужно для совместного использования.

И это краткий обзор того, как подключить ваше приложение и его компоненты к контекстному API. В следующий раз, когда вы будете работать над приложением React, которое имеет много промежуточных компонентов, подумайте об использовании этого, чтобы избежать перераспределения данных с ненужными частями. Я рекомендую вам попробовать это самостоятельно и обратиться к документации по нему здесь.