0
Правильное использование React Context API
Context API — это современный способ управления состоянием в React. Предназначен для совместного использования части данных между многими компонентами React без детализации. В этой статье мы разберем недостатки контекстного API, фабрику логических оберток и действий.
Недостатки контекстного API
Давайте рассмотрим основные недостатки контекстного API:
Повторяющиеся задачи
Почти каждый раз, когда мы используем Context API во внешнем приложении, приходится сталкиваться с тем же самым: мы создаем AuthContext, как показано ниже:
Затем используем состояние входа в любом месте нашего приложения:
Представьте себе, что в вашем приложении 60 компонентов, защищенных аутентификацией. Ваша кодовая база будет в беспорядке!
Каковы проблемы с этим подходом?
- Грязный код
- Постоянное повторение большого количества кода
Легко испортить вашу кодовую базу
Предположим, у вас есть контекст и прикрепленный к нему компонент ContextProvider.
В том же компоненте, где вы предоставили контекст, вы хотите использовать контекст для кнопки, как показано в примере ниже:
Вы хотели сделать что-то действительно простое, но в итоге испортили свою кодовую базу. В качестве обходного пути вы можете сделать что-то вроде этого:
Но теперь мы снова в зоне повторяющихся задач.
Фабрики компонентов спешат на помощь
Фабрика компонентов — это функция, которая возвращает функциональный компонент React. () => () => <div></div>Мы можем использовать фабрики компонентов для очистки нашей кодовой базы и создания чистой структуры кода. Сегодня я расскажу вам о двух фабриках, экономящих время и жизнь: контекстной логической обертке и фабрике контекстных действий.
Логические оболочки
Логические оболочки решают проблемы условного рендеринга, которые мы видели вначале, без необходимости портить вашу кодовую базу. Вы создаете их с помощью этой функции:
Тогда нашу прежнюю проблему можно решить всего за несколько строк кода:
Вы можете сэкономить массу времени, используя эту фабрику компонентов для каждого создаваемого вами контекста.
Контекстные действия
Контекстные действия представляют собой компоненты, допускающие многократное использование, из-за способа их создания.
Теперь мы можем создать это ComponentB всего лишь с помощью одной строки кода!
Теперь вы должны спросить себя: зачем вам добавлять свойство className в контекстное действие? Причина проста: возможность повторного использования. Лучший способ продемонстрировать это на примере:
