Если вы работали над React, то могли сталкиваться с ситуациями, когда вам приходилось передавать реквизиты из компонента прародителя в компонент внуков. Ну, это обычное дело в React, и отношения могут быть еще глубже. React сам по себе является беспристрастным фреймворком, который дает нам несколько подходов к решению этой проблемы, но React из коробки поставляется с Context API после React v16.3, и с ним действительно легко разобраться.
До того, как был представлен Context API, мы использовали такие концепции, как сверление реквизита, где мы передавали геттер и сеттер хука useState дочернему компоненту и компонентам-внукам, а затем соответствующим образом обновляли. Вот небольшой пример, в котором вы можете увидеть, как состояния user и setUser передаются дочерним компонентам, то есть страницам UserPage и Greetings. Такой подход сам по себе не хорош, и вы можете следить за статьей Винтовое бурение? React Context API на помощь от Bicky Tamang, где он подробно объясняет.
Предполагая, что вы уже прочитали статью от Bicky, мы можем использовать контекстный API и решить проблему сверления пропеллеров, которая реализована в следующем блоке кода.
Но это подняло вопрос об абстракции данных; доступ к данным через подписанных поставщиков вместе с деструктурированием для извлечения определенного фрагмента данных. Это кажется немного не идеальным, если вы не собирались публиковать свои данные для всех компонентов, подписанных на провайдера. Таким образом, мы можем решить эти проблемы, определив собственный хук вместо использования useContext.. Мы можем использовать пользовательский хук со слоями абстракции, как показано в блоке кода ниже.
Как видите, мы создали кастомный хук useUserHook, который использует только useContext, а затем возвращает только необходимые данные. Окончательный код с кастомным хуком выглядит примерно так.
Напомним, что введение пользовательского хука в Context API может решить следующие проблемы.
- Абстрагирует данные от компонентов и предотвращает нежелательный доступ к данным
- Представляет ряд возможностей, таких как перехват и простая отладка при использовании
Context API
Несмотря на решение проблем, этот подход также помогает сделать наш код чище и проще в обслуживании. Надеюсь, вы поняли мою точку зрения на абстракцию данных в React с использованием Context API. Увидимся в следующей статье, а пока Happy Coding 👨🏻💻.
