Документы React для Context действительно хороши, но нет ничего плохого в том, чтобы написать еще один :)
Если вы чувствуете, что в вашем приложении есть компоненты, которые просто передают реквизиты дочерним элементам, не используя их внутри компонента, то Context — это то, что вам нужно. Контекст позволяет разработчику передавать реквизиты от родительского компонента к конкретному дочернему компоненту, и компоненты между ними не должны знать об этом.
Ниже приведен простой способ создания контекста и его использования.
В приведенном выше коде в строке номер 3 я создал контекст темы со случайным цветом для оформления абзаца. Чтобы использовать цвет в компоненте NewPara, я включил static contextType в строку 28, что позволяет компоненту получать доступ к контексту, используя this.context,строка номер 30.
Таким образом, вы можете использовать контекст на любом уровне дочерних компонентов, не передавая их вниз по дереву компонентов.
Здесь следует отметить интересный момент: используя приведенный выше базовый код, вы не можете использовать контекст, определенный в файле родительского компонента, в дочернем компоненте с помощью экспорта/импорта, но вы можете сделать это, если контекст определен в файле дочернего компонента.
В приведенных выше файлах контекст определен в файле родительского компонента, поэтому его импорт в дочерний файл и попытка использования контекста приведут к ошибке во время выполнения. Однако приведенный ниже код будет работать нормально.
Таким образом, при работе с несколькими файлами, что обычно бывает, лучше использовать отдельный файл, который будет иметь только объявление контекста, и любой файл, требующий контекста, может его импортировать.
До сих пор я использовал значение контекста по умолчанию, которое определяется во время создания контекста. Чтобы изменить значение контекста при передаче его потомкам, нам нужно использовать Provider. Используя Provider и this.context, мы можем использовать функцию контекста во всех компонентах на основе классов. Ниже два файла компонентов делают то же самое.
Итак, в приведенном выше примере у меня есть два компонента на основе классов, которые используют контекст, определенный внутри «context.js». Используя Provider, я изменил значение по умолчанию на «#80ded4», и поэтому, когда компонент заголовка использует контекст, он получает ближайшее значение контекста, определенное в родительском компоненте. .
Что, если у меня есть функциональный компонент, где я хочу использовать контекст? В таких случаях нам нужно использовать Consumer. Используя Consumer, мы подписываемся на значение контекста, которое можно использовать в функциональных компонентах. Давайте посмотрим на приведенный ниже код. Сохраняя «context.js» и «App.js» как есть, я добавляю функциональный компонент ShowParagraph к компоненту ShowText.
Чтобы использовать контекст в функциональном компоненте, элементы рендеринга помещаются внутрь Consumer. При рендеринге контекст присваивается параметру в строке 9 в ShowParagraph, который используется внутри элемента.
Надеюсь, мне удалось прояснить концепцию использования контекста в одном файле и нескольких файлах, а также разницу в подходе на основе классов и функциональном подходе.
Позвольте мне знать, если это помогает.
