React Context API — отличный способ передать состояние компонентам на разных уровнях вашего приложения React без необходимости использования инструментов управления состоянием, таких как Redux, Zustand или других.

Действительно ли моему приложению React нужен контекст?

Контекстный API React обычно используется, когда доступ к данным должен осуществляться многими компонентами на разных уровнях вложенности, согласно документам 📃📄.

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

Компонентная композиция

Например, если у вас есть компонент Page, который передает реквизиты user и avatarSize вниз по многим уровням, чтобы два нижних компонента, Link и Avatar, могли иметь к ним доступ, вы можете вместо этого передать сами компоненты Link и Avatar как одну упакованную часть. кода, чтобы промежуточным компонентам не нужно было знать о реквизитах user и avatarSize, как показано ниже:

const userLink = (
‹Link href={user.permalink}›
‹Avatar user={user} size={props.avatarSize} /›
‹/Link›
);

Теперь userLink можно передавать вниз по многим уровням компонентов, используя один единственный параметр, userLink, внутри которого инкапсулирована вся остальная информация (компонент Link, компонент Avatar, информация о пользователе и avatarSize). 🧐😃

Если у вас действительно есть много компонентов на разных уровнях вложенности, которым требуется доступ к одному и тому же состоянию, то React Context может вам подойти. Вы спросите, это просто? Я бы сказал, что это относительно просто, да.

Как использовать контекстный API React

Все, что вам нужно сделать, чтобы создать и использовать контекст, это:

  1. Создайте каталог рядом с каталогом компонентов, который называется contexts, и внутри него:
  2. Создайте новый файл с именем MyContext.js.
  3. Импорт { createContext } из «реакции»
  4. Создайте контекст, например: export const MyContext = createContext(defaultValue);
  5. Найдите родительский компонент, который имеет доступ к состоянию, которое будет использовать этот контекст, и визуализирует все компоненты, которые будут использовать этот контекст, и в этом файле:
  6. Импорт {MyContext} из ‘../contexts/MyContext’
  7. Оберните дочерние компоненты, которым требуется доступ к этому контексту, внутри компонента Provider MyContext и дайте провайдеру свойство values, содержащее объект со значениями состояния, которые вы хотите, чтобы ваш контекст содержал, например:
  8. ‹MyContext.Provider values={{ userName, setUserName }}› {userInfoReady ? ‹Профиль пользователя /› : ‹Профиль по умолчанию /›}‹/MyContext.Provider›
  9. Перейдите к файлу компонента UserProfile
  10. Импортируйте сюда две вещи: 1) импортируйте {useContext} из «реакции» и 2) импортируйте {MyContext} из «../../contexts/MyContext»;
  11. Отсюда ваш компонент UserProfile может получить доступ к любой части состояния в MyContext, например:
  12. const {userName, setUserName} = useContext (MyContext);

Поздравляем, вы только что создали контекст и использовали его провайдера для передачи состояния через ваше приложение. Теперь вы можете импортировать это состояние (контекст) в свое приложение и получать к нему доступ на разных уровнях без необходимости сверления! 🎉 🥳 🎊

Хотите еще глубже погрузиться в React Context? Ознакомьтесь с документами здесь: https://reactjs.org/docs/context.html.

P.S. — Вам понравилась эта статья или она оказалась полезной? Подумайте о том, чтобы дать мне 5 (или 50) хлопков!

Об авторе

Джейсон Визнер — 33-летний разработчик интерфейса в DisneyStreaming/Hulu. Он является профессиональным инженером-программистом с 2020 года и работал над другими проектами для ведущих компаний, таких как AAA и других.

Портфолио: https://jason-wiesner.herokuapp.com

LinkedIn: https://linkedin.com/in/wiesnerjason

Github: https://github.com/jasonwiesner