Возможно, вы уже знаете о хуках React и даже о том, какие базовые хуки предлагает фреймворк. Хуки позволяют управлять состоянием и другими функциями без написания класса. Основные крючки: useState, useEffect, а также useContext. В этой статье вы узнаете о некоторых дополнительных хуках, которые добавляют более сложное поведение.

Дополнительные хуки, которые вы изучите: useRef а также useMemo.

useRef

В useRef функция возвращает изменяемый объект ref и инициализирует его .Текущий свойство переданного аргумента. Люди часто путают использование useRef крюк с useState крюк. Вы можете проинструктировать этот хук удерживать ссылку на HTML-элемент. Используя эту ссылку, вы можете легко управлять этим элементом.

В useRef У hook есть только одно свойство: .Текущий. React не повторно отображает страницу при изменении ее элемента. Он также не перерисовывается, если вы измените значение.Текущий имущество. Давайте разберемся с использованием этого хука на примере:

импортировать React, {useState, useRef} из response;





instagram viewer


экспортировать функцию по умолчанию App () {
константа count = useRef (ноль);
const [число, setNumber] = useState (0);
const checkNumber = () => {
if (count.current.value <10) {
count.current.style.backgroundColor = "красный";
} еще {
count.current.style.backgroundColor = "зеленый";
}
};
возвращение (


Введите число больше 10

ref = {count}
type = "текст"
значение = {число}
onChange = {(e) => setNumber (e.target.value)}
/>
 checkNumber ()}> Щелкните



);
}

В приведенном выше коде цвет элемента ввода изменяется в соответствии с числом, которое вы вводите в поле ввода. Во-первых, он присваивает результат useRef () прицепиться к считать Переменная. Есть два элемента: ввод и кнопка. Входной элемент имеет значение количество и ссылка свойство входного тега считать чтобы соответствовать переменной.

Когда вы нажимаете на кнопку, номер чека() вызывается функция. Эта функция проверяет, установлено ли значение количество больше 10. Тогда это устанавливает цвет фона элемента ввода с помощью count.current.style.backgroundColor имущество.

Связанный: Основы CSS: Работа с цветами

useMemo

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

Синтаксис useMemo крючок выглядит следующим образом:

const memoizedValue = useMemo (() => computeExuredValue (a), [a]);

Для лучшего понимания рассмотрим пример. В приведенном ниже коде переключаются цвета двух заголовков. Он называет useState крючок, чтобы отслеживать их ценности. Функция показывает, горячий или холодный цвет в зависимости от его значения. Перед возвратом статуса цвета есть цикл while, который приостанавливается примерно на одну секунду. Это сделано для демонстрационных целей, чтобы объяснить преимущества useMemo крюк.

импортировать React, {useState, useMemo} из response;
экспортировать функцию по умолчанию App () {
const [цвет1, setColor1] = useState («синий»);
const [цвет2, setColor2] = useState («зеленый»);
const toggleColor1 = () => {
вернуть color1 "синий"? setColor1 («красный»): setColor1 («синий»);
};
const toggleColor2 = () => {
color2 "зеленый"? setColor2 («оранжевый»): setColor2 («зеленый»);
};
const displayColor = () => {
var now = новая дата (). getTime ();
while (новая Дата (). getTime () вернуть color1 "синий"? «круто»: «горячо»;
};
возвращение (


Цвет текста 1: {color1}

Это цвет {displayColor ()}

Переключить цвет
Цвет текста 2: {color2}

Переключить цвет



);
}

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

Вам нужно обернуть displayColor функция в useMemo крюк и пас color1 в массиве зависимостей.

const displayColor = useMemo (() => {
var now = новая дата (). getTime ();
while (новая Дата (). getTime () вернуть color1 "синий"? «круто»: «горячо»;
}, [цвет1]);

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

Что делать дальше после изучения хуков

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

Есть и другие продвинутые хуки, например useReducer, useLayoutEffect, а также useDebugValue. Вы можете узнать их, обратившись к официальной документации React.

Уннати Бамания (Опубликовано 10 статей)

Уннати - увлеченный разработчик полного стека. Она любит создавать проекты с использованием разных языков программирования. В свободное время она любит играть на гитаре и увлекается кулинарией.

Ещё от Unnati Bamania