Возможно, вы читаете это, потому что поняли, что ваше приложение для реагирования требует некоторой подготовки, но вы хотите найти лучший способ сделать это. Сверление реквизита становится разочаровывающим и беспокойным в больших приложениях, и это также не рекомендуется. Вот тут-то и появляется контекст React.
React Context — это мощная функция, которая позволяет вам передавать данные вниз по дереву компонентов без необходимости передавать свойства через каждый уровень. В этой статье мы обсудим, как использовать React Context и когда его целесообразно использовать.
Что такое React-контекст?
React Context — это способ обмена данными между компонентами в приложении React без необходимости передавать свойства через каждый уровень дерева компонентов. Вместо этого вы можете создать объект контекста и передать его любому компоненту, который в нем нуждается.
Вот пример того, как создать объект контекста:
const MyContext = React.createContext(defaultValue);
Параметр defaultValue является необязательным и может использоваться для установки значения по умолчанию для контекста, если оно не было предоставлено родительским компонентом.
Как использовать контекст реакции
Чтобы использовать объект контекста, вам нужно использовать два компонента: поставщик и потребитель.
Компонент провайдера используется для переноса любых компонентов, которым требуется доступ к контексту. Вот пример:
<MyContext.Provider value={/* some value */}>
<MyComponent />
</MyContext.Provider>
В этом примере MyContext.Provider — это компонент-поставщик, а MyComponent — это дочерний компонент, которому требуется доступ к контексту.
Чтобы получить доступ к контексту в MyComponent, вам нужно использовать потребительский компонент. Вот пример:
<MyContext.Consumer>
{value => /* render something with value */}
</MyContext.Consumer>
В этом примере MyContext.Consumer — это компонент-потребитель, а параметр value — это значение, переданное компонентом-поставщиком.
Полный пример
Любимый компонент контекста страницы:
import { createContext, useState } from “react”;
const FavoritesContext = createContext({
favorites: [],
totalFavorites: 0,
});
function itemIsFavoriteHandler(meetupId){
return userFavorites.some(meeetup=> meetup.id===meetupId)
}
const context = {
favorites: userFavorites,
totalFavorites: userFavorites.length,
itemIsFavorite: itemIsFavoriteHandler
}
return <FavoritesContext.Provider value={context}>
{props.children}
</FavoritesContext.Provider>
}
export default FavoritesContext;
В этом примере мы создаем контекст с именем «FavoritesContext», который содержит массив «фаворитов» и количество «totalFavorites». Затем мы создаем объект «context» для использования в качестве свойства значения внутри ‹FavoritesContext.Provider›. Затем мы используем ‘{props.children}’ для передачи всех дочерних элементов вниз по дереву. Таким образом, все дочерние компоненты смогут «useContext(FavoritesContext)» и получить доступ к объекту «favorites» и значению «totalFavorites».
Когда использовать React-контекст
React Context — мощный инструмент, но его не всегда нужно использовать. Вот некоторые ситуации, когда использование React Context может быть уместным:
- Когда у вас есть данные, которые должны быть разделены несколькими компонентами, не связанными напрямую друг с другом.
- Когда у вас есть данные, к которым необходимо получить доступ с помощью глубоко вложенных компонентов.
- Когда у вас есть данные, к которым необходимо получить доступ большому количеству компонентов.
В общем, вам следует избегать использования React Context для данных, доступ к которым требуется только для нескольких тесно связанных компонентов. В таких ситуациях обычно бывает достаточно передачи реквизита вниз по дереву компонентов.
Заключение
React Context — это мощная функция, упрощающая обмен данными между компонентами в приложении React. Используя объект контекста, вы можете избежать передачи свойств через каждый уровень дерева компонентов и сделать свой код более читабельным и удобным для сопровождения.
Однако важно использовать React Context разумно и только тогда, когда это уместно. Тщательно продумав, когда использовать React Context и когда использовать другие методы, такие как передача реквизитов, вы можете писать более чистый, удобный для сопровождения код и делать свои приложения React более эффективными и понятными.
