Передача данных через пропсы вниз по иерархии компонентов, немного многословный, но простой механизм. Всегда видно откуда пришли данные и как они попали внутрь, а компоненты легко переиспользовать, так как они зависят только от входных данных. Но бывают ситуации, когда передача пропсов не вписывается в то, как работает код.
Возьмем для примера текущего пользователя. Часто данные пользователя нужны одновременно в разных частях страницы, причем в очень глубоких компонентах. Для этого придется передавать пользователя буквально по всей иерархии даже там где он не нужен компоненту. Единственная цель такой передачи - прокинуть данные до места назначения пройдя по пути все промежуточные компоненты. Получается, что множество компонентов никак не используют пользователя, они просто передают их дальше по цепочке. Данные пользователя, в нашей ситуации, глобальные. Они нужны сразу многим компонентам на разных уровнях иерархии. Для таких задач в React существует обходной путь.
Context API - механизм, позволяющий сделать глобальные данные доступными из любого компонента напрямую, без прокидывания пропсов. Его использование сводится к трём шагам:
Создание контекста
// В параметр передается значение по умолчанию
// Здесь передаем пустой объект, потому что пользователя еще нет, но он будет (и будет объектом)
// Контекст может хранить только одно значение
// Имя контекста выбирается исходя из того, какие внутри хранятся данные
const UserContext = React.createContext({});
Передача данных в контекст. Работает так: Оборачиваем нужные компоненты в компонент контекста <UserContext.Provider>
и передаем туда нужные данные в проп value
// Контекст будет доступен только внутри тех компонентов, которые он оборачивает
// currentUser - данные текущего пользователя
<UserContext.Provider value={currentUser}>
<App />
</UserContext.Provider>
Получение данных из контекста в нужном месте
import UserContext from '...';
// Любой компонент внутри блока <UserContext.Provider>
class InnerComponent extends React.Component {
// Определяем тип контекста
static contextType = UserContext;
render() {
// Получаем доступ к контексту через this.context
return <Profile user={this.context} />;
}
}
В отличии от пропсов, по умолчанию, изменение данных в контексте не приводит к перерисовке. Идеально, когда данные в контексте используются только для чтения. Изменяемые данные лучше хранить внутри состояния компонентов. Однако, если очень нужно, то реагировать на изменение контекста возможно, об этом подробнее можно прочитать в документации. В прикладном коде такая возможность используется редко, но на ней основаны разнообразные библиотеки.
Вам ответят команда поддержки Хекслета или другие студенты.
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт