Ако сте нов в React, може би се чудите какво представляват React Hooks и кога трябва да ги използвате. React въведе само куки в своята версия 16.8, но те бързо се превърнаха в съществена характеристика на библиотеката.

Научете всичко за основите на React Hooks и открийте някои най-добри практики за използването им във вашите React приложения.

Какво представляват React Hooks?

React Hooks ви позволяват да използвате състояние и други функции на React, без да пишете допълнителен код. Куките са чудесен начин да направите кода си по-четлив и лесен за поддръжка.

Има няколко различни кукички в React, но най-често използваните са useState и useEffect. Куката useState ви позволява да добавяте състояние към вашите компоненти. Това е полезно за неща като проследяване на въвеждане от потребител или промени във формуляр. Куката useEffect ви позволява да стартирате функция всеки път, когато компонент се изобразява. Това е полезно за неща като извличане на данни от API или настройка на абонамент.

Кога трябва да използвате React Hooks?

instagram viewer

Трябва да използвате React Hooks винаги, когато трябва да добавите допълнителна функционалност към компонент. Например, ако трябва да следите въвеждането на потребител, ще използвате куката useState. Ако трябва да извлечете данни от API, ще използвате куката useEffect. Можете също създаване на персонализирани кукички за API извиквания.

Ако току-що сте започнали да използвате React, може все още да не се налага да използвате Hooks. Но докато създавате по-сложни приложения, ще откриете, че Hooks са чудесен начин да добавите допълнителна функционалност към вашите компоненти.

Най-добри практики с React Hooks

След като вече знаете какво представляват React Hooks и кога да ги използвате, нека поговорим за някои най-добри практики.

1. Само куки за извикване от React функции

Трябва да извиквате React Hooks само от React функции. Ако се опитате да извикате реагиращи кукички от компонент на клас, ще получите грешка.

Това е така, защото можете да извикате React Hook само от React функция. Функциите на React са компоненти, които декларирате с ключова дума за функция.

Ето пример за функционален компонент на React:

импортиране Реагирайте, {useState} от 'реагира';
функцияПриложение() {
конст [count, setCount] = useState(0);
връщане (
<див>
<стр>{броя}</стр>
<бутон onClick={() => setCount (брой + 1)}>
 Щракни върху мен
</button>
</div>
 );
}

И ето пример за компонент на клас:

импортиране Реагирайте, {Component} от 'реагира';
класПриложениесе простираКомпонент{
 състояние = {
 брой: 0
 };
рендер() {
връщане (
<див>
<стр>{this.state.count}</стр>
<бутон onClick={() => this.setState({ count: this.state.count + 1 })}>
 Щракни върху мен
</button>
</div>
 );
 }
}

Първият пример декларира компонента App с помощта на ключовата дума function, докато вторият използва ключовата дума class.

2. Използвайте само една кука useEffect

Ако използвате куката useEffect, трябва да използвате само една за всеки компонент. Това е така, защото useEffect се изпълнява всеки път, когато компонент се изобразява.

Ако имате множество кукички useEffect, всички те ще се изпълняват, когато даден компонент се изобразява. Това може да доведе до неочаквано поведение и проблеми с производителността. В примера по-долу и двата useEffects ще се изпълняват всеки път, когато компонентът на приложението се изобразява.

импортиране Реагирайте, {useState, useEffect} от 'реагира';
функцияПриложение() {
конст [count, setCount] = useState(0);


useEffect(() => {
 console.log('Това ще се изпълнява винаги, когато компонентът на приложението се изобразява!');
 }, []);


useEffect(() => {
 console.log('Това също ще се изпълнява, когато компонентът на приложението се изобразява!');
 }, []);
връщане (
<див>
<стр>{броя}</стр>
<бутон onClick={() => setCount (брой + 1)}>
 Щракни върху мен
</button>
</div>
 );
}

Вместо да използвате множество кукички useEffect, можете да използвате една кукичка useEffect и да поставите целия си код вътре в нея. В примера по-долу само една кука useEffect ще се изпълнява всеки път, когато компонентът на приложението се изобразява.

импортиране Реагирайте, {useState, useEffect} от 'реагира';
функцияПриложение() {
конст [count, setCount] = useState(0);


useEffect(() => {
 console.log('Това ще се изпълнява винаги, когато компонентът на приложението се изобразява!');
 console.log('Това също ще се изпълнява, когато компонентът на приложението се изобразява!');
 }, []);
връщане (
<див>
<стр>{броя}</стр>
<бутон onClick={() => setCount (брой + 1)}>
 Щракни върху мен
</button>
</div>
 );
}

Това означава, че можете да извиквате React Hooks само от първия пример. Ако се опитате да извикате React Hooks от втория пример, ще получите грешка.

3. Използвайте куки на най-високо ниво

Една от най-добрите практики с React Hooks е да ги използвате на най-високо ниво. Трябва да избягвате използването на кукички в цикли, условия или вложени функции. Например, ако използвате State в for цикъл, всеки път, когато цикълът се изпълнява, React ще създаде нова променлива на състоянието. Това може да доведе до неочаквано поведение.

импортиране Реагирайте, {useState} от 'реагира';
функцияПриложение() {
за (позволявам аз = 0; аз < 10; i++) {
// Не правете това!
конст [count, setCount] = useState(0);
 }
връщане (
<див>
<стр>{броя}</стр>
<бутон onClick={() => setCount (брой + 1)}>
 Щракни върху мен
</button>
</div>
 );
}

В горния пример компонентът на приложението ще изобрази брояча и бутона само от последната итерация на цикъла. Това е така, защото React актуализира само променливата на състоянието от последната итерация.

Вместо да използватеState вътре в цикъл, можете да декларирате променлива на състоянието извън цикъла. По този начин React ще създаде само една променлива на състоянието и ще я актуализира съответно.

импортиране Реагирайте, {useState} от 'реагира';
функцияПриложение() {
// Това е правилният начин за използване на useState вътре в цикъл
конст [count, setCount] = useState(0);


за (позволявам аз = 0; аз < 10; i++) {
// ...
 }
връщане (
<див>
<стр>{броя}</стр>
<бутон onClick={() => setCount (брой + 1)}>
 Щракни върху мен
</button>
</div>
 );
}

4. Не прекалявайте с куките

React Hooks са мощен инструмент, но трябва да избягвате прекомерната им употреба. Ако откриете, че използвате няколко Hook във всеки компонент, може да прекалявате с тях.

React Hooks са най-полезни, когато трябва да споделите състояние между множество компоненти. Избягвайте използването на ненужни кукички, защото те могат да направят кода ви труден за четене и могат да повлияят на производителността, ако се използват прекомерно.

Добавете повече функционалност с помощта на куките на React 18

С пускането на React 18 има нови налични кукички. Всяка кука е специфична за определена функция на React. Можете да намерите списък с всички налични кукички на уебсайта на React. Но най-често използваните куки все още са useState и useEffect.