Komplexní průvodce zkoumající React Refs, se zaměřením na useRef a createRef. Zjistěte, jak a kdy je používat pro efektivní správu komponent a přístup k DOM v globálních aplikacích.
React Refs: Demystifikace useRef vs. createRef
V dynamickém světě vývoje Reactu je efektivní správa stavu komponent a interakce s Modellem Objektů Dokumentu (DOM) klíčová. React Refs poskytují mechanismus pro přímý přístup a manipulaci s prvky DOM nebo komponentami Reactu. Dvě primární metody pro vytváření Refs jsou useRef a createRef. Zatímco obě slouží k účelu vytváření Refs, liší se ve své implementaci a případech použití. Cílem této příručky je demystifikovat tyto dva přístupy a poskytnout jasnost o tom, kdy a jak efektivně využít každý z nich ve vašich React projektech, zejména při vývoji pro globální publikum.
Pochopení React Refs
Ref (zkratka pro referenci) je funkce Reactu, která vám umožňuje přistupovat přímo k uzlu DOM nebo komponentě Reactu. To je obzvláště užitečné, když potřebujete:
- Přímo manipulovat s prvkem DOM, například zaměřením na vstupní pole.
- Přistupovat k metodám nebo vlastnostem podřízené komponenty.
- Spravovat hodnoty, které přetrvávají napříč vykresleními, aniž by způsobovaly opětovné vykreslení (podobně jako proměnné instance v komponentách třídy).
Zatímco React podporuje deklarativní přístup, kde je UI spravováno prostřednictvím stavu a props, existují situace, kdy je přímá manipulace nezbytná. Refs poskytují způsob, jak překlenout propast mezi deklarativní povahou Reactu a imperativními operacemi DOM.
createRef: Přístup komponenty třídy
createRef je metoda poskytovaná Reactem. Používá se primárně v komponentách třídy k vytváření Refs. Pokaždé, když je komponenta třídy instancována, createRef vytvoří nový objekt Ref. To zajišťuje, že každá instance komponenty má svůj vlastní jedinečný Ref.
Syntaxe a použití
Chcete-li použít createRef, nejprve deklarujete Ref ve své komponentě třídy, typicky v konstruktoru. Poté připojíte Ref k prvku DOM nebo komponentě pomocí atributu ref.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
// Přístup k elementu DOM po připojení komponenty
this.myRef.current.focus();
}
render() {
return ;
}
}
V tomto příkladu je this.myRef vytvořeno pomocí React.createRef(). Poté je přiřazeno atributu ref vstupního elementu. Po připojení komponenty (v componentDidMount) můžete přistupovat ke skutečnému uzlu DOM pomocí this.myRef.current a provádět na něm operace (v tomto případě zaměření na vstup).
Příklad: Zaměření na vstupní pole
Pojďme se podívat na scénář, kde chcete automaticky zaměřit vstupní pole při připojení komponenty. Jedná se o běžný případ použití pro Refs, zejména ve formulářích nebo interaktivních prvcích.
class FocusInput extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return (
);
}
}
V tomto příkladu FocusInput zaměří vstupní pole okamžitě po připojení. To může zlepšit uživatelský zážitek tím, že nasměruje pozornost uživatele na vstupní prvek, jakmile je komponenta vykreslena.
Důležitá hlediska s createRef
- Pouze komponenty třídy:
createRefje navrženo pro použití v komponentách třídy. I když by to technicky mohlo fungovat ve funkčních komponentách, není to zamýšlené použití a může to vést k neočekávanému chování. - Nový Ref na každé instanci: Každá instance komponenty třídy dostane svůj vlastní
createRef. To je důležité pro udržení izolace mezi instancemi komponent.
useRef: Hook funkční komponenty
useRef je Hook, který byl představen v Reactu 16.8. Poskytuje způsob, jak vytvářet proměnné objekty Ref v rámci funkčních komponent. Na rozdíl od createRef, useRef vrací stejný objekt Ref pokaždé, když se komponenta vykreslí. Díky tomu je ideální pro uchovávání hodnot napříč vykresleními bez spouštění opětovných vykreslení.
Syntaxe a použití
Použití useRef je jednoduché. Voláte Hook useRef a předáváte počáteční hodnotu. Hook vrací objekt s vlastností .current, kterou pak můžete použít k přístupu a úpravě hodnoty.
import React, { useRef, useEffect } from 'react';
function MyFunctionalComponent() {
const myRef = useRef(null);
useEffect(() => {
// Přístup k elementu DOM po připojení komponenty
if (myRef.current) {
myRef.current.focus();
}
}, []);
return ;
}
V tomto příkladu useRef(null) vytvoří Ref s počáteční hodnotou null. Hook useEffect se používá k přístupu k elementu DOM po připojení komponenty. Vlastnost myRef.current obsahuje odkaz na vstupní prvek, což vám umožňuje jej zaměřit.
Příklad: Sledování předchozích hodnot prop
Jedním z výkonných případů použití pro useRef je sledování předchozí hodnoty prop. Vzhledem k tomu, že změny v Refs nespouštějí opětovné vykreslování, můžete je použít k ukládání hodnot, které chcete zachovat napříč vykresleními, aniž by to ovlivnilo UI.
import React, { useRef, useEffect } from 'react';
function PreviousValueComponent({ value }) {
const previousValue = useRef();
useEffect(() => {
previousValue.current = value;
}, [value]);
return (
Aktuální hodnota: {value}
Předchozí hodnota: {previousValue.current}
);
}
V tomto příkladu previousValue.current ukládá předchozí hodnotu prop value. Hook useEffect aktualizuje Ref vždy, když se změní prop value. To vám umožňuje porovnat aktuální a předchozí hodnoty, což může být užitečné pro detekci změn nebo implementaci animací.
Důležitá hlediska s useRef
- Pouze funkční komponenty:
useRefje Hook a lze jej použít pouze ve funkčních komponentách nebo vlastních Hookech. - Přetrvává napříč vykresleními: Hook
useRefvrací stejný objekt Ref při každém vykreslení. To je klíčové pro jeho schopnost uchovávat hodnoty bez spouštění opětovných vykreslení. - Proměnná vlastnost
.current: Můžete přímo upravit vlastnost.currentobjektu Ref. - Počáteční hodnota: Můžete poskytnout počáteční hodnotu pro
useRef. Tato hodnota bude přiřazena vlastnosti.currentpři prvním vykreslení komponenty. - Žádné opětovné vykreslování: Úprava vlastnosti
.currentRefu nezpůsobuje opětovné vykreslení komponenty.
useRef vs. createRef: Detailní srovnání
Nyní, když jsme prozkoumali useRef i createRef jednotlivě, porovnejme je vedle sebe, abychom zdůraznili jejich klíčové rozdíly a kdy zvolit jeden před druhým.
| Funkce | useRef |
createRef |
|---|---|---|
| Typ komponenty | Funkční komponenty | Komponenty třídy |
| Hook nebo metoda | Hook | Metoda |
| Instance Ref | Vrací stejný objekt Ref při každém vykreslení | Vytvoří nový objekt Ref na každé instanci komponenty |
| Případy použití |
|
|
Výběr správného Ref: Průvodce rozhodováním
Zde je jednoduchý průvodce, který vám pomůže vybrat mezi useRef a createRef:
- Pracujete s funkční komponentou? Použijte
useRef. - Pracujete s komponentou třídy? Použijte
createRef. - Potřebujete uchovat hodnotu napříč vykresleními bez spouštění opětovných vykreslení? Použijte
useRef. - Potřebujete sledovat předchozí hodnotu prop? Použijte
useRef.
Kromě manipulace s DOM: Pokročilé případy použití pro Refs
Zatímco přístup k prvkům DOM a manipulace s nimi je primární případ použití pro Refs, nabízejí možnosti nad rámec této základní funkčnosti. Pojďme prozkoumat některé pokročilé scénáře, kde mohou být Refs obzvláště užitečné.
1. Přístup k metodám podřízené komponenty
Refs lze použít pro přístup k metodám definovaným v podřízených komponentách. To umožňuje nadřazené komponentě spouštět akce nebo získávat data přímo od svých podřízených. Tento přístup je obzvláště užitečný, když potřebujete jemnou kontrolu nad podřízenými komponentami.
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
handleClick = () => {
// Volání metody na podřízené komponentě
this.childRef.current.doSomething();
};
render() {
return (
V tomto příkladu ParentComponent používá Ref k přístupu k ChildComponent a volání její metody doSomething.
2. Správa zaměření a výběru
Refs jsou neocenitelné pro správu zaměření a výběru v rámci vstupních polí a dalších interaktivních prvků. To je zásadní pro vytváření přístupných a uživatelsky přívětivých rozhraní.
import React, { useRef, useEffect } from 'react';
function FocusOnMount() {
const inputRef = useRef(null);
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
inputRef.current.select(); // Vybrat text ve vstupu
}
}, []);
return ;
}
Tento příklad zaměřuje vstup a vybírá jeho text, jakmile se komponenta připojí.
3. Animace prvků
Refs lze použít ve spojení s animačními knihovnami (jako je GreenSock nebo Framer Motion) k přímé manipulaci s DOM a vytváření složitých animací. To umožňuje jemnou kontrolu nad animačními sekvencemi.
Příklad s použitím vanilkového JavaScriptu pro jednoduchost:
import React, { useRef, useEffect } from 'react';
function AnimatedBox() {
const boxRef = useRef(null);
useEffect(() => {
const box = boxRef.current;
if (box) {
// Jednoduchá animace: přesunutí rámečku doprava
box.animate(
[
{ transform: 'translateX(0)' },
{ transform: 'translateX(100px)' },
],
{
duration: 1000, // 1 sekunda
iterations: Infinity, // Opakovat navždy
direction: 'alternate',
}
);
}
}, []);
return ;
}
Tento příklad používá Web Animations API k animaci jednoduchého rámečku, který se pohybuje tam a zpět vodorovně.
Osvědčené postupy pro používání React Refs v globálních aplikacích
Při vývoji aplikací React pro globální publikum je důležité zvážit, jak Refs interagují s internacionalizací (i18n) a lokalizací (l10n). Zde jsou některé osvědčené postupy:
1. Přístupnost (A11y)
Ujistěte se, že vaše použití Refs nemá negativní dopad na přístupnost. Například, při programovém zaměření prvků zvažte pořadí zaměření uživatele a zda je změna zaměření vhodná pro čtečky obrazovky a uživatele klávesnice.
import React, { useRef, useEffect } from 'react';
function AccessibleFocus() {
const buttonRef = useRef(null);
useEffect(() => {
const button = buttonRef.current;
if (button) {
// Zaměření pouze v případě, že tlačítko již není zaměřeno uživatelem
if (document.activeElement !== button) {
button.focus();
}
}
}, []);
return ;
}
2. Internacionalizovaná vstupní pole
Při práci se vstupními poli mějte na paměti různé vstupní metody a znakové sady používané v různých jazycích. Ujistěte se, že vaše manipulace založené na Ref (např. výběr, poloha kurzoru) fungují správně napříč různými typy vstupu a národními prostředími. Důkladně otestujte své komponenty s různými jazyky a vstupními metodami.
3. Rozvržení zprava doleva (RTL)
Pokud vaše aplikace podporuje jazyky RTL (např. arabština, hebrejština), ujistěte se, že vaše manipulace s DOM pomocí Refs zohledňují obrácené rozvržení. Například při animaci prvků zvažte obrácení směru animace pro jazyky RTL.
4. Zvážení výkonu
Zatímco Refs poskytují výkonný způsob interakce s DOM, nadměrné používání může vést k problémům s výkonem. Přímá manipulace s DOM obchází virtuální DOM Reactu a proces usmiřování, což může vést k nesrovnalostem a pomalejším aktualizacím. Používejte Refs uvážlivě a pouze v případě potřeby.
Závěr
React Refs, konkrétně useRef a createRef, jsou základní nástroje pro vývojáře Reactu. Pochopení nuancí každého přístupu a toho, kdy je efektivně aplikovat, je zásadní pro vytváření robustních a výkonných aplikací. createRef zůstává standardem pro správu Refs v rámci komponent třídy a zajišťuje, že každá instance má svůj jedinečný Ref. useRef, se svou trvalou povahou napříč vykresleními, je ideální pro funkční komponenty a nabízí způsob, jak spravovat prvky DOM a zachovávat hodnoty bez spouštění zbytečných opětovných vykreslení. Využitím těchto nástrojů moudře můžete vylepšit funkčnost a uživatelskou zkušenost svých aplikací React, a to pro globální publikum s přístupnými a výkonnými rozhraními.
Jak se React neustále vyvíjí, zvládnutí těchto základních konceptů vám umožní vytvářet inovativní a uživatelsky přívětivé webové zážitky, které překračují geografické a kulturní hranice. Nezapomeňte upřednostňovat přístupnost, internacionalizaci a výkon, abyste dodali skutečně globální aplikace.