Háky React jsou účinný způsob, jak spravovat vedlejší efekty v komponentách React. Tři z nejběžnějších háčků pro řešení vedlejších efektů jsou useEffect, useLayoutEffect a useEffectEvent. Každý hák má svůj jedinečný případ použití, takže výběr toho správného pro danou práci je zásadní.
Table of Contents
UseEffect Hook
Hák useEffect je základní hák v Reactu, který vám umožňuje provádět vedlejší efekty, jako je manipulace s DOM, asynchronní operace a načítání dat ve funkčních komponentách. Tento hák je funkce, která přebírá dva argumenty, funkci efektu a pole závislostí.
Funkce efektu obsahuje kód, který provádí vedlejší efekt, a pole závislostí určuje, kdy se funkce efektu spustí. Pokud je pole závislostí prázdné, funkce efektu se spustí pouze jednou při počátečním vykreslení komponenty. V opačném případě se funkce efektu spustí vždy, když se některá z hodnot v poli závislostí změní.
Zde je příklad, jak použít háček useEffect k načtení dat:
import React from "react";function App() {
const [data, setData] = React.useState([]);React.useEffect(() => {
fetch("<https://jsonplaceholder.typicode.com/posts>")
.then((response) => response.json())
.then((data) => setData(data));
}, []);return (
<div className="app">
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</div>
);
}export default App;
Tento kód ukazuje komponentu aplikace, která načítá data z externího rozhraní API pomocí háku useEffect. Funkce efektu useEffect načítá ukázková data z rozhraní API JSONPlaceholder. Poté analyzuje odpověď JSON a nastaví načtená data do stavu dat.
Se stavem dat komponenta App vykreslí vlastnost title každé položky ve stavu.
Charakteristika použitíEffect Hook
- Asynchronní přátelský: Nativně podporuje asynchronní operace, takže je vhodný pro načítání dat.
- Spustí se po vykreslení: Hák useEffect spustí své efekty poté, co aplikace vykreslí komponentu, čímž zajistí, že hák neblokuje uživatelské rozhraní.
- Cleanup: Poskytuje integrovaný způsob, jak provést vyčištění vrácením funkce. To může být užitečné zejména při práci s posluchači nebo odběry.
UseLayoutEffect Hook
Hák useLayoutEffect je podobný háku useEffect, ale běží synchronně po všech mutacích DOM. To znamená, že se spustí dříve, než prohlížeč může namalovat obrazovku, takže je vhodný pro úkoly, které vyžadují přesnou kontrolu nad rozložením a styly DOM, jako je měření velikosti prvku, změna velikosti prvku nebo animace jeho pozice.
Níže je uveden příklad, jak použít háček useLayoutEffect ke změně šířky prvku tlačítka:
import React from "react";function App() {
const button = React.useRef();React.useLayoutEffect(() => {
const { width } = button.current.getBoundingClientRect();button.current.style.width = `${width + 12}px`;
}, []);return (
<div className="app">
<button ref={button}>Click Me</button>
</div>
);
}export default App;
Blok kódu výše zvětší šířku prvku tlačítka o 12 pixelů pomocí háčku useLayoutEffect. Tím se zajistí, že se šířka tlačítka zvětší, než se tlačítko zobrazí na obrazovce.
Charakteristika háku useLayoutEffect
- Synchronní: Provádí se synchronně a potenciálně blokuje uživatelské rozhraní, pokud je operace v něm obtížná.
- Čtení/zápis DOM: Nejlépe se hodí pro čtení a zápis přímo do DOM, zvláště pokud potřebujete změny před překreslením prohlížeče.
UseEffectEvent Hook
Hák useEffectEvent je háček React, který řeší problémy se závislostmi háku useEffect. Pokud znáte useEffect, víte, že jeho pole závislostí může být složité. Někdy musíte do pole závislostí vložit více hodnot, které jsou nezbytně nutné.
Například:
import React from "react";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};const onConnected = (url, loginOptions) => {
logConnection(`Connected to ${url}`, loginOptions);
};React.useEffect(() => {
const device = connect(url);
device.onConnected(() => {
onConnected(url);
});return () => {
device.disconnect();
};
}, [url, onConnected]);return <div></div>;
}export default App;
Tento kód ukazuje komponentu App, která spravuje připojení k externí službě. Funkce připojení se připojí k zadané adrese URL, zatímco funkce logConnection zaznamená podrobnosti o připojení. Nakonec funkce onConnected volá funkci logConnection, aby zaprotokolovala zprávu o úspěšném připojení, když se zařízení připojí.
Hák useEffect zavolá funkci connect a poté nastaví funkci zpětného volání onConnected, která se spustí, když zařízení spustí událost onConnected. Toto zpětné volání zaprotokoluje zprávu o připojení. Vrátí funkci čištění, která se aktivuje, když se komponenta odpojí. Tato funkce čištění je zodpovědná za odpojení zařízení.
Pole závislostí má proměnnou url a funkci onConnected. Komponenta App vytvoří funkci onConnected při každém renderu. To způsobí, že funkce useEffect poběží ve smyčce, která bude pokračovat v opětovném vykreslování komponenty aplikace.
Problém smyčky useEffect lze vyřešit několika způsoby. Nejúčinnějším způsobem, jak to udělat bez přidávání dalších zbytečných hodnot do pole závislostí, je použití háku useEffectEvent.
import React from "react";function App() {
const connect = (url) => {
};const logConnection = (message, loginOptions) => {
};const onConnected = React.useEffectEvent((url, loginOptions) => {
logConnection(`Connected to ${url}`, loginOptions);
});React.useEffect(() => {
const device = connect(url);
device.onConnected(() => {
onConnected(url);
});return () => {
device.disconnect();
};
}, [url]);return <div></div>;
}
export default App;
Zabalením funkce onConnected do háku useEffectEvent může háček useEffectEvent vždy číst nejnovější hodnoty parametrů zprávy a loginOptions, než je předá háku useEffect. To znamená, že useEffect se nemusí spoléhat na funkci onConnected nebo hodnoty, které jsou jí předány.
Háček useEffectEvent je užitečný, když chcete, aby váš useEffect závisel na konkrétní hodnotě, i když efekt spouští událost, která vyžaduje jiné hodnoty, které nechcete používat jako závislosti v useEffect.
Charakteristika použití EffectEvent Hook
- Nejlépe se hodí pro vedlejší účinky vyvolané událostmi.
- Háček useEffectEvent nefunguje s obslužnými rutinami událostí, jako jsou onClick, onChange atd.
Háček useEffectEvent je stále experimentální a není dostupný v hácích React verze 18.
Kdy použít který hák?
Každý z výše uvedených háčků pro načítání dat je vhodný pro různé situace:
- Načítání dat: UseEffect je vynikající volbou.
- Přímé manipulace DOM: Pokud potřebujete provést synchronní změny DOM před překreslením, zvolte useLayoutEffect.
- Odlehčené operace: Pro operace, u kterých nehrozí zablokování uživatelského rozhraní, můžete volně používat useEffect.
- Vedlejší efekty řízené událostmi: Použijte háček useEffectEvent k zabalení událostí a háček useEffect ke spuštění vedlejších efektů.
Efektivní řešení vedlejších účinků
Háčky React otevírají svět možností a pochopení rozdílu mezi háčky useEffect, useLayoutEffect a useEffectEvent může významně ovlivnit, jak zacházíte s vedlejšími efekty a manipulací s DOM. Je nezbytné vzít v úvahu specifické požadavky a důsledky těchto háků, aby byly uživatelsky přívětivé aplikace.