Куките на React трансформираха начина, по който разработваме функционални компоненти в React. Те ни предоставят мощен набор от инструменти, които опростяват управлението на състоянието, страничните ефекти и различни други функции. В тази статия ще проучим възможностите на куките на React и как те се справят с предизвикателствата, пред които са изправени функционалните компоненти. Ще се задълбочим в създаването и достъпа до състояние от дървото Fiber, регистриране на странични ефекти в дървото Fiber, ръчни селекции на DOM и др. Освен това ще открием ползите от започването на имената на кукичките с „употреба“, повторното използване на невизуална логика чрез персонализирани кукички и как куките дават възможност на функционалните компоненти със състояние и странични ефекти. Нека да се впуснем в това пътуване и да разкрием истинския потенциал на куките на React.
Създаване и достъп до състояние от Fiber Tree
React куките осигуряват елегантно решение за създаване и достъп до състояние във функционални компоненти. Най-често използваната кука за тази цел е useState. Нека разгледаме пример, за да разберем как работи:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
В кода по-горе ние използваме куката useState, за да дефинираме променлива на състоянието count и съответната функция за актуализиране setCount. Това ни позволява да създаваме и актуализираме състояние в рамките на нашия функционален компонент, позволявайки динамично поведение и изобразяване въз основа на промени в състоянието.
Регистриране на странични ефекти във Fiber Tree: React куките, особено useEffect, улесняват регистрирането на странични ефекти във функционални компоненти. Използвайки useEffect, можем да изпълним код, който разчита на външни API, таймери, абонаменти или ръчни манипулации на DOM. Да разгледаме един пример:
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetchData().then((result) => {
setData(result);
});
}, []);
return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
};
В горния кодов фрагмент използваме куката useEffect за асинхронно извличане на данни. Ефектът се изпълнява само веднъж, благодарение на празния масив на зависимости като втори аргумент. Това гарантира, че ефектът се задейства само по време на първоначалното изобразяване на компонента. В резултат на това компонентът изобразява „Зареждане…“, докато данните не бъдат извлечени и съхранени в променливата на състоянието data.
Ръчни селекции на DOM
React куките ни позволяват да извършваме ръчни DOM селекции и манипулации с помощта на useRef куката. useRef предоставя начин за препратка към DOM елементи директно във функционални компоненти. Нека разгледаме един пример:
import React, { useRef } from 'react';
const FocusInput = () => {
const inputRef = useRef();
const handleClick = () => {
inputRef.current.focus();
};
return (
<div>
<input type="text" ref={inputRef} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
В кодовия фрагмент по-горе ние използваме куката useRef, за да създадем препратка към входния елемент. Когато се щракне върху бутона, функцията handleClick се задейства, извиквайки метода focus() на входния елемент, посочен от inputRef. Това ни позволява ръчно да манипулираме DOM, като например фокусиране върху поле за въвеждане.
Допълнителни възможности
React куките предлагат широк набор от функционалности извън основните куки, споменати по-горе. Кукички като useReducer, useContext, useRef, useCallback, useMemo, useTransition и useDeferredValue ни дават възможност да се справим с по-сложни сценарии и да оптимизираме производителността. Използването на тези куки отваря свят от възможности за разработване на сложни приложения.
Персонализирани куки за повторна употреба
Едно от най-големите предимства на куките на React е възможността да композираме множество куки в наши собствени персонализирани куки. Това насърчава повторното използване на кода и ни позволява да извличаме обща логика в отделни кукички. Нека илюстрираме това с пример:
import { useState, useEffect } from 'react';
const useDataFetching = (url) => {
const [data, setData] = useState(null);
const [isLoading, setLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url);
const result = await response.json();
setData(result);
} catch (error) {
console.error(error);
} finally {
setLoading(false);
}
};
fetchData();
}, [url]);
return { data, isLoading };
};
В кода по-горе създаваме персонализирана кука, наречена useDataFetching. Той капсулира логиката за извличане на данни от определен URL адрес и управлява управлението на състоянието на зареждане. Като използваме тази персонализирана кука, можем лесно да извличаме данни от различни крайни точки в различни компоненти, като насърчаваме повторното използване на кода и поддръжката.
Упълномощаващи функционални компоненти
Преди куките на React само компонентите на класа имаха способността да управляват състояние и да се справят със странични ефекти. Кукичките въведоха способността функционалните компоненти да притежават състояние и да изпълняват странични ефекти в различни точки от жизнения цикъл. Тази промяна опростява разработването на компоненти и насърчава използването на функционални компоненти в нашите приложения.
React куките революционизираха начина, по който изграждаме функционални компоненти в React. Те ни предоставят мощен набор от инструменти за управление на състоянието, справяне със странични ефекти и отключване на безброй възможности. Използвайки кукички като useState, useEffect и персонализирани кукички, можем да опростим сложни задачи, да популяризираме повторната употреба на кода и да дадем възможност на функционалните компоненти със състояние и странични ефекти. Възползвайте се от силата на куките на React и подобрете своя опит в разработката на React.
