Последние две недели я потратил на изучение React. Это означало изучение того, как использовать компоненты для разработки внешнего интерфейса приложений. Компоненты позволяют разбить интерфейсный код на повторно используемые фрагменты, каждый из которых специализируется на том, что он делает. Каждый из них отвечает за одно дело.
Компоненты, работающие вместе в приложении, требуют передачи данных через пропсы. Данные передаются сверху вниз (от родительских к дочерним компонентам), и это требует некоторого размышления, чтобы решить, кто какие данные хранит и как мы передаем их туда, куда они должны идти?
В более крупных приложениях React со множеством вложенных компонентов и сложной древовидной связью между ними может быть сложно отслеживать передачу данных через свойства. Свойства могут быть переданы по длинной цепочке, прежде чем они потребуются, или многие компоненты более низкого уровня могут нуждаться в одних и тех же свойствах. Это может привести к тому, что многие компоненты будут удерживать реквизиты, которые они не используют и только передают вниз. Хм, это звучит как накопленная бесполезная информация…
Давайте вырежем среднего человека! Что, если бы существовал способ напрямую отправлять реквизиты оттуда, где они находятся, компонентам, которым они нужны. «Контекст» в React позволяет именно это. Давайте уменьшим наш багаж контекстом!
Контекст предоставляет способ передачи данных через дерево компонентов без необходимости вручную передавать реквизиты на каждом уровне. — Реагировать Документы
Когда контекст может быть полезен:
- В приложениях React со многими компонентами, вложенными друг в друга, что приводит к необходимости передачи реквизитов на многие уровни.
- Когда нескольким компонентам требуются одни и те же реквизиты, такие как текущий аутентифицированный пользователь, тема или предпочитаемый язык
Как использовать контекст:
Шаг 1. Создайте контекст
Контекст обычно создается в отдельном файле js, а затем импортируется при необходимости. Значение по умолчанию может быть дополнительно установлено при создании контекста.
const NewContext=React.createContext()
const AnotherContext=React.createContext('defaultValue')
Шаг 2. Укажите значение контекста
Оберните компонент, в который вы хотите передать реквизит, с помощью Context.Provider. Обратите внимание, что важно, где вы предоставляете контекст, потому что только компоненты-потомки смогут его «потребить». Затем установите значение для установки данных:
<NewContext.Provider value="passedData"> <SomeChildComponent> </NewContext.Provider>
Шаг 3. Использование значения контекста
Теперь в SomeChildComponent и любых дочерних элементах этого компонента вы можете «потреблять» контекст. Существует два способа доступа к данным низкоуровневого компонента:
Во-первых, Context.Consumer передается функция как его дочерний элемент, который получит значение контекста в качестве своего параметра. Затем может использовать значение по мере необходимости.
<NewContext.Consumer value="passedData">
{
(passedData) => <p> {passedData}</p>
}
</NewContext.Consumer>
Для второго метода контекст должен быть установлен (внутри или вне класса компонента) с помощью contextType, а затем доступен в классе компонента с помощью this.context. Хотя это может сделать код более чистым, недостатком является то, что это работает только с компонентами класса, и компонент сможет читать только один контекст.
export class SomeComponent extends React.Component {
//static contextType=NewContext
render() {
return ({this.context})
}
}
SomeComponent.contextType=NewContext
Примечание: несмотря на то, что установка ваших реквизитов в основном как глобальная переменная через контекст может упростить доступ к данным, будьте осторожны с их использованием. Это может сделать ваши низкоуровневые компоненты более гибкими, чем это необходимо, и может поставить под угрозу управление потоком данных.
