Понимание контекстного API

В проекте React.js мы создаем компоненты, а затем передаем реквизиты этим компонентам. Мы можем передавать эти реквизиты на бесконечные уровни вложенных компонентов. Но если компонентов много и всем нужны разные общие реквизиты, то проект становится неуправляемым. Вот тут-то и приходит на помощь Context API. Он позволяет нам использовать свойства на глубоко вложенных уровнях, не углубляясь в детали.

Как мы его используем, сначала создаем контекст, и для этого мы используем хук createContext из реакции. Мы также можем передать ему значение по умолчанию, если захотим. Затем мы создаем компонент провайдера для этого контекста. Объект контекста имеет компонент провайдера, которому мы передаем значение контекста в качестве реквизита. Здесь я передал как значение контекста, так и функцию, которая позволит потребительским компонентам изменять значение.

Создание контекста

Любой компонент, вложенный в провайдер, будет иметь доступ к значению этого конкретного контекста. Мы даже можем вложить компонент в несколько провайдеров, и он будет потреблять значения от всех них.

Определение потребителей

Здесь компоненты Player и Match также будут использовать значения из FootballProvider и OtherProvider.

Чтобы использовать значение от провайдера, нам нужно использовать хук useContext.

Использование значения контекста

Это позволяет использовать общие значения среди глубоко вложенных компонентов без промежуточных компонентов, содержащих значения, таких как мосты. Недостатком использования Context API является то, что всякий раз, когда значение контекста изменяется, все компоненты под ним будут перерисовываться. Но было бы не совсем справедливо называть это недостатком, поскольку в некоторых сценариях такое поведение также полезно.

Suggested posts

Как избежать разрушительных последствий инсульта: уроки семейного опыта.

Как избежать разрушительных последствий инсульта: уроки семейного опыта.

Введение Инсульт — это неотложная медицинская помощь, которая может случиться с кем угодно в любое время. Это происходит, когда приток крови к части мозга нарушается, что приводит к внезапной потере функции мозга.

Революция без программирования: обеспечение процветания бизнеса с помощью Webflow, Framer, Bubble.io,

Революция без программирования: обеспечение процветания бизнеса с помощью Webflow, Framer, Bubble.io,

Отправляйтесь в захватывающее путешествие инноваций и успеха, используя неиспользованный потенциал этих удивительных платформ без кода. Позвольте мне поделиться с вами историей о Сапне, замечательной женщине-предпринимателе.

Related posts

Революция на рабочем месте: ведущие эксперты обсуждают гибридную и удаленную работу

Революция на рабочем месте: ведущие эксперты обсуждают гибридную и удаленную работу

В сегодняшнем быстро развивающемся бизнес-ландшафте концепция гибридной и удаленной работы приобрела беспрецедентный импульс. Поскольку компании продолжают приспосабливаться к меняющимся потребностям и ожиданиям своих сотрудников, эксперты из разных областей собрались вместе, чтобы обсудить преимущества, проблемы и будущее этого преобразующего способа работы.

БЕЗГРАНИЧНАЯ ЖИЗНЬ

Когда вы вырастаете, вам, как правило, говорят, что мир такой, какой он есть, и ваша жизнь состоит в том, чтобы просто жить своей жизнью внутри мира, никогда не рискуя своей жизнью, просто следовать установленному пути и умереть в конце, и стараться не слишком сильно бить стены. Но это очень ограниченная жизнь.

Сольное выступление рыжеволосой девушки

По заданию Хайдена Кэти снимает, как она мастурбирует.

Сольное выступление рыжеволосой девушки

Было уже за полночь, когда Хейден отвез Кэти обратно в общежитие колледжа после их совместного вечера. У нее был ранний урок утром, и у нее не было другой смены одежды после того, как она осталась с ним прошлой ночью.

Поиск информации о доменных именах

Отрывок из книги «Маленькие программные инструменты Sharp» Брайана П. Хогана.

Поиск информации о доменных именах

Когда вы делаете запрос на facebook.com, ваш компьютер ищет доменное имя, чтобы преобразовать это доменное имя в IP-адрес, чтобы ваш компьютер мог установить это соединение.