Что такое React Consumer компонент и как он работает с контекстом?

Определение

Consumer — это React-компонент, который подписывается на изменения контекста. Он позволяет тебе получить доступ к значениям контекста внутри твоего дерева компонентов.

Как это работает

Consumer требует функцию в качестве дочернего элемента (часто называется паттерном "render prop"). Эта функция:

• Получает текущее значение контекста в качестве аргумента
• Возвращает React-узел для рендеринга

Значение, переданное этой функции, равно свойству value ближайшего Provider для этого контекста выше в дереве компонентов.

Базовый пример

Ключевые моменты

• Компонент Consumer автоматически подписывается на любые обновления от своего родительского Provider
• Он получает доступ к самому свежему значению контекста в иерархии компонентов
• Паттерн с функцией даёт гибкость в том, как ты рендеришь контент на основе данных контекста
• Это особенно полезно, когда тебе нужны значения контекста в классовых компонентах или когда использование хуков не подходит