Usestate react js что это

Справочник API хуков

Хуки — нововведение в React 16.8, которое позволяет использовать состояние и другие возможности React без написания классов.

На этой странице описан API, относящийся к встроенным хукам React.

Если вы новичок в хуках, вы можете сначала ознакомиться с общим обзором. Вы также можете найти полезную информацию в главе «Хуки: ответы на вопросы».

Возвращает значение с состоянием и функцию для его обновления.

Во время первоначального рендеринга возвращаемое состояние ( state ) совпадает со значением, переданным в качестве первого аргумента ( initialState ).

Функция setState используется для обновления состояния. Она принимает новое значение состояния и ставит в очередь повторный рендер компонента.

Кнопки «+» и «-» используют функциональную форму, потому что обновлённое значение основано на предыдущем значении. Но кнопка «Сбросить» использует обычную форму, потому что она всегда устанавливает счётчик обратно в 0.

Если функция обновления возвращает абсолютно такой же результат как и текущее состояние, то последующие повторные рендеры будут полностью пропущены.

Ленивая инициализация состояния

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

Досрочное прекращение обновления состояния

Принимает функцию, которая содержит императивный код, возможно, с эффектами.

Мутации, подписки, таймеры, логирование и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого этапом рендеринга React). Это приведёт к запутанным ошибкам и несоответствиям в пользовательском интерфейсе.

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

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

Порядок срабатывания эффектов

Хотя useEffect откладывается до тех пор, пока браузер не выполнит отрисовку, он гарантированно срабатывает перед любыми новыми рендерами. React всегда полностью применяет эффекты предыдущего рендера перед началом нового обновления.

Условное срабатывание эффекта

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

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

Если вы хотите запустить эффект и сбросить его только один раз (при монтировании и размонтировании), вы можете передать пустой массив ( [] ) вторым аргументом. React посчитает, что ваш эффект не зависит от каких-либо значений из пропсов или состояния и поэтому не будет выполнять повторных запусков эффекта. Это не обрабатывается как особый случай — он напрямую следует из логики работы входных массивов.

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

Принимает объект контекста (значение, возвращённое из React.createContext ) и возвращает текущее значение контекста для этого контекста. Текущее значение контекста определяется пропом value ближайшего над вызывающим компонентом в дереве.

Запомните, аргументом для useContext должен быть непосредственно сам объект контекста:

useContext(MyContext) позволяет только читать контекст и подписываться на его изменения. Вам всё ещё нужен выше в дереве, чтобы предоставить значение для этого контекста.

Соединим все вместе с Context.Provider

Это пример из раздела Продвинутые темы: Контекст, только переписанный с использованием хуков. В этом же разделе можно найти больше информации о том, как и когда использовать объект Context.

Следующие хуки являются вариантами базовых из предыдущего раздела или необходимы только для конкретных крайних случаев. Их не требуется основательно изучать заранее.

Указание начального состояния

Это позволяет извлечь логику для расчёта начального состояния за пределы редюсера. Это также удобно для сброса состояния позже в ответ на действие:

Досрочное прекращение dispatch

Если вы вернёте то же значение из редюсера хука, что и текущее состояние, React выйдет без перерисовки дочерних элементов или запуска эффектов. (React использует алгоритм сравнения Object.is.)

Передайте встроенный колбэк и массив зависимостей. Хук useCallback вернёт мемоизированную версию колбэка, который изменяется только, если изменяются значения одной из зависимостей. Это полезно при передаче колбэков оптимизированным дочерним компонентам, которые полагаются на равенство ссылок для предотвращения ненужных рендеров (например, shouldComponentUpdate ).

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

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

Если массив не был передан, новое значение будет вычисляться при каждом рендере.

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

Обычный случай использования — это доступ к потомку в императивном стиле:

Возможно, вы знакомы с рефами в основном как со способом получить доступ к DOM. Если вы передадите React объект рефа с помощью подобного выражения

Но хук useRef() полезен не только установкой атрибута с рефом. Он удобен для сохранения любого мутируемого значения, по аналогии с тем, как вы используете поля экземпляра в классах.

useDebugValue может использоваться для отображения метки для пользовательских хуков в React DevTools.

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

Отложите форматирование значений отладки

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

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

Источник

Вопросы для собеседования по хукам React

Что такое хуки в React?

Будут ли хуки React работать внутри классовых компонентов?

Зачем были введены хуки в React?

Одной из причин введения хуков была сложность работы с ключевым словом this внутри классовых компонентов. Если с ним не обращаться должным образом, this будет иметь несколько другое значение. Это приведет к поломке таких строк, как this.setState() и других обработчиков событий. Используя хуки, мы избегаем этой сложности при работе с функциональными компонентами.

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

Другая причина в том, что не существует конкретного способа повторно использовать логику компонента, наделенного состоянием. Несмотря на то, что HOC (Higher-Order Component) и шаблоны Render Props (метод передачи props от родителя ребенку, используя функцию или замыкание) решают эту проблему, здесь требуется изменить код классового компонента. Хуки позволяют совместно использовать логику с отслеживанием состояния без изменения иерархии компонентов.

Четвертая причина заключается в том, что в сложном классовом компоненте связанный код разбросан по разным методам жизненного цикла. Например, в случае загрузки данных (fetch) мы делаем это в основном в componentDidMount() и componentDidUpdate(). Другой пример: в случае слушателей событий мы используем componentDidMount() для подписки на события и componentWillUnmount() для отмены подписки. Вместо этого хуки помогают объединить связанный код.

Как работает хук useState? Какие аргументы принимает этот хук и что он возвращает?

Сначала мы импортируем useState из React

Затем мы используем useState, например:

Задача на использование useState

У нас есть классовый компонент с состоянием. Каждый раз, когда нажимается кнопка в компоненте, счетчик увеличивается.

Перепишите этот компонент, используя хуки React.

Решение

Задача на использование useState 2

Ниже у нас есть классовый компонент. Он содержит код для обновления состояния на основе предыдущего значения состояния.

Перепишите вышеуказанный код, используя хуки React.

Решение.

Можно обновить значение переменной состояния, просто передав новое значение в функцию обновления или передав callback. Второй способ с передачей callback-функции безопасен в использовании.

Задача на использование useState 3

Здесь у нас есть классовый компонент, который обновляет состояние, используя ввод из формы.

Перепишите этот компонент, используя хуки React.

Решение

Функция обновления состояния в useState() не выполняет автоматическое слияние, если в состоянии хранится объект. Но в случае использования метода setState() в классовых компонентах происходит автоматическое слияние.

Здесь мы объединяем свойства объекта с помощью spread оператора JavaScript.

Каковы различия в использовании хуков и классовых компонентов в отношении управления состоянием?

При использовании setState() в классовых компонентах переменная состояния всегда является объектом. В то время как переменная состояния в хуках может иметь любой тип, например, число, строку, логическое значение, объект или массив.

Когда переменная состояния является объектом, setState() в классовых компонентах автоматически объединяет новое значение с объектом состояния. Но в случае функции обновления состояния в useState() нам нужно явно объединить обновленное свойство объекта с помощью spread оператора.

Зачем нужен хук useEffect?

Хук useEffect позволяет нам выполнять побочные эффекты в функциональных компонентах. Это помогает нам избежать избыточного кода в различных методах жизненного цикла классового компонента. Это помогает сгруппировать связанный код.

Задача на использование useEffect

Вот классовый компонент, который печатает Boom в консоли каждый раз, когда он монтируется или обновляется.

Удалите избыточные выражения console.log с помощью хуков React.

Решение.

Код может быть переписан таким образом:

Задача на использование useEffect 2

Код печатает сообщение «Счетчик обновлен» даже при обновлении значения в текстовом поле. Как мы можем отображать сообщение только при обновлении состояния счетчика?

Решение.

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

Вот обновленный код useEffect:

Задача на использование useEffect 3

У нас есть классовый компонент, который обновляет время каждую секунду. Он использует componentDidMount() для установки таймера.

Перепишите код выше с помощью хуков React.

Решение.

Вот код с использованием хуков React.

Задача на использование useEffect 4

У нас есть фрагмент кода из классового компонента, который регистрирует и удаляет слушатель событий.

Перепишите этот код в стиле хуков React.

Решение.

Чтобы использовать функциональность метода жизненного цикла componentWillUnmount() в хуке useEffect нужно вернуть callback с кодом, который необходимо выполнить при размонтировании компонента.

Задача на использование useContext

Вот фрагмент кода из компонента Context.Consumer.

Перепишите ConsumerComponent, используя хук useContext.

Решение.

Хуки можно использовать только в функциональном компоненте.

ConsumerComponent можно переписать так:

Источник

Введение в React Hooks

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Мотивация стоящая за 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 react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Пример useState() Hook

State является неотъемлемой частью React. Он позволяет нам объявлять переменные, которые содержат данные, которые, в свою очередь, будут использоваться в нашем приложении. С помощью классов state обычно определяется следующим образом:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В вышеприведенном блоке кода, мы начинаем с импорта useState из React. UseState — это новый способ использования возможностей, которые раньше могло предложить this.state.
Затем обратите внимание, что этот компонент является функцией, а не классом. Интересно!

Чтение и запись state

Внутри этой функции мы вызываем useState для создания переменной в state:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

useState используется для объявления переменной state и может быть инициализирован любым типом значения (в отличие от state в классах, который должен быть объектом).

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Затем мы применяем их как обработчики событий на кнопках во view:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

React отслеживает state

Когда нажимается кнопка «On», Вызывается функция setOn, вызывающая setLight(1). Вызов setLight(1) обновляет значение light для следующего рендера. Это может показаться немного волшебным, но React отслеживает значение этой переменной и будет передавать новое значение, когда происходит ре-рендер этого компонента.
Затем мы используем текущее состояние (light), чтобы определить, должна ли лампа быть включена или нет. То есть, мы устанавливаем цвет заливки SVG в зависимости от значения light. Если light равен 0 (выкл.), То для fillColor установлено значение # 000000 (а если равен 1 (включено), fillColor устанавливается на # ffbb73).

Multiple States

Хотя мы не делаем этого в приведенном выше примере, вы можете создать несколько state, вызвав useState более одного раза. Например:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

ПРИМЕЧАНИЕ.
Существуют некоторые ограничения при использовании hooks, о которых вы должны знать. Самое главное, вы должны вызывать hooks только на верхнем уровне вашей функции. См. «Правила hooks» для получения дополнительной информации.

Пример useEffect() Hook

Используя useEffect() Hook, React знает, что вы хотите выполнить определенное действие после рендеринга.

Давайте посмотрим на пример ниже. Мы будем использовать useEffect() для вызова API и получения ответа.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В этом примере кода используются как useState, так и useEffect, и это потому, что мы хотим записать результат вызова API в state.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Получение данных и обновления state

Чтобы «использовать эффект», нам нужно поместить наш action в функцию useEffect, то есть мы передаем «action» эффект как анонимную функцию, как первый аргумент useEffect.
В примере выше мы обращаемся к API, которое возвращает список имен. Когда возвращается response, мы конвертируем его в JSON, а затем используем setNames(data) для установки state.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Проблемы с производительностью при использовании 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(), а затем возвращает текущее значение контекста. Давайте посмотрим на пример ниже.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В приведенном выше коде 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, который содержит что-то вроде этого:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

и потом в App.js (и Display.js) вы должны написать:

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Пример useRef() Hook

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

useRef() и формы с input

Давайте посмотрим пример использования useRef() hook.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В приведенном выше примере мы используем 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!

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В приведенном выше блоке кода мы создаем функцию 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.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В вышеприведенном блоке кода мы начинаем с импорта некоторых хелперов из react-testing-library и тестируемого компонента.

Тест проверяет, что, если нажимается onButton, значение state устанавливается в 1, а при нажатии на offButton state равен 1.

Тестирование useEffect() Hook

В этом примере мы будем писать тесты, чтобы добавить товар в корзину, используя useEffect Hook. Количество элементов также сохраняется в localStorage. Файл index.js в CodeSandbox ниже содержит фактическую логику, используемую для добавления элементов в корзину.

Мы будем писать тесты, чтобы убедиться, что обновление количества элементов корзины также отражено в localStorage, и даже если страница перезагрузилась, количество элементов корзины все еще остается прежним.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В функции, подтверждающей прохождение теста мы сначала устанавливаем 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 ниже содержит логику ввода значения и его отправки.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

В функции, утверждающей прохождение теста мы устанавливаем переменные в поле input, тег p, который отображает текущее значение ref, и кнопку отправки. Мы также устанавливаем значение, которое мы хотели бы ввести в поле ввода, для переменной newName. Это будет использоваться для проверки в тесте.

Usestate react js что это. Смотреть фото Usestate react js что это. Смотреть картинку Usestate react js что это. Картинка про Usestate react js что это. Фото Usestate react js что это

Метод 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, поэтому я думаю, что они останутся с нами надолго.

Дополнительные ресурсы

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *