При разработке приложений с помощью React.js мы определяем состояния и передаем эти состояния компонентам, которые будем использовать, с помощью реквизита. Когда мы хотим использовать это состояние в компонентах того же уровня, мы должны переместить состояние в компонент на один уровень выше. Этот поток не может быть проблемой в простых приложениях. Однако по мере роста приложения и увеличения количества компонентов управление состоянием и обеспечение того, чтобы компоненты использовали это состояние, может стать большой проблемой.
Попробуем разобраться в этой проблеме на небольшом примере.
Глядя на пример кода. Мы передали состояние темы компоненту ModeSwitcher двумя уровнями ниже с помощью реквизита. Что бы мы сделали, если бы захотели передать это состояние компоненту на 10 уровней ниже?😱😱
Чтобы решить эту и подобные проблемы, нам нужно использовать React Context API.
Как я могу использовать Context API?
1-) Чтобы создать пригодное для использования состояние, нашим приоритетом является создание контекста.
2-) Метод React.createContext() используется для создания контекста.
3-) Этот метод принимает параметр, который мы можем установить по умолчанию для созданного нами контекста.
4-) Чтобы использовать созданный нами контекст, нам нужны два специальных компонента: Context Provider и Context Consumer.
👪Контекст.Провайдер
Поставщик контекста — это компонент, который обеспечивает доступ к компонентам, которые будут использовать созданный нами контекст, позволяет повторно отображать эти компоненты при обновлении контекста и является производным от созданного нами контекста. Этот компонент принимает именованное значение свойства, и с помощью этого свойства значения контекста передаются дочерним компонентам.
🚀Здесь следует отметить, что компонент Context Provider является родителем компонентов, которые будут использовать контекст. В противном случае компоненты не могут получить доступ к контексту.
👦Контекст.Потребитель👧
Компоненты Context Consumer делают значения контекста, отправленные с помощью Context Provider, доступными в компонентах, которые мы будем использовать.
Мы получаем функцию с параметром, называемым значением этого компонента, и мы можем получить доступ к значениям контекста в теле этой функции.
Я не считаю этот метод пригодным для компонентов, использующих более одного контекста.
Потому что для компонента, который использует более одного контекста, я думаю, что этот метод делает его сложным и неорганизованным.
Для компонентов есть еще 2 метода доступа к значениям контекста. Думаю, было бы логичнее не использовать компоненты Context Consumer.
Вы можете найти собственную документацию React здесь.
Еще увидимся. Продолжайте учиться и исследовать.🙌