React forwardRef: Ref pārsūtīšanas apgūšana atkārtoti lietojamiem komponentiem

React pasaulē atkārtoti lietojamu un saliekamu komponentu izveide ir vissvarīgākā. Tomēr dažreiz no vecākkomponenta ir nepieciešams piekļūt bērnkomponenta pamatā esošajam DOM mezglam. Šeit palīgā nāk React.forwardRef. Šī visaptverošā rokasgrāmata iedziļināsies forwardRef sarežģītībās, izskaidrojot tā mērķi, ieviešanu, lietošanas gadījumus un labākās prakses.

Kas ir Ref pārsūtīšana?

Ref pārsūtīšana ir tehnika React, kas ļauj vecākkomponentam piekļūt bērnkomponenta DOM mezglam vai React komponenta instancei. Būtībā tas "pārsūta" ref, kas nodots komponentam, uz vienu no tā bērniem. Tas ir īpaši noderīgi, ja nepieciešams tieši manipulēt ar bērnkomponenta DOM, piemēram, fokusēt ievades lauku vai izmērīt tā izmērus.

Bez forwardRef ref var pievienot tikai tieši DOM elementiem vai klases komponentiem. Funkcionālie komponenti nevar tieši saņemt vai atklāt ref.

Kāpēc lietot forwardRef?

Vairāki scenāriji prasa forwardRef izmantošanu:

• DOM manipulācija: Ja nepieciešams tieši mijiedarboties ar bērnkomponenta DOM. Piemēram, iestatīt fokusu uz ievades lauka, iedarbināt animācijas vai mērīt elementus.
• Abstrakcija: Veidojot atkārtoti lietojamus UI komponentus, kuriem jāatklāj noteikti DOM elementi pielāgošanai vai integrācijai citās lietojumprogrammas daļās.
• Augstākās kārtas komponenti (HOCs): Ietinot komponentu ar HOC un nepieciešams nodrošināt, ka ref tiek pareizi nodoti caur pamatā esošajam komponentam.
• Komponentu bibliotēkas: Veidojot komponentu bibliotēkas, ref pārsūtīšana ļauj izstrādātājiem piekļūt un pielāgot jūsu komponentu pamatā esošos DOM elementus, nodrošinot lielāku elastību.

Kā darbojas forwardRef

React.forwardRef ir augstākās kārtas komponents (HOC), kas kā argumentu pieņem renderēšanas funkciju. Šī renderēšanas funkcija saņem props un ref kā argumentus. Pēc tam renderēšanas funkcija atgriež React elementu. ref arguments ir ref, kas tika nodots komponentam no tā vecāka. Pēc tam šo ref var pievienot bērnkomponentam renderēšanas funkcijā.

Šeit ir procesa sadalījums:

1. Vecākkomponents izveido ref, izmantojot useRef.
2. Vecākkomponents nodod ref bērnkomponentam kā prop.
3. Bērnkomponents ir ietīts React.forwardRef.
4. forwardRef renderēšanas funkcijas iekšienē ref tiek pievienots DOM elementam vai citam React komponentam.
5. Vecākkomponents tagad var piekļūt DOM mezglam vai komponenta instancei caur ref.

forwardRef ieviešana: Praktisks piemērs

Ilustrēsim forwardRef ar vienkāršu piemēru: pielāgots ievades komponents, kas ļauj vecākkomponentam programmatiski fokusēt ievades lauku.

Piemērs: Pielāgots ievades komponents ar Ref pārsūtīšanu

Vispirms izveidosim pielāgotu ievades komponentu:

import React, { forwardRef } from 'react';

const CustomInput = forwardRef((props, ref) => {
  return (
    <div>
      <label htmlFor={props.id}>{props.label}</label>
      <input type="text" id={props.id} ref={ref} {...props} />
    </div>
  );
});

CustomInput.displayName = "CustomInput"; // Recommended for better debugging

export default CustomInput;

Šajā piemērā:

• Mēs importējam forwardRef no 'react'.
• Mēs ietinam mūsu funkcionālo komponentu ar forwardRef.
• forwardRef funkcija saņem props un ref kā argumentus.
• Mēs pievienojam ref <input> elementam.
• Mēs iestatām displayName labākai atkļūdošanai React DevTools.

Tagad apskatīsim, kā izmantot šo komponentu vecākkomponentā:

import React, { useRef, useEffect } from 'react';
import CustomInput from './CustomInput';

const ParentComponent = () => {
  const inputRef = useRef(null);

  useEffect(() => {
    // Focus the input field when the component mounts
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <CustomInput label="Name:" id="name" ref={inputRef} placeholder="Enter your name" />
    </div>
  );
};

export default ParentComponent;

Šajā vecākkomponentā:

• Mēs izveidojam ref, izmantojot useRef.
• Mēs nododam inputRef CustomInput komponentam kā ref prop.
• useEffect hook iekšienē mēs piekļūstam pamatā esošajam DOM mezglam, izmantojot inputRef.current, un izsaucam focus() metodi.

Kad ParentComponent tiek ielādēts, ievades lauks CustomInput komponentā tiks automātiski fokusēts.

forwardRef lietošanas gadījumi

Šeit ir daži izplatīti lietošanas gadījumi, kuros forwardRef izrādās nenovērtējams:

1. Ievades lauku fokusēšana

Kā parādīts iepriekšējā piemērā, forwardRef ļauj programmatiski fokusēt ievades laukus, kas ir noderīgi formu validācijai, pieejamībai un lietotāja pieredzes uzlabojumiem. Piemēram, pēc tam, kad lietotājs iesniedz formu ar kļūdām, jūs varat fokusēt pirmo ievades lauku ar kļūdu, lai vadītu lietotāju.

2. Elementu izmēru mērīšana

Jūs varat izmantot forwardRef, lai piekļūtu bērnkomponenta DOM mezglam un izmērītu tā izmērus (platumu, augstumu utt.). Tas ir noderīgi, veidojot adaptīvus izkārtojumus, dinamisku izmēru maiņu un pielāgotas animācijas. Jums varētu būt nepieciešams izmērīt dinamiska satura apgabala augstumu, lai pielāgotu citu lapas elementu izkārtojumu.

3. Integrācija ar trešo pušu bibliotēkām

Daudzām trešo pušu bibliotēkām nepieciešama tieša piekļuve DOM mezgliem inicializācijai vai konfigurācijai. forwardRef ļauj jums nemanāmi integrēt šīs bibliotēkas ar saviem React komponentiem. Iedomājieties, ka izmantojat diagrammu bibliotēku, kurai nepieciešams DOM elements kā mērķis diagrammas renderēšanai. forwardRef ļauj jums nodrošināt šo DOM elementu bibliotēkai.

4. Pieejamu komponentu izveide

Pieejamība bieži prasa tiešu DOM atribūtu manipulāciju vai fokusa pārvaldību. forwardRef var izmantot, lai izveidotu pieejamus komponentus, kas atbilst pieejamības standartiem. Piemēram, jums varētu būt nepieciešams iestatīt aria-describedby atribūtu uz ievades lauka, lai to saistītu ar kļūdas ziņojumu. Tam nepieciešama tieša piekļuve ievades lauka DOM mezglam.

5. Augstākās kārtas komponenti (HOCs)

Veidojot HOC, ir svarīgi nodrošināt, ka ref tiek pareizi nodoti caur ietītajam komponentam. forwardRef palīdz to sasniegt. Pieņemsim, ka jums ir HOC, kas pievieno stilu komponentam. Izmantojot forwardRef, tiek nodrošināts, ka jebkuri ref, kas nodoti stilizētajam komponentam, tiek pārsūtīti uz pamatā esošo komponentu.

Labākās prakses, lietojot forwardRef

Lai nodrošinātu, ka jūs efektīvi izmantojat forwardRef, apsveriet šīs labākās prakses:

1. Izmantojiet displayName atkļūdošanai

Vienmēr iestatiet displayName īpašību saviem forwardRef komponentiem. Tas atvieglo to identificēšanu React DevTools. Piemēram:

CustomInput.displayName = "CustomInput";

2. Pievērsiet uzmanību veiktspējai

Lai gan forwardRef ir spēcīgs rīks, tas var potenciāli ietekmēt veiktspēju, ja to lieto pārmērīgi. Izvairieties no nevajadzīgām DOM manipulācijām un optimizējiet savu renderēšanas loģiku. Profilējiet savu lietojumprogrammu, lai identificētu jebkādus veiktspējas vājos punktus, kas saistīti ar ref pārsūtīšanu.

3. Lietojiet ref apdomīgi

Nelietojiet ref kā aizstājēju React datu plūsmai. Ref jālieto taupīgi un tikai tad, ja tas ir nepieciešams DOM manipulācijai vai integrācijai ar trešo pušu bibliotēkām. Paļaujieties uz props un stāvokli, lai pārvaldītu komponentu datus un uzvedību.

4. Dokumentējiet savus komponentus

Skaidri dokumentējiet, kad un kāpēc jūs izmantojat forwardRef savos komponentos. Tas palīdz citiem izstrādātājiem saprast jūsu kodu un pareizi lietot jūsu komponentus. Iekļaujiet piemērus, kā lietot komponentu un kāds ir pārsūtītā ref mērķis.

5. Apsveriet alternatīvas

Pirms lietojat forwardRef, apsveriet, vai nav alternatīvu risinājumu, kas varētu būt piemērotāki. Piemēram, jūs varētu sasniegt vēlamo uzvedību, izmantojot props un stāvokli, nevis tieši manipulējot ar DOM. Izpētiet citas iespējas, pirms ķeraties pie forwardRef.

Alternatīvas forwardRef

Lai gan forwardRef bieži ir labākais risinājums ref pārsūtīšanai, ir alternatīvas pieejas, kuras varat apsvērt noteiktās situācijās:

1. Atzvanu refi (Callback Refs)

Atzvanu refi nodrošina elastīgāku veidu, kā piekļūt DOM mezgliem. Tā vietā, lai nodotu ref prop, jūs nododat funkciju, kas saņem DOM mezglu kā argumentu. Tas ļauj jums veikt pielāgotu loģiku, kad DOM mezgls tiek pievienots vai atvienots. Tomēr atzvanu refi var būt izvērstāki un mazāk lasāmi nekā forwardRef.

const MyComponent = () => {
  let inputElement = null;

  const setInputElement = (element) => {
    inputElement = element;
  };

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

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

2. Kompozīcija

Dažos gadījumos jūs varat sasniegt vēlamo uzvedību, komponējot komponentus, nevis izmantojot forwardRef. Tas ietver sarežģīta komponenta sadalīšanu mazākos, vieglāk pārvaldāmos komponentos un datu un uzvedības nodošanu starp tiem, izmantojot props. Kompozīcija var novest pie vieglāk uzturama un testējama koda, bet tas var nebūt piemērots visiem scenārijiem.

3. Renderēšanas props (Render Props)

Renderēšanas props ļauj jums koplietot kodu starp React komponentiem, izmantojot prop, kura vērtība ir funkcija. Jūs varat izmantot renderēšanas props, lai atklātu DOM mezglus vai komponentu instances vecākkomponentam. Tomēr renderēšanas props var padarīt jūsu kodu sarežģītāku un grūtāk lasāmu, īpaši, ja strādājat ar vairākiem renderēšanas props.

Biežākās kļūdas, no kurām jāizvairās

Strādājot ar forwardRef, ir svarīgi izvairīties no šīm biežākajām kļūdām:

1. Aizmirst iestatīt displayName

Kā minēts iepriekš, aizmirstot iestatīt displayName īpašību, var apgrūtināt atkļūdošanu. Vienmēr iestatiet displayName saviem forwardRef komponentiem.

2. Pārmērīga ref lietošana

Pretojieties kārdinājumam izmantot ref visam. Ref jālieto taupīgi un tikai tad, ja tas ir nepieciešams DOM manipulācijai vai integrācijai ar trešo pušu bibliotēkām. Paļaujieties uz props un stāvokli, lai pārvaldītu komponentu datus un uzvedību.

3. Tieša DOM manipulācija bez pamatota iemesla

Tieša DOM manipulācija var padarīt jūsu kodu grūtāk uzturamu un testējamu. Manipulējiet ar DOM tikai tad, kad tas ir absolūti nepieciešams, un izvairieties no nevajadzīgiem DOM atjauninājumiem.

4. Neapstrādāt nulles ref

Vienmēr pārbaudiet, vai ref nav null, pirms piekļūstat pamatā esošajam DOM mezglam vai komponenta instancei. Tas novērš kļūdas, kad komponents vēl nav ielādēts vai ir noņemts.

if (inputRef.current) {
  inputRef.current.focus();
}

5. Ciklisku atkarību veidošana

Esiet uzmanīgi, lietojot forwardRef kombinācijā ar citām tehnikām, piemēram, HOC vai renderēšanas props. Izvairieties no ciklisku atkarību veidošanas starp komponentiem, jo tas var izraisīt veiktspējas problēmas vai neparedzētu uzvedību.

Piemēri no visas pasaules

React un forwardRef principi ir universāli, bet apsveriet, kā izstrādātāji no dažādiem reģioniem varētu pielāgot tā lietojumu:

• Lokalizācija un internacionalizācija (i18n): Izstrādātāji, kas veido daudzvalodu lietojumprogrammas Eiropā vai Āzijā, varētu izmantot forwardRef, lai izmērītu lokalizētu teksta elementu izmēru, lai dinamiski pielāgotu izkārtojumus dažādām valodām, nodrošinot, ka teksts nepārplūst konteineros. Piemēram, vācu vārdi mēdz būt garāki par angļu vārdiem, kas prasa pielāgojumus.
• No labās uz kreiso (RTL) izkārtojumi: Tuvajos Austrumos un daļā Āzijas lietojumprogrammām bieži ir jāatbalsta RTL izkārtojumi. forwardRef var izmantot, lai programmatiski pielāgotu elementu pozicionēšanu, pamatojoties uz pašreizējo izkārtojuma virzienu.
• Pieejamība dažādiem lietotājiem: Globāli pieejamība ir pieaugoša problēma. Izstrādātāji varētu izmantot forwardRef, lai uzlabotu pieejamību lietotājiem ar invaliditāti, piemēram, programmatiski fokusējot elementus ekrāna lasītājiem vai pielāgojot formu lauku tabulēšanas secību.
• Integrācija ar reģionam specifiskām API: Izstrādātāji, kas integrējas ar vietējām API (piemēram, maksājumu vārtiem, kartēšanas pakalpojumiem), varētu izmantot forwardRef, lai piekļūtu DOM elementiem, kas nepieciešami šīm API, nodrošinot saderību un nemanāmu integrāciju.

Secinājums

React.forwardRef ir spēcīgs rīks atkārtoti lietojamu un saliekamu React komponentu izveidei. Ļaujot vecākkomponentiem piekļūt savu bērnu DOM mezgliem vai komponentu instancēm, forwardRef nodrošina plašu lietošanas gadījumu klāstu, sākot no DOM manipulācijas līdz integrācijai ar trešo pušu bibliotēkām. Ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat efektīvi izmantot forwardRef un izvairīties no biežākajām kļūdām. Atcerieties lietot ref apdomīgi, skaidri dokumentēt savus komponentus un apsvērt alternatīvus risinājumus, ja nepieciešams. Ar stabilu izpratni par forwardRef jūs varat veidot robustākas, elastīgākas un uzturamas React lietojumprogrammas.