Usecontext react что это
Контекст
Контекст позволяет передавать данные через дерево компонентов без необходимости передавать пропсы на промежуточных уровнях.
В типичном React-приложении данные передаются сверху вниз (от родителя к дочернему компоненту) с помощью пропсов. Однако, подобный способ использования может быть чересчур громоздким для некоторых типов пропсов (например, выбранный язык, UI-тема), которые необходимо передавать во многие компоненты в приложении. Контекст предоставляет способ делиться такими данными между компонентами без необходимости явно передавать пропсы через каждый уровень дерева.
Когда использовать контекст
Контекст позволяет избежать передачи пропсов в промежуточные компоненты:
Перед тем, как вы начнёте использовать контекст
Обычно контекст используется, если необходимо обеспечить доступ данных во многих компонентах на разных уровнях вложенности. По возможности не используйте его, так как это усложняет повторное использование компонентов.
Если вы хотите избавиться от передачи некоторых пропсов на множество уровней вниз, обычно композиция компонентов является более простым решением, чем контекст.
Инверсия управления может сделать ваш код чище во многих случаях, уменьшая количество пропсов, которые вы должны передавать через ваше приложение, и давая больше контроля корневым компонентам. Однако, такое решение не всегда подходит. Перемещая больше сложной логики вверх по дереву, вы перегружаете вышестоящие компоненты.
Вы не ограничены в передаче строго одного компонента. Вы можете передать несколько дочерних компонентов или, даже, создать для них разные «слоты», как показано здесь:
Этого паттерна достаточно для большинства случаев, когда вам необходимо отделить дочерний компонент от его промежуточных родителей. Вы можете пойти ещё дальше, используя рендер-пропсы, если дочерним компонентам необходимо взаимодействовать с родителем перед рендером.
Однако, иногда одни и те же данные должны быть доступны во многих компонентах на разных уровнях дерева и вложенности. Контекст позволяет распространить эти данные и их изменения на все компоненты ниже по дереву. Управление текущим языком, UI темой или кешем данных — это пример тех случаев, когда реализация с помощью контекста будет проще использования альтернативных подходов.
Каждый объект Context используется вместе с Provider компонентом, который позволяет дочерним компонентам, использующим этот контекст, подписаться на его изменения.
Способ, по которому определяются изменения, может вызвать проблемы при передаче объекта в value : смотрите Предостережения.
Вы можете подписаться только на один контекст, используя этот API. В случае, если вам необходимо использовать больше одного, смотрите Использование нескольких контекстов.
Consumer — это React-компонент, который подписывается на изменения контекста. В свою очередь, использование этого компонента позволяет вам подписаться на контекст в функциональном компоненте.
Подробнее про паттерн «функция как дочерний компонент» можно узнать на странице Рендер-пропсы.
К примеру, следующий компонент будет отображаться под именем MyDisplayName в DevTools:
Более сложный пример динамических значений для UI-темы:
theme-context.js
themed-button.js
app.js
Изменение контекста из вложенного компонента
Довольно часто необходимо изменить контекст из компонента, который находится где-то глубоко в дереве компонентов. В этом случае вы можете добавить в контекст функцию, которая позволит потребителям изменить значение этого контекста:
theme-context.js
theme-toggler-button.js
app.js
Использование нескольких контекстов
Чтобы последующие рендеры (связанные с контекстом) были быстрыми, React делает каждого потребителя контекста отдельным компонентом в дереве.
Если два или более значений контекста часто используются вместе, возможно, вам стоит рассмотреть создание отдельного компонента, который будет передавать оба значения дочерним компонентам с помощью паттерна «рендер-пропс».
Один из вариантов решения этой проблемы — хранение этого объекта в состоянии родительского компонента:
В прошлом React имел только экспериментальный API контекста. Старый API будет поддерживаться во всех 16.x релизах, но использующие его приложения должны перейти на новую версию. Устаревший API будет удалён в будущем крупном релизе React. Вы можете прочитать документацию устаревшего контекста здесь.
Введение в React Hooks
Мотивация стоящая за Hooks
Хотя компоненто-ориентированная архитектура позволяет нам повторно использовать view в нашем приложении, одна из самых больших проблем, с которыми сталкивается разработчик, заключается в том, как повторно использовать логику, находящуюся в state, между компонентами. Когда у нас есть компоненты, которые имеют сходную логику состояния, нет хороших решений для переиспользования компонентов, и это иногда может привести к дублированию логики в конструкторе и методах жизненного цикла.
Чтобы решить эту проблему, обычно используют:
Hooks нацелены на решение всех этих проблем, позволяя вам писать функциональные компоненты, которые имеют доступ к state, context, методам жизненного цикла, ref и т. д., без написания классов.
Hooks в Alpha
Прежде чем мы погрузимся, важно упомянуть, что разработка Hooks API еще не завершена.
Кроме того, официальная документация очень хороша, и мы рекомендуем ее прочитать еще и потому, что в ней расширенно описана мотивация, стоящая за введением Hooks.
UPD Оригинальная статья, перевод которой вы читаете была написана еще в то время, когда это API было в alpha тестировании, на данный момент React Hooks официально готовы к использованию. Необратимые изменения, привнесенные в релиз (по сравнению с альфой) можно посмотреть внизу статьи или в релизных заметках.
Как Hooks соотносятся с классами
Напомним, что при написании классов компонентов нам часто необходимо:
С помощью React Hooks мы можем воспроизвести аналогичное поведение в функциональных компонентах:
Для использования Hooks необходима последняя версия React
Вы можете начать работу с Hooks прямо сейчас, сменив значение react и react-dom в вашем package.json на «next».
Пример useState() Hook
State является неотъемлемой частью React. Он позволяет нам объявлять переменные, которые содержат данные, которые, в свою очередь, будут использоваться в нашем приложении. С помощью классов state обычно определяется следующим образом:
В вышеприведенном блоке кода, мы начинаем с импорта useState из React. UseState — это новый способ использования возможностей, которые раньше могло предложить this.state.
Затем обратите внимание, что этот компонент является функцией, а не классом. Интересно!
Чтение и запись state
Внутри этой функции мы вызываем useState для создания переменной в state:
useState используется для объявления переменной state и может быть инициализирован любым типом значения (в отличие от state в классах, который должен быть объектом).
Затем мы применяем их как обработчики событий на кнопках во view:
React отслеживает state
Когда нажимается кнопка «On», Вызывается функция setOn, вызывающая setLight(1). Вызов setLight(1) обновляет значение light для следующего рендера. Это может показаться немного волшебным, но React отслеживает значение этой переменной и будет передавать новое значение, когда происходит ре-рендер этого компонента.
Затем мы используем текущее состояние (light), чтобы определить, должна ли лампа быть включена или нет. То есть, мы устанавливаем цвет заливки SVG в зависимости от значения light. Если light равен 0 (выкл.), То для fillColor установлено значение # 000000 (а если равен 1 (включено), fillColor устанавливается на # ffbb73).
Multiple States
Хотя мы не делаем этого в приведенном выше примере, вы можете создать несколько state, вызвав useState более одного раза. Например:
ПРИМЕЧАНИЕ.
Существуют некоторые ограничения при использовании hooks, о которых вы должны знать. Самое главное, вы должны вызывать hooks только на верхнем уровне вашей функции. См. «Правила hooks» для получения дополнительной информации.
Пример useEffect() Hook
Используя useEffect() Hook, React знает, что вы хотите выполнить определенное действие после рендеринга.
Давайте посмотрим на пример ниже. Мы будем использовать useEffect() для вызова API и получения ответа.
В этом примере кода используются как useState, так и useEffect, и это потому, что мы хотим записать результат вызова API в state.
Получение данных и обновления state
Чтобы «использовать эффект», нам нужно поместить наш action в функцию useEffect, то есть мы передаем «action» эффект как анонимную функцию, как первый аргумент useEffect.
В примере выше мы обращаемся к API, которое возвращает список имен. Когда возвращается response, мы конвертируем его в JSON, а затем используем setNames(data) для установки state.
Проблемы с производительностью при использовании Effects
Однако стоит сказать еще кое-что об использовании useEffect.
Первое, о чем нужно подумать, это то, что по умолчанию наш useEffect будет вызываться на каждом рендере! Хорошей новостью является то, что нам не нужно беспокоиться об устаревших данных, но плохая новость заключается в том, что мы, вероятно, не хотим делать HTTP-запрос для каждого рендеринга (как в этом случае).
В приведенном выше примере кода обратите внимание, что мы передаем пустой массив в качестве второго аргумента. Это мы говорим React, что мы хотим только назвать этот effect при монтировании компонента.
Кроме того, как и функция useState, useEffect позволяет использовать несколько экземпляров, что означает, что вы можете иметь несколько функций useEffect.
Пример useContext() Hook
Контекст в React- это способ для дочернего компонента получить доступ к значению в родительском компоненте.
Чтобы понять необходимость context: при создании React приложения вам часто нужно передавать значения с верха вашего дерева React вниз. Не используя context, вы передаете props через компоненты, которым не обязательно о них знать.
Передача props вниз по дереву «несвязанных» компонентов ласково называется props drilling.
React Context решает проблему props drilling, позволяя вам делиться значениями через дерево компонентов, с любым компонентом, который запрашивает эти значения.
useContext() упрощает использование context
С useContext Hook использование context стает проще, чем когда-либо.
Функция useContext() принимает объект сontext, который изначально возвращается из React.createContext(), а затем возвращает текущее значение контекста. Давайте посмотрим на пример ниже.
В приведенном выше коде context JediContext создается с использованием React.createContext().
Мы используем JediContext.Provider в нашем App компоненте и устанавливаем там значение «Luke». Это означает, что любой компонент, которому нужно получить доступ к context теперь сможет считать это значение.
Чтобы прочитать это значение в функции Display(), мы вызываем useContext, передавая аргумент JediContext.
Затем мы передаем объект context, который мы получили из React.createContext, и он автоматически выводит значение. Когда значение провайдера будет обновляться, этот Hook автоматически сработает с последним значением context.
Получение ссылки на context в более крупном приложении
Выше мы создали JediContext в рамках обоих компонентов, но в более крупном приложении Display и App будут находиться в разных файлах. Поэтому, если у вас похожая ситуация, вам может быть интересно: «Как мы получаем ссылку на JediContext между файлами?»
Ответ заключается в том, что вам нужно создать новый файл, который экспортирует JediContext.
Например, у вас может быть файл context.js, который содержит что-то вроде этого:
и потом в App.js (и Display.js) вы должны написать:
Пример useRef() Hook
useRef() и формы с input
Давайте посмотрим пример использования useRef() hook.
В приведенном выше примере мы используем useRef() в сочетании с useState(), чтобы отрендерить значение input в тег p.
Ref создается в переменной nameRef. Затем переменную nameRef можно использовать в input, задав как ref. По существу, это означает, что теперь содержимое поля ввода будет доступно через ref.
Кнопка отправки в коде имеет обработчик события onClick, называемый submitButton. Функция submitButton вызывает setName (созданный через useState).
Как мы уже делали с использованием hookState, setName будет использоваться для установки state name. Чтобы извлечь имя из тега input, мы читаем значение nameRef.current.value.
Еще одно замечание относительно useRef заключается в том, что его можно использовать больше, чем атрибут ref.
Использование пользовательских Hooks
Одной из самых крутых особенностей Hooks является то, что вы можете легко делиться логикой между несколькими компонентами, создавая собственный Hook.
В приведенном ниже примере мы создадим пользовательский setCounter() Hook, который позволяет нам отслеживать состояние и предоставлять настраиваемые функции обновления state!
В приведенном выше блоке кода мы создаем функцию useCounter, которая хранит логику нашего hook.
Обратите внимание, что useCounter может использовать другие Hooks! Начнем с создания нового состояния Hook через useState.
Затем мы определяем две вспомогательные функции: increment и decrement, которые вызывают setCount и соответственно корректируют текущий count.
Наконец, мы возвращаем ссылки, необходимые для взаимодействия с нашим Hook.
В: Что происходит, возврат массива с объектом?
О: Ну, как и большинство вещей в Hooks, соглашения API еще не завершены. Но то, что мы делаем здесь, возвращает массив, где:
Тем не менее, вы можете вернуть все, что захотите, из своего кастомного Hook.
В приведенном выше примере мы используем increment и decrement как обработчики onClick, в нашем view. Когда пользователь нажимает кнопки, счетчик обновляется и повторно отображается (как myCount) во view.
Написание тестов для React Hooks
Чтобы написать тесты для hooks, мы будем использовать библиотеку для тестирования react-testing-library.
С тестированием hooks еще не все понятно. В настоящее время вы не можете протестировать hook изолированно. Вместо этого вам нужно прикрепить свой hook к компоненту и протестировать этот компонент.
Итак, ниже мы будем писать тесты для наших Hooks, взаимодействуя с нашими компонентами, а не с Hooks напрямую. Хорошая новость заключается в том, что наши тесты будут выглядеть как обычные тесты React.
Тестирование useState() Hook
Давайте посмотрим пример написания тестов для useState Hook. В приведенном выше уроке мы тестируем больше вариаций используемого выше примера useState. Мы будем писать тесты, чтобы убедиться, что нажатие кнопки «Off» Устанавливает состояние в 0 и нажатие кнопки «On» Устанавливает состояние в 1.
В вышеприведенном блоке кода мы начинаем с импорта некоторых хелперов из react-testing-library и тестируемого компонента.
Тест проверяет, что, если нажимается onButton, значение state устанавливается в 1, а при нажатии на offButton state равен 1.
Тестирование useEffect() Hook
В этом примере мы будем писать тесты, чтобы добавить товар в корзину, используя useEffect Hook. Количество элементов также сохраняется в localStorage. Файл index.js в CodeSandbox ниже содержит фактическую логику, используемую для добавления элементов в корзину.
Мы будем писать тесты, чтобы убедиться, что обновление количества элементов корзины также отражено в localStorage, и даже если страница перезагрузилась, количество элементов корзины все еще остается прежним.
В функции, подтверждающей прохождение теста мы сначала устанавливаем cartItem в localStorage равным 0, что означает, что количество элементов корзины равно 0. Затем мы получаем как container так и rerender из компонента App через деструктурирование. Rerender позволяет нам имитировать перезагрузку страницы.
Затем мы получаем ссылки на кнопки и тег p, который отображает текущее значение корзины и устанавливает их в переменные.
Как только это будет сделано, тест затем имитирует щелчок на addButton и проверяет, является ли текущий счетчик корзины равным 1 и перезагружает страницу, после чего, если он проверяет, установлено ли значение localStorage, cartItem, равным 1. Затем он моделирует нажатие на resetButton и проверяет, установлено ли текущее количество элементов корзины равным 0.
Тестирование useRef () Hook
В этом примере мы будем тестировать useRef Hook, и мы будем использовать исходный пример useRef, приведенный выше в качестве основы для теста. UseRef используется для получения значения из поля ввода, а затем устанавливает значение state. Файл index.js в CodeSandbox ниже содержит логику ввода значения и его отправки.
В функции, утверждающей прохождение теста мы устанавливаем переменные в поле input, тег p, который отображает текущее значение ref, и кнопку отправки. Мы также устанавливаем значение, которое мы хотели бы ввести в поле ввода, для переменной newName. Это будет использоваться для проверки в тесте.
Метод fireEvent.change используется для ввода значения в поле input, и в этом случае используется name, сохраненное в константе newName, после чего нажимается кнопка отправки.
Затем тест проверяет, соответствует ли значение ref после нажатия кнопки значение newName.
Наконец, вы должны увидеть «Нет падений тестов, поздравляем!» сообщение в консоли.
Реакция сообщества на Hooks
С того момента как представили React Hooks, сообщество было в восторге от этой фичи, и мы видели множество примеров и примеров использования React Hooks. Вот некоторые из основных:
Различные типы hooks
Существуют различные типы hooks, которые вы можете начать использовать в своем React приложении. Они перечислены ниже:
Будущее hooks
Тем не менее, Hooks все еще являются экспериментальной функцией, и команда React неоднократно предупреждала, что API может быть изменен. Считайте что вы предупреждены.
Что означает для классов появление Hooks? Как сообщает команда React, классы все еще остаются, они являются огромной частью кодовой базы React и, скорее всего, будут еще какое-то время.
У нас нет планов осуждать классы. В Facebook у нас есть десятки тысяч компонентов, написанных классами, и, как и вы понимаете, мы не собираемся переписывать их. Но если сообщество React одобрит Hooks, нет смысла иметь два разных рекомендуемых способа записи компонентов — Дэн Абрамов
Хотя конкретный API-интерфейс Hooks является экспериментальным сегодня, сообщество одобряет идею Hooks, поэтому я думаю, что они останутся с нами надолго.
Дополнительные ресурсы
React: основные подходы к управлению состоянием
Доброго времени суток, друзья!
Предлагаю вашему вниманию простое приложение — список задач. Что в нем особенного, спросите вы. Дело в том, что я попытался реализовать одну и ту же «тудушку» с использованием четырех разных подходов к управлению состоянием в React-приложениях: useState, useContext + useReducer, Redux Toolkit и Recoil.
Начнем с того, что такое состояние приложения, и почему так важен выбор правильного инструмента для работы с ним.
Состояние — это собирательное понятие для любой информации, имеющей отношение к приложению. Это могут быть как данные, используемые в приложении, такие как тот же список задач или список пользователей, так и состояние как таковое, например, состояние загрузки или состояние формы.
Условно, состояние можно разделить на локальное и глобальное. Под локальным состоянием, обычно, понимается состояние отдельно взятого компонента, например, состояние формы, как правило, является локальным состоянием соответствующего компонента. В свою очередь, глобальное состояние правильнее именовать распределенным или совместно используемым, подразумевая под этим то, что такое состояние используется более чем одним компонентом. Условность рассматриваемой градации выражается в том, что локальное состояние вполне может использоваться несколькими компонентами (например, состояние, определенное с помощью useState(), может в виде пропов передаваться дочерним компонентам), а глобальное состояние не обязательно используется всеми компонентами приложения (например, в Redux, где имеется одно хранилище для состояния всего приложения, обычно, создается отдельный срез (slice) состояния для каждой части UI, точнее, для логики управления этой частью).
Важность выбора правильного инструмента для управления состоянием приложения обусловлена теми проблемами, которые возникают при несоответствии инструмента размерам приложения или сложности реализуемой в нем логики. Мы убедимся в этом в процессе разработки списка задач.
Я не буду вдаваться в подробности работы каждого инструмента, а ограничусь общим описанием и ссылками на соответствующие материалы. Для прототипирования UI будет использоваться react-bootstrap.
Создаем проект с помощью Create React App:
useState()
Хук «useState()» предназначен для управления локальным состоянием компонента. Он возвращает массив с двумя элементами: текущим значением состояния и сеттером — функцией для обновления этого значения. Сигнатура данного хука:
Пока ограничимся четырьмя базовыми операциями: добавление, переключение (выполнение), обновление и удаление задачи, но усложним себе жизнь тем, что наше начальное состояние будет иметь форму нормализованных данных (это позволит как следует попрактиковаться в иммутабельном обновлении).
Думаю, тут все понятно.
В App.js мы с помощью useState() определяем начальное состояние приложения, импортируем и рендерим компоненты приложения, передавая им состояние и сеттер в виде пропов:
В TodoForm.js мы реализуем добавление новой задачи в список:
В TodoList.js мы просто рендерим список элементов:
Наконец, в TodoListItem.js происходит самое интересное — здесь мы реализуем оставшиеся операции: переключение, обновление и удаление задачи:
Заключение
Итак, мы с вами реализовали список задач с использованием четырех разных подходов к управлению состоянием. Какие выводы можно из всего этого сделать?
Я выскажу свое мнение, оно не претендует на статус истины в последней инстанции. Разумеется, выбор правильного инструмента для управления состоянием зависит от задач, решаемых приложением:
Учим useContext на примерах — React Hooks
Доброго времени суток, друзья. Сегодня поговорим о контексте в React и работе с хуком useContext. Разберем контекст в React и какую проблему он решает. На примере передачи данных между двумя независимыми компонентами посмотрим на практическую сторону использования useContext.
Что такое контекст?
онтекст в React это способность передачи данных через дерево компонентов, минуя прокидывание данных через пропсы от одного компонента к другому. Если посмотреть на историю развития React, то мы увидим, что до создания Flux, Reflux, Redux и Mobx решений все данные передавались от самого верхнего компонента к нижним через пропсы, иногда минуя огромные цепочки связанных компонентов. Это было крайне неудобное решение, если приложение насчитывало сотни, а иногда даже и тысячи связанных компонентов. Чтобы решить данною проблему, разработчики React придумали Context API, благодаря которому процесс передачи стал гораздо проще и лаконичнее.
Для создания контекста достаточно воспользоваться методом React.createContext, он имеет единственный параметр, в который можно передать дефолтное значение или объект для получения дочерних компонентов через контекст.
Вызывая React.createContext, мы получаем объект, который содержит два компонента, позволяющие взаимодействовать с ним.
Компонент Provider
После создания контекста, его требуется использовать совместно с компонентом Provider, который позволяет дочерним компонентам подписаться на его изменения. Если проще, то благодаря компоненту Provider все дочерние компоненты могут получить значения, которые мы ему передаем.
Данный компонент имеет пропс value, в котором можно указать значение для передачи всем дочерним компонентам.
Компонент Consumer
Второй компонент, который находится в объекте после вызова React.createContext является Consumer. Он предназначен для подписи на изменение контекста в функциональном компоненте. В качестве дочернего компонента он принимает функцию, которая получает контекст и возвращает React компонент. Благодаря компоненту Consumer у нас есть возможность получать значения из контекста в компонентах.
Несколько контекстов
Часто одного контекста в приложении бывает не достаточно и требуется использовать несколько контекстов. Для этого как правило просто оборачивают один Provider другим и передают в них нужные значения.
Тоже самое делают и с Consumer для получения значений в дочерних компонентах.
Получение контекста в Class компонентах
Для получения контекста в Class компоненте необходимо использовать свойство contextType, имеющееся в самом классе, и присвоить объект, возвращающий контекст. После чего, используя свойства this.context, можно получить доступ к его значениям уже внутри класса.
Для чего нужен useContext?
После изучения всей базовой теории по контексту можно наконец-то перейти к хукам. Основная задача хуков в React это упрощение API с целью написания меньшего количества кода и удобства. Хук useContext занимается именно тем, что уменьшает количество написанного кода для взаимодействия с контекстом в функциональных компонентах.
Хук имеет один параметр, в который требуется передать объект контекста, получаемый при вызове React.createContext.
Важно! При изменении значений в контексте, компонент, который содержит useContext, всегда будет перерендериваться.
useContext на практике
Давайте создадим компонент, в котором у нас будет храниться контекст и два дочерних компонента. При нажатии на кнопку в одном компоненте, будет происходить изменение текста в другом. Данный пример поможет лучше понять, как работать с контекстом, используя useContext.
Давайте разберем по шагам, что происходит в этом примере. В Context.js создается сам контекст, а в App.js импортируются два компонента и контекст, которым они оборачиваются, c передачей в value начального состояния (context) и функции для его изменения (setContext).
Два дочерних компонента импортируют в себя контекст, используя хук useContext и посредством деструктуризации вытаскивается значение и функция для ее изменения.
При нажатии на кнопку в компоненте ComponentA происходит изменение значения контекста, благодаря useContext в компоненте ComponentB происходит его моментальное перерендеривание и, как результат в нем отображается значение контекста.
Заключение
Сегодня мы разобрали понятие контекста в React и на примерах посмотрели практическое применение useContext. Благодаря использованию useContext работа с контекстом стала более лаконичной и простой. Помните, использование контекста в вашем приложении может усложнить повторное использование компонентов, и в качестве альтернативы вы можете использовать более простое и эффективное решение, а именно композицию компонентов. Надеюсь, что данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.