При разработке приложений с помощью 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 здесь.

Еще увидимся. Продолжайте учиться и исследовать.🙌