Reacti ref'i tagasikutse ahel: Viidete uuendamise järjestuse lahtiseletamine

Reactis pakuvad viited (ref'id) võimalust pääseda ligi DOM-sõlmedele või Reacti elementidele, mis on loodud renderdamismeetodis. Kuigi lihtne ref'ide kasutamine on otsekohene, avab ref'i tagasikutse muster võimsama kontrolli viidete haldamise üle. See artikkel süveneb Reacti ref'i tagasikutse ahela peensustesse, keskendudes viidete uuendamise järjestusele ja selle tõhusale ärakasutamisele.

Mis on Reacti ref'id?

Ref'id on mehhanism, mis võimaldab Reacti komponendi sees otse DOM-sõlmele ligi pääseda. Ref'ide loomiseks ja kasutamiseks on mitu viisi:

• Sõne-ref'id (pärand): Seda meetodit ei soovitata võimalike probleemide tõttu sõne-ref'ide lahendamisel.
• `React.createRef()`: Kaasaegne lähenemine, mis loob konkreetse komponendi eksemplariga seotud ref-objekti.
• Ref'i tagasikutsed: Kõige paindlikum lähenemine, mis võimaldab teil määratleda funktsiooni, mille React kutsub välja DOM-elemendi või komponendi eksemplariga kui selle argumendiga. Seda funktsiooni kutsutakse komponendi paigaldamisel, eemaldamisel ja potentsiaalselt uuenduste ajal.

See artikkel keskendub ref'i tagasikutsetele, kuna need pakuvad kõige rohkem kontrolli ja paindlikkust.

Ref'i tagasikutsete mõistmine

Ref'i tagasikutse on funktsioon, mille React kutsub välja ref'i määramiseks või tühistamiseks. See funktsioon saab argumendina DOM-elemendi või komponendi eksemplari. Maagia peitub selles, millal ja mitu korda React seda funktsiooni komponendi elutsükli jooksul kutsub.

Põhisüntaks:

            
<input type="text" ref={node => this.inputElement = node} />

            

              
                Copy
              
            
          

Selles näites on `node` sisendvälja tegelik DOM-element. React kutsub seda funktsiooni komponendi paigaldamisel ja eemaldamisel. Uurime täielikku järjestust.

Reacti ref'i tagasikutse ahel: Viidete uuendamise järjestus

Põhikontseptsioon, mida me uurime, on sündmuste jada, mis toimub ref'i tagasikutse kasutamisel. See jada hõlmab paigaldamist, eemaldamist ja potentsiaalseid uuendusi. Selle järjestuse mõistmine on ülioluline levinud lõksude vältimiseks ja ref'i tagasikutsete võimsuse maksimeerimiseks.

1. Esmakordne paigaldamine (Mount)

Kui ref'i tagasikutsega komponent esmakordselt paigaldatakse, käivitab React ref'i tagasikutse funktsiooni, andes argumendina kaasa DOM-elemendi. See võimaldab teil salvestada viite DOM-elemendile oma komponendi sees.

Näide:

            
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = null; // Initsialiseeri ref
 this.setTextInputRef = element => {
 this.myRef = element;
 };
 this.focusTextInput = () => {
 if (this.myRef) {
 this.myRef.focus();
 }
 };
 }

 componentDidMount() {
 this.focusTextInput(); // Fookusta sisendväli komponendi paigaldamisel
 }

 render() {
 return (
  <input
 type="text"
 ref={this.setTextInputRef}
 defaultValue="Tere, maailm!"
 />
 );
 }
}

            

              
                Copy
              
            
          

Selles näites, kui `MyComponent` paigaldatakse, kutsub React välja `this.setTextInputRef` koos sisendi DOM-elemendiga. Seejärel fookustatakse sisend.

2. Uuendused

Siin tuleb esile ref'i tagasikutsete keerukus (ja võimsus). Ref'i tagasikutse käivitatakse uuesti uuenduste ajal, kui tagasikutse funktsioon ise muutub. See võib juhtuda, kui edastate ref-prop'ile uue reasisese funktsiooni.

Olulised kaalutlused:

• Reasisesed funktsioonid renderdamisel: Vältige ref'i tagasikutse defineerimist reasiseselt `render` meetodis (nt `ref={node => this.inputElement = node}`). See loob igal renderdamisel uue funktsiooni, mis paneb Reacti kutsuma tagasikutset kaks korda: esmalt `null` väärtusega ja seejärel uuesti DOM-elemendiga. See on sellepärast, et React näeb igal renderdamisel erinevat funktsiooni ja käivitab uuenduse selle muudatuse kajastamiseks. See võib põhjustada jõudlusprobleeme ja ootamatut käitumist.
• Stabiilsed tagasikutse viited: Veenduge, et ref'i tagasikutse funktsioon oleks stabiilne. Siduge funktsioon konstruktoris, kasutage klassi omadusega noolfunktsiooni või kasutage `useCallback` hook'i (funktsionaalsetes komponentides), et vältida tarbetuid uuesti renderdamisi ja ref'i tagasikutsete käivitamisi.

Näide valest kasutusest (reasisesest funktsioonist):

            
class MyComponent extends React.Component {
 render() {
 return (
  <input type="text" ref={node => this.inputElement = node} />  <-- PROBLEEM: Reasisese funktsioon luuakse igal renderdamisel uuesti!
 );
 }
}

            

              
                Copy
              
            
          

Selle tulemusena kutsutakse ref'i tagasikutset igal renderdamisel kaks korda, esmalt `null` väärtusega (vana ref'i tühjendamiseks) ja seejärel DOM-elemendiga.

Näide õigest kasutusest (klassi omadusega noolfunktsioon):

            
class MyComponent extends React.Component {
 inputElement = null; // initsialiseeri
 setInputElement = (element) => {
  this.inputElement = element;
 };
 render() {
 return (
  <input type="text" ref={this.setInputElement} />
 );
 }
}

            

              
                Copy
              
            
          

Siin on `this.setInputElement` klassi omadusega noolfunktsioon, seega on see seotud eksemplariga ja ei muutu igal renderdamisel. See tagab, et ref'i tagasikutse käivitatakse ainult paigaldamisel ja eemaldamisel (ja siis, kui ref-prop tegelikult muutuma peab).

3. Eemaldamine (Unmount)

Kui komponent eemaldatakse, kutsub React ref'i tagasikutse uuesti välja, kuid seekord argumendiga `null`. See võimaldab teil viite puhastada, tagades, et te ei hoia kinni viitest DOM-elemendile, mida enam ei eksisteeri. See on eriti oluline mälulekete vältimiseks.

Näide:

            
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.myRef = null;
 this.setRef = element => {
 this.myRef = element;
 // Puhasta ref komponendi eemaldamisel (seades selle nulliks).
 if(element === null){
 console.log("Komponent eemaldatud, ref on nüüd null");
 }
 };
 }

 componentWillUnmount() {
 //Kuigi siin pole see vajalik, on see koht, kus saate käsitsi tegeleda
 //eemaldamise loogikaga, kui te ei kasuta sisseehitatud tagasikutse käitumist.
 }
 render() {
 return <input type="text" ref={this.setRef} />;
 }
}

            

              
                Copy
              
            
          

Selles näites, kui `MyComponent` eemaldatakse, kutsutakse välja `this.setRef(null)`, tagades, et `this.myRef` väärtuseks seatakse `null`.

Ref'i tagasikutsete praktilised kasutusjuhud

Ref'i tagasikutsed on väärtuslikud mitmesugustes stsenaariumides, pakkudes peeneteralist kontrolli DOM-elementide ja komponendi eksemplaride üle.

1. Sisendvälja fookustamine

Nagu varasemates näidetes näidatud, kasutatakse ref'i tagasikutseid tavaliselt sisendvälja fookustamiseks komponendi paigaldamisel. See on kasulik interaktiivsete vormide loomisel või siis, kui soovite suunata kasutaja tähelepanu konkreetsele sisendväljale.

2. DOM-elementide mõõtmine

Saate kasutada ref'i tagasikutseid DOM-elemendi mõõtmete või asukoha mõõtmiseks. See on abiks reageerivate paigutuste või animatsioonide loomisel, mis sõltuvad elemendi suurusest.

Näide:

            
class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 width: 0,
 height: 0,
 };
 this.myDiv = null;
 this.setDivRef = element => {
 this.myDiv = element;
 if (element) {
 this.setState({
 width: element.offsetWidth,
 height: element.offsetHeight,
 });
 }
 };
 }

 componentDidMount() {
 // Sunni uuesti renderdama, et õiged suurused ilmuksid
 this.forceUpdate();
 }

 render() {
 return (
  <div ref={this.setDivRef}>
 Minu sisu
  </div>
 );
 }
}

            

              
                Copy
              
            
          

Selles näites kasutatakse `setDivRef` tagasikutset, et saada viide div-elemendile. Meetodis `componentDidMount` saadakse div'i mõõtmed ja salvestatakse komponendi olekusse.

3. Integreerimine kolmandate osapoolte teekidega

Ref'i tagasikutsed võivad olla hädavajalikud integreerimisel kolmandate osapoolte teekidega, mis nõuavad otsest juurdepääsu DOM-elementidele. Näiteks võib teil olla vaja edastada DOM-element diagrammiteegile või JavaScripti pistikprogrammile.

4. Fookuse haldamine loendis

Kujutage ette stsenaariumi, kus teil on loend üksustest, millest igaüks sisaldab sisendvälja. Saate kasutada ref'i tagasikutseid fookuse haldamiseks loendis, tagades, et korraga on fookuses ainult üks sisendväli, või automaatselt fookustada järgmist sisendvälja, kui kasutaja vajutab Enter-klahvi.

5. Keerukad komponentidevahelised interaktsioonid

Ref'i tagasikutsed on abiks stsenaariumides, mis hõlmavad keerukaid komponentidevahelisi interaktsioone. Näiteks võib teil olla vaja käivitada meetod alamkomponendis otse vanemkomponendist.

Parimad praktikad ref'i tagasikutsete kasutamiseks

Et tagada ref'i tagasikutsete tõhus kasutamine ja vältida võimalikke probleeme, järgige neid parimaid praktikaid:

• Vältige reasiseseid funktsioone: Nagu varem mainitud, vältige ref'i tagasikutsete defineerimist reasiseselt `render` meetodis. See võib põhjustada tarbetuid uuesti renderdamisi ja jõudlusprobleeme.
• Kasutage stabiilseid tagasikutse viiteid: Kasutage klassi omadusega noolfunktsioone, siduge funktsioone konstruktoris või kasutage `useCallback` hook'i stabiilsete tagasikutse viidete loomiseks.
• Puhastage viited: Veenduge, et puhastate viited, kui komponent eemaldatakse, seades ref'i väärtuseks `null` tagasikutse funktsioonis.
• Kaaluge jõudlust: Olge teadlik ref'i tagasikutsete kasutamise jõudlusmõjudest. Vältige tarbetuid ref'i uuendusi, tagades, et tagasikutse funktsioon on stabiilne.
• Kasutage funktsionaalsete komponentide jaoks `React.forwardRef`: Kui töötate funktsionaalsete komponentidega ja peate ref'i vanemkomponendile eksponeerima, kasutage `React.forwardRef`.

Ref'i tagasikutsed funktsionaalsetes komponentides

Kuigi ülaltoodud klassikomponentide näited töötavad suurepäraselt, kasutab kaasaegne Reacti arendus sageli funktsionaalseid komponente koos hook'idega. Ref'i tagasikutsete kasutamine funktsionaalsetes komponentides nõuab `useRef` ja `useCallback` hook'ide kasutamist.

Näide:

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

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

 const setInputRef = useCallback(node => {
 // Tagasikutsega ref'i loogika
 if (node) {
 console.log("DOM Element on lisatud", node);
 }
 inputRef.current = node; // Määra praegune viide
 }, []); // Tühi sõltuvuste massiiv tagab, et tagasikutse luuakse ainult üks kord

 useEffect(() => {
 if (inputRef.current) {
 inputRef.current.focus();
 }
 }, []); // Käivita see efekt ainult üks kord paigaldamisel

 return <input type="text" ref={setInputRef} />;
}

export default MyFunctionalComponent;

            

              
                Copy
              
            
          

Selgitus:

• `useRef(null)`: Loob muutuva ref-objekti, mis püsib üle uuesti renderdamiste. Algselt on selle väärtus `null`.
• `useCallback`: Tagab, et `setInputRef` funktsioon luuakse ainult üks kord. Tühi sõltuvuste massiiv `[]` takistab selle uuesti loomist järgmistel renderdamistel.
• `inputRef.current = node`: `setInputRef` sees määrate ref-objekti `current` omaduse DOM-sõlmele. Nii pääsete DOM-sõlmele hiljem ligi.
• `useEffect`: Fookustage sisend alles pärast selle paigaldamist. `useEffect` koos tühja sõltuvuste massiiviga käivitub ainult üks kord, kui komponent paigaldatakse.

Levinumad lõksud ja kuidas neid vältida

Isegi kui ref'i tagasikutse ahelast on kindel arusaam, on lihtne langeda mõnesse levinud lõksu. Siin on ülevaade võimalikest probleemidest ja kuidas neid vältida:

• Topeltväljakutse reasisese funktsiooni tõttu: Probleem: Ref'i tagasikutset kutsutakse uuenduste ajal kaks korda. Lahendus: Kasutage stabiilseid tagasikutse viiteid (klassi omadusega noolfunktsioonid, seotud funktsioonid või `useCallback`).
• Mälulekked: Probleem: Hoidmine kinni viidetest DOM-elementidele, mida enam ei eksisteeri. Lahendus: Puhastage alati ref'id, seades nende väärtuseks `null`, kui komponent eemaldatakse.
• Ootamatud uuesti renderdamised: Probleem: Tarbetud komponendi uuesti renderdamised, mille käivitavad ref'i uuendused. Lahendus: Veenduge, et ref'i tagasikutset uuendatakse ainult siis, kui see on vajalik.
• Nullviite vead: Probleem: Püütakse ligi pääseda DOM-elemendile enne, kui see on lisatud. Lahendus: Kontrollige enne ref'ile ligipääsu, kas see on kehtiv (nt `if (this.myRef) { ... }`). Veenduge, et ootate komponendi paigaldamiseni, enne kui ref'ile ligi pääsete.

Täpsemad stsenaariumid

Lisaks põhilistele kasutusjuhtudele saab ref'i tagasikutseid kasutada ka keerukamates ja nüansirikkamates stsenaariumides:

1. Dünaamiliselt loodud ref'id

Mõnikord on vaja luua ref'e dünaamiliselt, eriti loendiüksuste renderdamisel. Kuigi tehniliselt on võimalik luua mitu ref'i `React.createRef()` abil, võib nende haldamine olla tülikas. Ref'i tagasikutsed pakuvad puhtamat ja paindlikumat lähenemist.

Näide:

            
class MyListComponent extends React.Component {
 constructor(props) {
 super(props);
 this.itemRefs = {}; // Salvesta iga loendi elemendi jaoks ref'id
 }

 setItemRef = (index) => (element) => {
 this.itemRefs[index] = element; // Salvesta element itemRefs objektis
 };

 render() {
 return (
  <ul>
 {this.props.items.map((item, index) => (
  <li key={index} ref={this.setItemRef(index)}>
 {item}
  </li>
 ))}
  </ul>
 );
 }
}

            

              
                Copy
              
            
          

Selles näites on `setItemRef` funktsioon, mis tagastab teise funktsiooni (sulund, closure). See sisemine funktsioon on ref'i tagasikutse ja sellel on juurdepääs loendi elemendi `index` väärtusele. See võimaldab teil salvestada iga loendi elemendi ref'i `itemRefs` objektis.

2. Ref'id funktsionaalsetele komponentidele `forwardRef`'iga

Kui teil on vaja saada ref funktsionaalsele komponendile, peate kasutama `React.forwardRef`. See võimaldab teil ref'i vanemkomponendist edasi suunata konkreetsele elemendile funktsionaalse komponendi sees.

Näide:

            
import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => (
 <input type="text" ref={ref} {...props} />
));

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

 componentDidMount() {
 this.inputRef.current.focus();
 }

 render() {
 return <MyInput ref={this.inputRef} defaultValue="Tere" />;
 }
}

            

              
                Copy
              
            
          

Selles näites ümbritseb `React.forwardRef` `MyInput` komponenti ja `ref`-prop edastatakse sisendelemendile. `ParentComponent` saab seejärel sisendelemendile ligi `this.inputRef.current` kaudu.

Kokkuvõte

Reacti ref'i tagasikutsed on võimas tööriist DOM-elementide ja komponendi eksemplaride haldamiseks teie Reacti rakendustes. Ref'i tagasikutse ahela – paigaldamise, uuendamise ja eemaldamise järjestuse – mõistmine on oluline tõhusa, prognoositava ja hooldatava koodi kirjutamiseks. Järgides selles artiklis toodud parimaid praktikaid ja vältides levinud lõkse, saate ref'i tagasikutseid kasutada interaktiivsemate ja dünaamilisemate kasutajaliideste loomiseks. Ref'ide valdamine võimaldab täpsemat komponendi juhtimist, sujuvat integreerimist väliste teekidega ja üldiselt paremaid Reacti arendusoskusi. Pidage meeles, et alati püüdke stabiilsete tagasikutse viidete poole, et vältida ootamatuid uuesti renderdamisi, ja puhastage viited korralikult eemaldamisel, et vältida mälulekkeid. Hoolika planeerimise ja rakendamisega muutuvad ref'i tagasikutsed väärtuslikuks varaks teie Reacti tööriistakastis, võimaldades luua keerukamaid ja jõudlusvõimelisemaid rakendusi.