React createRef apguve: visaptveroša rokasgrāmata mūsdienu izstrādei

Dinamiskajā front-end izstrādes pasaulē React izceļas kā jaudīga un daudzpusīga JavaScript bibliotēka lietotāju saskarņu veidošanai. Viena no galvenajām funkcijām, kas ļauj React izstrādātājiem tieši mijiedarboties ar dokumenta objekta modeli (DOM) un pārvaldīt komponentu uzvedību, ir createRef API. Šī rokasgrāmata iedziļinās createRef sarežģītībā, sniedzot visaptverošu izpratni par tās lietošanu, priekšrocībām un labāko praksi izstrādātājiem visā pasaulē.

Izpratne par React Refs

Pirms iedziļināties createRef, ir svarīgi izprast refs jēdzienu React. Ref nodrošina veidu, kā piekļūt DOM mezgliem vai React elementiem, kas izveidoti renderēšanas metodē. Šī piekļuve ļauj veikt tādas darbības kā ievades lauka fokusēšana, animāciju iedarbināšana vai elementa izmēra mērīšana.

Atšķirībā no tradicionālās JavaScript DOM manipulācijas, refs React nodrošina kontrolētu un efektīvu veidu, kā mijiedarboties ar DOM. React virtuālais DOM abstrahē daudzas tiešās DOM manipulācijas sarežģītības, bet refs piedāvā tiltu, kad nepieciešama tieša piekļuve.

Iepazīstinām ar createRef

createRef ir React nodrošināta funkcija, kas izveido ref objektu. Šim ref objektam ir current īpašība, kurā glabājas DOM mezgls vai React komponenta instance, kurai ref ir pievienots. createRef API tika ieviests kā daļa no React 16.3 un ir ieteicamais veids, kā veidot refs klašu komponentos. Funkcionālajiem komponentiem useRef (React Hook) nodrošina līdzīgu funkcionalitāti.

Ref objekta izveide

Lai izveidotu ref objektu, vienkārši izsauciet createRef() funkciju:

            import React from 'react';

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

 render() {
 return (
 
 );
 }
}

            

              
                Copy
              
            
          

Šajā piemērā this.myRef ir ref objekts, kas tiek piešķirts ievades elementa ref atribūtam. this.myRef current īpašība saturēs atsauci uz ievades elementu pēc komponenta pievienošanas (mount).

Piekļuve DOM mezglam

Kad komponents ir pievienots (mounted), jūs varat piekļūt DOM mezglam, izmantojot ref objekta current īpašību:

            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
              
            
          

Šajā piemērā focusInput metode izmanto this.myRef.current, lai piekļūtu ievades elementam un izsauktu tā focus() metodi. Tas automātiski fokusēs ievades lauku, kad komponents tiks pievienots.

createRef pielietojuma gadījumi

createRef ir vērtīgs dažādos scenārijos, kur nepieciešama tieša DOM manipulācija vai piekļuve komponentu instancēm. Šeit ir daži izplatīti pielietojuma gadījumi:

• Teksta ievades lauku fokusēšana: Kā parādīts iepriekšējā piemērā, createRef parasti izmanto, lai programmatiski fokusētu teksta ievades laukus. Tas ir noderīgi, lai uzlabotu lietotāja pieredzi, automātiski fokusējot pirmo ievades lauku formā vai fokusējot ievades lauku pēc konkrētas darbības.
• Multivides atskaņošanas pārvaldība: Refs var izmantot, lai kontrolētu multivides elementus, piemēram, <video> vai <audio>. Varat izmantot refs, lai atskaņotu, apturētu vai pielāgotu multivides elementu skaļumu. Piemēram:

              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āciju iedarbināšana: Refs var izmantot, lai piekļūtu DOM elementiem un iedarbinātu animācijas, izmantojot JavaScript vai CSS. Tas ļauj jums izveidot sarežģītas un interaktīvas animācijas, kas reaģē uz lietotāja darbībām.

              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
                
              
            

  Šajā piemērā, noklikšķinot uz pogas, lodziņa elementam tiks pievienota animate klase, iedarbinot CSS animāciju.

• Elementa izmēra un pozīcijas mērīšana: Refs ir noderīgi, lai iegūtu DOM elementu izmēru un pozīciju. Šo informāciju var izmantot izkārtojuma aprēķiniem, dinamiskai stilizācijai vai interaktīvu elementu veidošanai.

              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
                
              
            

  Šis komponents ziņo par div platumu un augstumu pēc tā pievienošanas.

• Integrācija ar trešo pušu bibliotēkām: Refs bieži tiek izmantoti, lai integrētu React komponentus ar trešo pušu bibliotēkām, kurām nepieciešama tieša DOM piekļuve. Piemēram, jūs varētu izmantot ref, lai piekļūtu DOM elementam un inicializētu jQuery spraudni uz tā.

              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 salīdzinājumā ar Callback Refs

Pirms createRef ieviešanas, atzvanu refs (callback refs) bija izplatīts veids, kā piekļūt DOM mezgliem React. Lai gan atzvanu refs joprojām ir derīgi, createRef piedāvā vienkāršāku un mazāk apjomīgu pieeju, īpaši klašu komponentos.

Atzvanu ref ir funkcija, kuru React izsauc ar DOM mezglu vai komponenta instanci kā argumentu. Jūs piešķirat šo funkciju elementa ref atribūtam:

            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
              
            
          

Lai gan šī pieeja darbojas, tā var būt sarežģītāk pārvaldāma, īpaši, ja jātiek galā ar vairākiem refs. createRef vienkāršo šo procesu, nodrošinot speciālu ref objektu.

Galvenās atšķirības:

• Lasāmība: createRef parasti tiek uzskatīts par lasāmāku un vieglāk saprotamu.
• Konsekvence: createRef nodrošina konsekventu veidu, kā izveidot un piekļūt refs.
• Veiktspēja: Dažos gadījumos atzvanu refs var izraisīt nevajadzīgas atkārtotas renderēšanas, jo atzvanu funkcija ir jauna funkcija katrā renderēšanā. createRef izvairās no šīs problēmas.

Labākā prakse createRef lietošanai

Lai nodrošinātu optimālu veiktspēju un uzturamību, ievērojiet šīs labākās prakses, lietojot createRef:

• Lietojiet createRef klašu komponentos: createRef ir paredzēts lietošanai klašu komponentos. Funkcionālajiem komponentiem izmantojiet useRef Hook.
• Izvairieties no pārmērīgas refs lietošanas: Refs jālieto taupīgi. Pārmērīga refs lietošana var novest pie koda, kuru ir grūti uzturēt un saprast. Kad vien iespējams, dodiet priekšroku deklaratīvām pieejām.
• Null pārbaudes: Vienmēr pārbaudiet, vai ref current īpašība nav null pirms piekļuves tai, īpaši componentDidMount dzīves cikla metodē. DOM mezgls var nebūt pieejams uzreiz pēc komponenta pievienošanas.

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

• Izvairieties no tiešas DOM modificēšanas: Lai gan refs nodrošina piekļuvi DOM, izvairieties no tiešas DOM modificēšanas, ja vien tas nav absolūti nepieciešams. React virtuālais DOM nodrošina efektīvu veidu, kā atjaunināt lietotāja saskarni, un tieša DOM manipulācija var traucēt React renderēšanas procesu.
• Notīriet refs, kad nepieciešams: Dažos gadījumos jums var būt nepieciešams notīrīt refs, kad komponents tiek atvienots (unmounted). Tas ir īpaši svarīgi, strādājot ar trešo pušu bibliotēkām, kas var turēt atsauces uz DOM elementiem.

createRef funkcionālajos komponentos ar Hooks

Lai gan createRef galvenokārt tiek izmantots klašu komponentos, funkcionālie komponenti var sasniegt līdzīgu funkcionalitāti, izmantojot useRef Hook. useRef atgriež maināmu ref objektu, kura .current īpašība tiek inicializēta ar nodoto argumentu (initialValue). Atgrieztais objekts saglabāsies visu komponenta dzīves ciklu.

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

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

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

 return ;
}

            

              
                Copy
              
            
          

Šajā piemērā useRef(null) izveido ref objektu, kas tiek piešķirts mainīgajam inputRef. useEffect Hook tiek izmantots, lai fokusētu ievades lauku pēc komponenta renderēšanas. Tukšais atkarību masīvs [] nodrošina, ka efekts tiek izpildīts tikai vienu reizi, pēc sākotnējās renderēšanas.

Padziļināti pielietojuma gadījumi un apsvērumi

Papildus pamata pielietojuma gadījumiem, createRef var izmantot arī sarežģītākos scenārijos:

• Refs pārsūtīšana (Forwarding): React nodrošina mehānismu ar nosaukumu React.forwardRef, kas ļauj jums pārsūtīt ref caur komponentu uz vienu no tā bērniem. Tas ir noderīgi, ja jums nepieciešams piekļūt DOM mezglam bērna komponentā no vecākkomponenta.

              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
                
              
            

  Šajā piemērā komponents FancyInput izmanto forwardRef, lai pārsūtītu ref uz pamatā esošo ievades elementu. ParentComponent tad var piekļūt un manipulēt ar ievades elementu, izmantojot ref.

• Augstākas kārtas komponenti (HOCs): Lietojot augstākas kārtas komponentus (HOCs), jums var būt nepieciešams rūpīgi rīkoties ar refs. Ja HOC ietin komponentu, kas izmanto refs, jums jāpārliecinās, ka refs tiek pareizi pārsūtīti.

              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
                
              
            

• Servera puses renderēšana (SSR): Lietojot servera puses renderēšanu, ņemiet vērā, ka refs var nebūt pieejami sākotnējās renderēšanas laikā serverī. Tas ir tāpēc, ka DOM nav pieejams serverī. Jums vajadzētu piekļūt refs tikai pēc tam, kad komponents ir pievienots klientā.

Noslēgums

createRef ir jaudīgs rīks, lai piekļūtu DOM mezgliem un komponentu instancēm React. Izprotot tā lietošanu, priekšrocības un labāko praksi, jūs varat efektīvi izmantot refs, lai veidotu interaktīvākas un dinamiskākas lietotāju saskarnes. Neatkarīgi no tā, vai jūs fokusējat teksta ievades laukus, pārvaldāt multivides atskaņošanu vai integrējaties ar trešo pušu bibliotēkām, createRef nodrošina kontrolētu un efektīvu veidu, kā mijiedarboties ar DOM.

Atcerieties lietot createRef apdomīgi, dodot priekšroku deklaratīvām pieejām, kad vien iespējams. Ievērojot šajā rokasgrāmatā izklāstītās vadlīnijas, jūs varat nodrošināt, ka jūsu React lietojumprogrammas ir veiktspējīgas, uzturamas un mērogojamas.

Turpinot savu ceļojumu ar React, createRef apguve neapšaubāmi izrādīsies vērtīga prasme jūsu izstrādes rīku komplektā. Turpiniet eksperimentēt, pētīt dažādus pielietojuma gadījumus un pilnveidot savu izpratni par šo būtisko React funkciju.