Що таке хуки та використання?
Хуки та використання — це дві важливі концепції в React, популярній бібліотеці JavaScript, яка використовується для створення інтерфейсів користувача. У цій статті ми розглянемо, що таке хуки, як вони працюють і деякі поширені способи використання хуків у програмах React.
Що таке хуки?
Хуки — це спосіб додати функціональність функціональним компонентам у React. Традиційно функціональні компоненти в React обмежувалися лише визначенням елемента інтерфейсу і не мали доступу до методів стану чи життєвого циклу. З появою хуків функціональні компоненти тепер можуть мати методи стану та життєвого циклу, що робить їх більш потужними та гнучкими.
Як працюють хуки?
Хуки — це функції, які дозволяють використовувати такі функції React, як стан, контекст і методи життєвого циклу у функціональних компонентах. Вони викликаються всередині компонента і повинні відповідати правилам хуків, що означає, що їх не можна викликати умовно або в циклах.
У React є кілька вбудованих хуків, зокрема useState, useEffect, useContext і useMemo. Кожен хук має конкретне призначення та може бути використаний для додавання певної функціональності компоненту.
Поширене використання хуків у React
1. використовувати гачок стану
Хук useState використовується для додавання стану до функціональних компонентів. Стан — це об’єкт, який зберігає дані та відображає зміни в інтерфейсі користувача. Хук useState приймає початкове значення як аргумент і повертає масив із двома елементами: значенням поточного стану та функцією для оновлення стану.
```
імпорт React, { useState } з ''react'';
функція Counter() {
const [count, setCount] {{0}} useState(0);
повернення (
Ви клацнули {count} разів
);
}
```
У цьому прикладі хук useState використовується для додавання лічильника до компонента. Змінна count ініціалізується як 0 і оновлюється функцією setCount після натискання кнопки.
2. використовувати хук ефекту
Хук useEffect використовується для виконання побічних ефектів у функціональних компонентах, таких як отримання даних, підписка на події або оновлення назви документа. Побічні ефекти — це дії, які відбуваються поза компонентом і можуть впливати на інтерфейс користувача або стан програми.
```
імпорт React, { useState, useEffect } з ''react'';
функція UserProfile({ userId }) {
const [користувач, setUser]=useState(null);
useEffect(() => {
fetch(`https://api.example.com/users/${userId}`)
.then(response =>response.json())
.then(data =>setUser(дані));
}, [ідентифікатор користувача]);
if (!user) {
повернення
Завантаження...
;}
повернення (
{user.name}
{user.email}
);
}
```
У цьому прикладі хук useEffect використовується для отримання профілю користувача з API та оновлення стану компонента. Хук useEffect приймає функцію та масив залежностей як аргументи. Функція виконується після рендерингу компонента, і залежності визначають, коли функцію слід виконати повторно.
3. useContext Хук
Хук useContext використовується для обміну даними між компонентами без використання атрибутів або глобальної бібліотеки керування станом. Контекст — це спосіб передати дані через дерево компонентів без необхідності передавати атрибути вручну на кожному рівні.
```
імпорт React, { useContext } з ''react'';
імпортувати ThemeContext з ''./ThemeContext'';
функція Button() {
const { тема, setTheme }=useContext(ThemeContext);
повернення (
<>
onClick={() =>setTheme(тема === ''світлий'' ? ''темний'' : ''світлий'')}
style={{ backgroundColor: theme === ''light'' ? ''білий'' : ''чорний'', колір: тема === ''світлий'' ? ''чорний'' : ''білий'' }}
>
{тема === ''світло''? ''Switch to Dark Mode'' : ''Переключитися на світлий режим''}
);
}
```
У цьому прикладі хук useContext використовується для доступу та оновлення властивості теми стану батьківського компонента. Хук useContext приймає об’єкт контексту як аргумент і повертає поточне значення контексту.
4. використовуйте Memo Hook
UseMemo Hook використовується для оптимізації дорогих обчислень у функціональних компонентах. Дорогі обчислення – це обчислення, які потребують багато часу або споживають багато ресурсів. Хук useMemo приймає функцію та масив залежностей як аргументи та повертає результат функції.
```
імпорт React, { useState, useMemo } з ''react'';
функція Фібоначчі({ n }) {
const [результат, setResult]=useState(null);
const fibonacci = useMemo(() => {
якщо (н<= 1) {
return n;
}
повернути fibonacci(n - 1) + fibonacci(n - 2);
}, [n]);
useEffect(() => {
setResult(фібоначчі);
}, [фібоначчі]);
якщо (результат === null) {
повернення
Розрахунок...
;}
повернення
{n}-е число Фібоначчі дорівнює {результат}.
;}
```
У цьому прикладі хук useMemo використовується для обчислення n-го числа Фібоначчі. Хук useMemo приймає функцію та масив залежностей як аргументи. Функція виконується лише тоді, коли залежності змінюються, оптимізуючи продуктивність компонента.
Висновок
Хуки та використання є важливою частиною API функціонального компонента React. Вони дозволяють розробникам додавати методи стану, контексту та життєвого циклу до функціональних компонентів, роблячи їх більш потужними та гнучкими. Деякі з поширених способів використання хуків у програмах React включають керування станом, обробку побічних ефектів, обмін контекстом та оптимізацію продуктивності. Вивчаючи та використовуючи хуки в додатках React, розробники можуть створювати більш ефективний і керований код.