Если вы новичок в React, вам может быть интересно, что такое React Hooks и когда их следует использовать. React представил хуки только в выпуске 16.8, но они быстро стали важной функцией библиотеки.
Узнайте все об основах React Hooks и узнайте о некоторых передовых методах их использования в ваших приложениях React.
Что такое React-хуки?
React Hooks позволяют использовать состояние и другие функции React без написания дополнительного кода. Хуки — отличный способ сделать ваш код более читабельным и удобным в сопровождении.
Есть несколько разные хуки в React, но чаще всего используются useState и useEffect. Хук useState позволяет добавлять состояние к вашим компонентам. Это полезно для таких вещей, как отслеживание ввода пользователя или изменений в форме. Хук useEffect позволяет вам запускать функцию всякий раз, когда компонент визуализируется. Это полезно для таких вещей, как выборка данных из API или настройка подписки.
Когда следует использовать React Hooks?
Вы должны использовать React Hooks всякий раз, когда вам нужно добавить дополнительную функциональность к компоненту. Например, если вам нужно отслеживать ввод пользователя, вы должны использовать хук useState. Если вам нужно получить данные из API, вы должны использовать хук useEffect. Вы также можете
создавать собственные хуки для вызовов API.Если вы только начали использовать React, возможно, вам еще не нужны хуки. Но по мере создания более сложных приложений вы обнаружите, что хуки — отличный способ добавить дополнительную функциональность вашим компонентам.
Лучшие практики с React Hooks
Теперь, когда вы знаете, что такое React Hooks и когда их использовать, давайте поговорим о некоторых передовых методах.
1. Вызывать хуки только из функций React
Вы должны вызывать React Hooks только из функций React. Если вы попытаетесь вызвать хуки реакции из компонента класса, вы получите сообщение об ошибке.
Это связано с тем, что вы можете вызывать React Hook только из функции React. Функции React — это компоненты, которые вы объявляете с помощью ключевого слова function.
Вот пример функционального компонента React:
Импортировать Реагировать, {useState} от 'реагировать';функцияПриложение() {
константа [счетчик, setCount] = useState(0);
возвращаться (
<див>
<п>{считать}</п>
<кнопка onClick={() => setCount (количество + 1)}>
Нажми на меня
</button>
</div>
);
}
А вот пример компонента класса:
Импортировать Реагировать, {Компонент} от 'реагировать';сортПриложениерасширяетКомпонент{
состояние = {
количество: 0
};
оказывать() {
возвращаться (
<див>
<п>{это.состояние.счет}</п>
<кнопка onClick={() => this.setState({ count: this.state.count + 1})}>
Нажми на меня
</button>
</div>
);
}
}
В первом примере компонент App объявляется с помощью ключевого слова function, а во втором — с ключевым словом class.
2. Используйте только один крюк useEffect
Если вы используете хук useEffect, вы должны использовать только один хук для каждого компонента. Это связано с тем, что useEffect запускается всякий раз, когда компонент визуализируется.
Если у вас есть несколько хуков useEffect, все они будут запускаться при каждом рендеринге компонента. Это может привести к неожиданному поведению и проблемам с производительностью. В приведенном ниже примере оба useEffects будут запускаться всякий раз, когда компонент приложения отрисовывается.
Импортировать Реагировать, {useState, useEffect} от 'реагировать';функцияПриложение() {
константа [счетчик, setCount] = useState(0);использовать эффект (() => {
console.log('Это будет выполняться всякий раз, когда компонент приложения отображается!');
}, []);использовать эффект (() => {
console.log('Это также будет выполняться всякий раз, когда компонент приложения отображается!');
}, []);
возвращаться (
<див>
<п>{считать}</п>
<кнопка onClick={() => setCount (количество + 1)}>
Нажми на меня
</button>
</div>
);
}
Вместо использования нескольких хуков useEffect вы можете использовать один хук useEffect и поместить в него весь свой код. В приведенном ниже примере только один хук useEffect будет запускаться всякий раз, когда компонент приложения отрисовывается.
Импортировать Реагировать, {useState, useEffect} от 'реагировать';функцияПриложение() {
константа [счетчик, setCount] = useState(0);использовать эффект (() => {
console.log('Это будет выполняться всякий раз, когда компонент приложения отображается!');
console.log('Это также будет выполняться всякий раз, когда компонент приложения отображается!');
}, []);
возвращаться (
<див>
<п>{считать}</п>
<кнопка onClick={() => setCount (количество + 1)}>
Нажми на меня
</button>
</div>
);
}
Это означает, что вы можете вызывать React Hooks только из первого примера. Если вы попытаетесь вызвать React Hooks из второго примера, вы получите ошибку.
3. Используйте хуки на верхнем уровне
Одна из лучших практик с React Hooks — использовать их на верхнем уровне. Вам следует избегать использования хуков внутри циклов, условий или вложенных функций. Например, если вы используете состояние внутри цикла for, каждый раз, когда цикл запускается, React будет создавать новую переменную состояния. Это может привести к неожиданному поведению.
Импортировать Реагировать, {useState} от 'реагировать';функцияПриложение() {
для (позволять я = 0; я < 10; я++) {
// Не делайте этого!
константа [счетчик, setCount] = useState(0);
}
возвращаться (
<див>
<п>{считать}</п>
<кнопка onClick={() => setCount (количество + 1)}>
Нажми на меня
</button>
</div>
);
}
В приведенном выше примере компонент приложения будет отображать счетчик и кнопку только из последней итерации цикла. Это связано с тем, что React обновляет переменную состояния только из последней итерации.
Вместо использования состояния внутри цикла вы можете объявить переменную состояния вне цикла. Таким образом, React создаст только одну переменную состояния и соответственно обновит ее.
Импортировать Реагировать, {useState} от 'реагировать';функцияПриложение() {
// Это правильный способ использования useState внутри цикла
константа [счетчик, setCount] = useState(0);для (позволять я = 0; я < 10; я++) {
// ...
}
возвращаться (
<див>
<п>{считать}</п>
<кнопка onClick={() => setCount (количество + 1)}>
Нажми на меня
</button>
</div>
);
}
4. Не злоупотребляйте хуками
React Hooks — мощный инструмент, но вам следует избегать их чрезмерного использования. Если вы обнаружите, что используете несколько хуков в каждом компоненте, возможно, вы злоупотребляете ими.
Хуки React наиболее полезны, когда вам нужно разделить состояние между несколькими компонентами. Избегайте использования ненужных хуков, поскольку они могут затруднить чтение вашего кода и могут повлиять на производительность при чрезмерном использовании.
Добавьте больше функциональности с помощью хуков React 18
С выпуском React 18 стали доступны новые хуки. Каждый хук специфичен для определенной функции React. Вы можете найти список всех доступных хуков на веб-сайте React. Но наиболее часто используемыми хуками по-прежнему являются useState и useEffect.
