A React createRef mesterfokon: Átfogó útmutató a modern fejlesztéshez

A front-end fejlesztés dinamikus világában a React egy erőteljes és sokoldalú JavaScript könyvtárként tűnik ki a felhasználói felületek építésében. Az egyik kulcsfontosságú funkció, amely lehetővé teszi a React fejlesztők számára, hogy közvetlenül interakcióba lépjenek a Dokumentum Objektum Modellel (DOM) és kezeljék a komponensek viselkedését, a createRef API. Ez az útmutató a createRef bonyolultságába merül el, átfogó megértést nyújtva annak használatáról, előnyeiről és a bevált gyakorlatokról a fejlesztők számára világszerte.

A React ref-ek megértése

Mielőtt belemerülnénk a createRef-be, elengedhetetlen megérteni a ref-ek koncepcióját a Reactben. Egy ref módot biztosít a render metódusban létrehozott DOM csomópontok vagy React elemek elérésére. Ez a hozzáférés lehetővé teszi olyan műveletek végrehajtását, mint egy beviteli mező fókuszálása, animációk indítása vagy egy elem méretének mérése.

A hagyományos JavaScript DOM manipulációval ellentétben a React ref-ek kontrollált és hatékony módot biztosítanak a DOM-mal való interakcióra. A React virtuális DOM-ja elvonatkoztatja a közvetlen DOM manipuláció számos bonyolultságát, de a ref-ek hidat képeznek, amikor a közvetlen hozzáférés szükséges.

A createRef bemutatása

A createRef egy React által biztosított funkció, amely egy ref objektumot hoz létre. Ennek a ref objektumnak van egy current tulajdonsága, amely azt a DOM csomópontot vagy React komponens példányt tárolja, amelyhez a ref csatolva van. A createRef API a React 16.3 részeként került bevezetésre, és ez az ajánlott módja a ref-ek létrehozásának osztálykomponensekben. Funkcionális komponensek esetében a useRef (egy React Hook) nyújt hasonló funkcionalitást.

Ref objektum létrehozása

Egy ref objektum létrehozásához egyszerűen hívja meg a createRef() funkciót:

            import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 }

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

Ebben a példában a this.myRef egy ref objektum, amely a beviteli elem ref attribútumához van rendelve. A this.myRef current tulajdonsága a komponens csatolása (mount) után fogja tartalmazni a referenciát a beviteli elemre.

A DOM csomópont elérése

Miután a komponens csatolásra került, a DOM csomópontot a ref objektum current tulajdonságán keresztül érheti el:

            import React from 'react';

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = React.createRef();
 this.focusInput = this.focusInput.bind(this);
 }

 componentDidMount() {
 this.focusInput();
 }

 focusInput() {
 this.myRef.current.focus();
 }

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

Ebben a példában a focusInput metódus a this.myRef.current segítségével éri el a beviteli elemet és hívja meg annak focus() metódusát. Ez automatikusan fókuszba helyezi a beviteli mezőt, amikor a komponens csatolásra kerül.

A createRef felhasználási esetei

A createRef értékes számos olyan esetben, ahol közvetlen DOM manipulációra vagy komponens példányokhoz való hozzáférésre van szükség. Íme néhány gyakori felhasználási eset:

• Szöveges beviteli mezők fókuszálása: Ahogy az előző példában is láthattuk, a createRef-et gyakran használják a szöveges beviteli mezők programozott fókuszálására. Ez hasznos a felhasználói élmény javítására, például egy űrlap első beviteli mezőjének automatikus fókuszálásával, vagy egy adott művelet utáni fókuszálással.
• Média lejátszás kezelése: A ref-ek használhatók médiaelemek, mint például a <video> vagy <audio> vezérlésére. A ref-ek segítségével lejátszhatja, szüneteltetheti vagy beállíthatja a médiaelemek hangerejét. Például:

              import React from 'react';
  
  class VideoPlayer extends React.Component {
   constructor(props) {
   super(props);
   this.videoRef = React.createRef();
   this.playVideo = this.playVideo.bind(this);
   }
  
   playVideo() {
   this.videoRef.current.play();
   }
  
   render() {
   return (
   
  
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

• Animációk indítása: A ref-ekkel elérhetők a DOM elemek és animációkat indíthatunk JavaScript vagy CSS segítségével. Ez lehetővé teszi összetett és interaktív animációk létrehozását, amelyek a felhasználói műveletekre reagálnak.

              import React from 'react';
  
  class AnimatedBox extends React.Component {
   constructor(props) {
   super(props);
   this.boxRef = React.createRef();
   this.animate = this.animate.bind(this);
   }
  
   animate() {
   const box = this.boxRef.current;
   box.classList.add('animate');
   }
  
   render() {
   return (
   
  
   
  
   Animate
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  Ebben a példában a gombra kattintva az animate osztály hozzáadódik a doboz elemhez, ami egy CSS animációt indít el.

• Elem méretének és pozíciójának mérése: A ref-ek hasznosak a DOM elemek méretének és pozíciójának lekérdezésére. Ez az információ felhasználható elrendezési számításokhoz, dinamikus stílusozáshoz vagy interaktív elemek létrehozásához.

              import React from 'react';
  
  class SizeReporter extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   this.state = { width: 0, height: 0 };
   this.reportSize = this.reportSize.bind(this);
   }
  
   componentDidMount() {
   this.reportSize();
   }
  
   reportSize() {
   const element = this.elementRef.current;
   this.setState({ width: element.offsetWidth, height: element.offsetHeight });
   }
  
   render() {
   return (
   
  
   
  
   
  Width: {this.state.width}px, Height: {this.state.height}px
   
   );
   }
  }
  
              
  
                
                  Copy
                
              
            

  Ez a komponens a div szélességét és magasságát jelenti, miután csatolásra került.

• Integráció harmadik féltől származó könyvtárakkal: A ref-eket gyakran használják React komponensek integrálására olyan harmadik féltől származó könyvtárakkal, amelyek közvetlen DOM hozzáférést igényelnek. Például egy ref segítségével elérhet egy DOM elemet, és inicializálhat rajta egy jQuery bővítményt.

              import React from 'react';
  import $ from 'jquery';
  
  class MyComponent extends React.Component {
   constructor(props) {
   super(props);
   this.elementRef = React.createRef();
   }
  
   componentDidMount() {
   $(this.elementRef.current).plugin(); // Initialize jQuery plugin
   }
  
   render() {
   return 
  ;
   }
  }
  
              
  
                
                  Copy
                
              
            

createRef vs. Visszahívásos (Callback) Ref-ek

A createRef bevezetése előtt a visszahívásos (callback) ref-ek voltak a gyakori módjai a DOM csomópontok elérésének a Reactben. Míg a visszahívásos ref-ek továbbra is érvényesek, a createRef egy egyszerűbb és kevésbé bőbeszédű megközelítést kínál, különösen az osztálykomponensekben.

A visszahívásos ref egy függvény, amelyet a React a DOM csomóponttal vagy a komponens példánnyal hív meg argumentumként. Ezt a függvényt rendeli hozzá egy elem ref attribútumához:

            class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = null;
 this.setRef = element => {
 this.myRef = element;
 };
 }

 componentDidMount() {
 if (this.myRef) {
 this.myRef.focus();
 }
 }

 render() {
 return ;
 }
}

            

              
                Copy
              
            
          

Bár ez a megközelítés működik, kezelése bonyolultabb lehet, különösen több ref esetén. A createRef leegyszerűsíti ezt a folyamatot egy dedikált ref objektum biztosításával.

Főbb különbségek:

• Olvashatóság: A createRef általában olvashatóbbnak és könnyebben érthetőnek számít.
• Konzisztencia: A createRef konzisztens módot biztosít a ref-ek létrehozására és elérésére.
• Teljesítmény: Bizonyos esetekben a visszahívásos ref-ek felesleges újrarendereléseket okozhatnak, mivel a visszahívó függvény minden rendereléskor egy új függvény. A createRef elkerüli ezt a problémát.

Bevált gyakorlatok a createRef használatához

Az optimális teljesítmény és karbantarthatóság érdekében kövesse ezeket a bevált gyakorlatokat a createRef használatakor:

• Használja a createRef-et osztálykomponensekben: A createRef-et osztálykomponensekben való használatra tervezték. Funkcionális komponensekhez használja a useRef Hookot.
• Kerülje a ref-ek túlzott használatát: A ref-eket takarékosan kell használni. A ref-ek túlzott használata nehezen karbantartható és érthető kódhoz vezethet. Amikor csak lehetséges, részesítse előnyben a deklaratív megközelítéseket.
• Null ellenőrzések: Mindig ellenőrizze, hogy a ref current tulajdonsága null-e, mielőtt hozzáférne, különösen a componentDidMount életciklus metódusban. Lehet, hogy a DOM csomópont nem érhető el azonnal a komponens csatolása után.

              componentDidMount() {
   if (this.myRef.current) {
   this.myRef.current.focus();
   }
  }
  
              
  
                
                  Copy
                
              
            

• Kerülje a DOM közvetlen módosítását: Bár a ref-ek hozzáférést biztosítanak a DOM-hoz, kerülje a DOM közvetlen módosítását, hacsak nem feltétlenül szükséges. A React virtuális DOM-ja hatékony módot biztosít a felhasználói felület frissítésére, és a közvetlen DOM manipuláció zavarhatja a React renderelési folyamatát.
• Takarítsa fel a ref-eket, ha szükséges: Bizonyos esetekben szükség lehet a ref-ek "eltakarítására", amikor egy komponenst lecsatolnak (unmount). Ez különösen fontos, amikor olyan harmadik féltől származó könyvtárakkal dolgozik, amelyek referenciákat tarthatnak a DOM elemekre.

A createRef funkcionális komponensekben Hookokkal

Bár a createRef-et elsősorban osztálykomponensekben használják, a funkcionális komponensek hasonló funkcionalitást érhetnek el a useRef Hook segítségével. A useRef egy módosítható ref objektumot ad vissza, amelynek .current tulajdonsága a megadott argumentummal (initialValue) inicializálódik. A visszaadott objektum a komponens teljes élettartama alatt megmarad.

            import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
 const inputRef = useRef(null);

 useEffect(() => {
 if (inputRef.current) {
 inputRef.current.focus();
 }
 }, []);

 return ;
}

            

              
                Copy
              
            
          

Ebben a példában a useRef(null) létrehoz egy ref objektumot, amely az inputRef változóhoz van rendelve. A useEffect Hookot használjuk a beviteli mező fókuszálására a komponens renderelése után. Az üres függőségi tömb [] biztosítja, hogy az effekt csak egyszer fusson le, a kezdeti renderelés után.

Haladó felhasználási esetek és megfontolások

Az alapvető felhasználási eseteken túl a createRef haladóbb forgatókönyvekben is alkalmazható:

• Ref-ek továbbítása (Forwarding Refs): A React biztosít egy React.forwardRef nevű mechanizmust, amely lehetővé teszi egy ref továbbítását egy komponensen keresztül annak egyik gyermekéhez. Ez akkor hasznos, ha egy szülő komponensből kell elérni egy DOM csomópontot egy gyermek komponensen belül.

              import React, { forwardRef } from 'react';
  
  const FancyInput = forwardRef((props, ref) => (
   
  ));
  
  class ParentComponent extends React.Component {
   constructor(props) {
   super(props);
   this.inputRef = React.createRef();
   }
  
   componentDidMount() {
   this.inputRef.current.focus();
   }
  
   render() {
   return ;
   }
  }
  
              
  
                
                  Copy
                
              
            

  Ebben a példában a FancyInput komponens a forwardRef segítségével továbbítja a ref-et a mögöttes input elemnek. A ParentComponent ezután hozzáférhet és manipulálhatja az input elemet a ref-en keresztül.

• Magasabb rendű komponensek (HOC-ok): Magasabb rendű komponensek (HOC-ok) használatakor előfordulhat, hogy óvatosan kell kezelni a ref-eket. Ha a HOC egy olyan komponenst burkol, amely ref-eket használ, biztosítania kell a ref-ek megfelelő továbbítását.

              import React, { forwardRef } from 'react';
  
  function withRef(WrappedComponent) {
   const WithRef = forwardRef((props, ref) => {
   return ;
   });
   WithRef.displayName = `withRef(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
   return WithRef;
  }
  
  class MyComponent extends React.Component {
   render() {
   return 
  My Component
  ;
   }
  }
  
  const EnhancedComponent = withRef(MyComponent);
  
              
  
                
                  Copy
                
              
            

• Szerveroldali renderelés (SSR): Szerveroldali renderelés használatakor vegye figyelembe, hogy a ref-ek nem biztos, hogy elérhetők a kezdeti renderelés során a szerveren. Ennek az az oka, hogy a DOM nem áll rendelkezésre a szerveren. A ref-eket csak azután szabad elérni, hogy a komponenst csatolták a kliensen.

Összegzés

A createRef egy erőteljes eszköz a DOM csomópontok és komponens példányok elérésére a Reactben. Használatának, előnyeinek és bevált gyakorlatainak megértésével hatékonyan kihasználhatja a ref-eket interaktívabb és dinamikusabb felhasználói felületek építéséhez. Legyen szó szöveges beviteli mezők fókuszálásáról, média lejátszás kezeléséről vagy harmadik féltől származó könyvtárakkal való integrációról, a createRef kontrollált és hatékony módot biztosít a DOM-mal való interakcióra.

Ne feledje, hogy a createRef-et megfontoltan használja, és amikor csak lehetséges, részesítse előnyben a deklaratív megközelítéseket. Az ebben az útmutatóban vázolt irányelvek követésével biztosíthatja, hogy React alkalmazásai teljesítőképesek, karbantarthatók és skálázhatók legyenek.

Ahogy folytatja útját a Reacttel, a createRef elsajátítása kétségtelenül értékes készségnek bizonyul majd a fejlesztői eszköztárában. Kísérletezzen tovább, fedezzen fel különböző felhasználási eseteket, és finomítsa tudását erről a lényeges React funkcióról.