React forwardRef: Įvaldykite Ref persiuntimą daugkartinio naudojimo komponentams

React pasaulyje daugkartinio naudojimo ir sudedamųjų komponentų kūrimas yra svarbiausias dalykas. Tačiau kartais reikia pasiekti vaikinio komponento DOM mazgą iš tėvinio komponento. Štai čia į pagalbą ateina React.forwardRef. Šis išsamus vadovas gilinsis į forwardRef subtilybes, paaiškins jo paskirtį, įgyvendinimą, naudojimo atvejus ir geriausias praktikas.

Kas yra Ref persiuntimas?

Ref persiuntimas – tai React technika, leidžianti tėviniam komponentui pasiekti vaikinio komponento DOM mazgą arba React komponento egzempliorių. Iš esmės, jis „persiunčia“ į komponentą perduotą ref vienam iš jo vaikinių elementų. Tai ypač naudinga, kai reikia tiesiogiai manipuliuoti vaikinio komponento DOM, pavyzdžiui, sufokusuoti įvesties lauką arba išmatuoti jo matmenis.

Be forwardRef, ref nuorodos gali būti pridedamos tik tiesiogiai prie DOM elementų arba klasės komponentų. Funkciniai komponentai negali tiesiogiai gauti ar atskleisti ref nuorodų.

Kodėl naudoti forwardRef?

Keli scenarijai reikalauja naudoti forwardRef:

• DOM manipuliavimas: Kai reikia tiesiogiai sąveikauti su vaikinio komponento DOM. Pavyzdžiui, nustatant fokusą įvesties lauke, paleidžiant animacijas ar matuojant elementus.
• Abstrakcija: Kuriant daugkartinio naudojimo UI komponentus, kurie turi atskleisti tam tikrus DOM elementus pritaikymui ar integravimui į kitas programos dalis.
• Aukštesnės eilės komponentai (HOC): Kai komponentas yra apgaubiamas HOC ir reikia užtikrinti, kad ref nuorodos būtų teisingai perduotos pagrindiniam komponentui.
• Komponentų bibliotekos: Kuriant komponentų bibliotekas, ref persiuntimas leidžia kūrėjams pasiekti ir pritaikyti pagrindinius jūsų komponentų DOM elementus, suteikiant didesnį lankstumą.

Kaip veikia forwardRef?

React.forwardRef yra aukštesnės eilės komponentas (HOC), kuris kaip argumentą priima atvaizdavimo funkciją. Ši atvaizdavimo funkcija gauna props ir ref kaip argumentus. Tada atvaizdavimo funkcija grąžina React elementą. ref argumentas yra ref nuoroda, kuri buvo perduota komponentui iš jo tėvinio komponento. Tada šią ref nuorodą galite pridėti prie vaikinio komponento atvaizdavimo funkcijoje.

Štai proceso suskirstymas:

1. Tėvinis komponentas sukuria ref naudodamas useRef.
2. Tėvinis komponentas perduoda ref vaikininiam komponentui kaip prop.
3. Vaikinis komponentas yra apgaubiamas React.forwardRef.
4. forwardRef atvaizdavimo funkcijos viduje ref yra pridedamas prie DOM elemento ar kito React komponento.
5. Tėvinis komponentas dabar gali pasiekti DOM mazgą ar komponento egzempliorių per ref.

forwardRef įgyvendinimas: praktinis pavyzdys

Iliustruokime forwardRef paprastu pavyzdžiu: pasirinktiniu įvesties komponentu, kuris leidžia tėviniam komponentui programiškai sufokusuoti įvesties lauką.

Pavyzdys: Pasirinktinis įvesties komponentas su Ref persiuntimu

Pirmiausia, sukurkime pasirinktinį įvesties komponentą:

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"; // Rekomenduojama geresniam derinimui

export default CustomInput;

Šiame pavyzdyje:

• Mes importuojame forwardRef iš 'react'.
• Mes apgaubiame savo funkcinį komponentą su forwardRef.
• forwardRef funkcija gauna props ir ref kaip argumentus.
• Mes pridedame ref prie <input> elemento.
• Mes nustatome displayName geresniam derinimui React DevTools.

Dabar pažiūrėkime, kaip naudoti šį komponentą tėviniame komponente:

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

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

  useEffect(() => {
    // Sufokusuoti įvesties lauką, kai komponentas prijungiamas
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <CustomInput label="Vardas:" id="name" ref={inputRef} placeholder="Įveskite savo vardą" />
    </div>
  );
};

export default ParentComponent;

Šiame tėviniame komponente:

• Mes sukuriame ref naudodami useRef.
• Mes perduodame inputRef CustomInput komponentui kaip ref prop.
• useEffect kablio (hook) viduje mes pasiekiame pagrindinį DOM mazgą naudodami inputRef.current ir iškviečiame focus() metodą.

Kai ParentComponent bus prijungtas, CustomInput komponento įvesties laukas bus automatiškai sufokusuotas.

forwardRef naudojimo atvejai

Štai keletas įprastų naudojimo atvejų, kai forwardRef pasirodo neįkainojamas:

1. Įvesties laukų fokusavimas

Kaip parodyta aukščiau pateiktame pavyzdyje, forwardRef leidžia programiškai sufokusuoti įvesties laukus, o tai naudinga formų patvirtinimui, prieinamumui ir vartotojo patirties gerinimui. Pavyzdžiui, kai vartotojas pateikia formą su klaidomis, galite sufokusuoti pirmąjį įvesties lauką su klaida, kad padėtumėte vartotojui.

2. Elementų matmenų matavimas

Galite naudoti forwardRef, kad pasiektumėte vaikinio komponento DOM mazgą ir išmatuotumėte jo matmenis (plotį, aukštį ir t. t.). Tai naudinga kuriant adaptyvius maketus, dinaminį dydžio keitimą ir pasirinktines animacijas. Gali prireikti išmatuoti dinaminio turinio srities aukštį, kad būtų galima pritaikyti kitų elementų išdėstymą puslapyje.

3. Integracija su trečiųjų šalių bibliotekomis

Daugeliui trečiųjų šalių bibliotekų reikia tiesioginės prieigos prie DOM mazgų inicializavimui ar konfigūravimui. forwardRef leidžia sklandžiai integruoti šias bibliotekas su jūsų React komponentais. Įsivaizduokite, kad naudojate diagramų biblioteką, kuriai reikia DOM elemento kaip taikinio diagramai atvaizduoti. forwardRef leidžia pateikti tą DOM elementą bibliotekai.

4. Prieinamų komponentų kūrimas

Prieinamumas dažnai reikalauja tiesioginio DOM atributų manipuliavimo arba fokuso valdymo. forwardRef gali būti naudojamas kuriant prieinamus komponentus, atitinkančius prieinamumo standartus. Pavyzdžiui, gali prireikti nustatyti aria-describedby atributą įvesties lauke, kad susietumėte jį su klaidos pranešimu. Tam reikia tiesioginės prieigos prie įvesties lauko DOM mazgo.

5. Aukštesnės eilės komponentai (HOC)

Kuriant HOC, svarbu užtikrinti, kad ref nuorodos būtų teisingai perduotos apgaubtam komponentui. forwardRef padeda tai pasiekti. Tarkime, turite HOC, kuris prideda stilių komponentui. Naudojant forwardRef užtikrinama, kad bet kokios ref nuorodos, perduotos stilizuotam komponentui, būtų persiųstos pagrindiniam komponentui.

Geriausios praktikos naudojant forwardRef

Norėdami užtikrinti, kad forwardRef naudosite efektyviai, apsvarstykite šias geriausias praktikas:

1. Naudokite displayName derinimui

Visada nustatykite displayName savybę savo forwardRef komponentams. Tai palengvina jų atpažinimą React DevTools. Pavyzdžiui:

CustomInput.displayName = "CustomInput";

2. Atsižvelkite į našumą

Nors forwardRef yra galingas įrankis, jis gali turėti įtakos našumui, jei naudojamas per daug. Venkite nereikalingo DOM manipuliavimo ir optimizuokite savo atvaizdavimo logiką. Profiluokite savo programą, kad nustatytumėte bet kokius našumo trūkumus, susijusius su ref persiuntimu.

3. Naudokite Ref apgalvotai

Nenaudokite ref nuorodų kaip pakaitalo React duomenų srautui. Ref turėtų būti naudojamos saikingai ir tik tada, kai tai būtina DOM manipuliavimui ar integracijai su trečiųjų šalių bibliotekomis. Pasikliaukite props ir state savybėmis komponento duomenų ir elgsenos valdymui.

4. Dokumentuokite savo komponentus

Aiškiai dokumentuokite, kada ir kodėl naudojate forwardRef savo komponentuose. Tai padeda kitiems kūrėjams suprasti jūsų kodą ir teisingai naudoti jūsų komponentus. Įtraukite pavyzdžių, kaip naudoti komponentą, ir paaiškinkite persiųsto ref paskirtį.

5. Apsvarstykite alternatyvas

Prieš naudodami forwardRef, apsvarstykite, ar yra alternatyvių sprendimų, kurie galėtų būti tinkamesni. Pavyzdžiui, galbūt galite pasiekti norimą elgesį naudodami props ir state, o ne tiesiogiai manipuliuodami DOM. Ištirkite kitas galimybes prieš griebdamiesi forwardRef.

Alternatyvos forwardRef

Nors forwardRef dažnai yra geriausias sprendimas ref persiuntimui, yra alternatyvių požiūrių, kuriuos galite apsvarstyti tam tikrose situacijose:

1. Atgalinio iškvietimo Ref (Callback Refs)

Atgalinio iškvietimo ref suteikia lankstesnį būdą pasiekti DOM mazgus. Užuot perdavę ref prop, perduodate funkciją, kuri gauna DOM mazgą kaip argumentą. Tai leidžia jums atlikti pasirinktinę logiką, kai DOM mazgas yra prijungiamas ar atjungiamas. Tačiau atgalinio iškvietimo ref gali būti išsamesni ir mažiau skaitomi nei forwardRef.

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

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

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

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

2. Kompozicija

Kai kuriais atvejais galite pasiekti norimą elgesį komponentų kompozicijos būdu, o ne naudodami forwardRef. Tai apima sudėtingo komponento skaidymą į mažesnius, lengviau valdomus komponentus ir duomenų bei elgsenos perdavimą tarp jų naudojant props. Kompozicija gali lemti lengviau prižiūrimą ir testuojamą kodą, tačiau ji gali netikti visiems scenarijams.

3. Atvaizdavimo Props (Render Props)

Atvaizdavimo props leidžia dalintis kodu tarp React komponentų naudojant prop, kurio vertė yra funkcija. Galite naudoti atvaizdavimo props, kad atskleistumėte DOM mazgus ar komponentų egzempliorius tėviniam komponentui. Tačiau atvaizdavimo props gali padaryti jūsų kodą sudėtingesnį ir sunkiau skaitomą, ypač kai susiduriama su keliais atvaizdavimo props.

Dažniausios klaidos, kurių reikia vengti

Dirbant su forwardRef, svarbu vengti šių dažniausių klaidų:

1. Pamirštate nustatyti displayName

Kaip minėta anksčiau, pamiršus nustatyti displayName savybę, derinimas gali tapti sudėtingas. Visada nustatykite displayName savo forwardRef komponentams.

2. Perteklinis Ref naudojimas

Atsispirkite pagundai naudoti ref viskam. Ref turėtų būti naudojamos saikingai ir tik tada, kai tai būtina DOM manipuliavimui ar integracijai su trečiųjų šalių bibliotekomis. Pasikliaukite props ir state savybėmis komponento duomenų ir elgsenos valdymui.

3. Tiesioginis DOM manipuliavimas be svarios priežasties

Tiesioginis DOM manipuliavimas gali padaryti jūsų kodą sunkiau prižiūrimą ir testuojamą. Manipuliuokite DOM tik tada, kai tai absoliučiai būtina, ir venkite nereikalingų DOM atnaujinimų.

4. Neapdorojate Null Ref

Visada patikrinkite, ar ref yra null, prieš pasiekdami pagrindinį DOM mazgą ar komponento egzempliorių. Tai apsaugo nuo klaidų, kai komponentas dar nėra prijungtas arba buvo atjungtas.

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

5. Ciklinių priklausomybių kūrimas

Būkite atsargūs, kai naudojate forwardRef kartu su kitomis technikomis, tokiomis kaip HOC ar atvaizdavimo props. Venkite kurti ciklinių priklausomybių tarp komponentų, nes tai gali sukelti našumo problemų ar netikėtą elgesį.

Pavyzdžiai iš viso pasaulio

React ir forwardRef principai yra universalūs, tačiau apsvarstykite, kaip kūrėjai iš skirtingų regionų gali pritaikyti jo naudojimą:

• Lokalizacija ir internacionalizacija (i18n): Kūrėjai, kuriantys daugiakalbes programas Europoje ar Azijoje, gali naudoti forwardRef, kad išmatuotų lokalizuoto teksto elementų dydį ir dinamiškai pritaikytų maketus skirtingoms kalboms, užtikrindami, kad tekstas neišeitų už konteinerių ribų. Pavyzdžiui, vokiečių kalbos žodžiai dažnai būna ilgesni nei anglų kalbos žodžiai, todėl reikia korekcijų.
• Iš dešinės į kairę (RTL) maketai: Artimuosiuose Rytuose ir Azijos dalyse programos dažnai turi palaikyti RTL maketus. forwardRef gali būti naudojamas programiškai koreguoti elementų padėtį atsižvelgiant į dabartinę maketo kryptį.
• Prieinamumas įvairiems vartotojams: Visame pasaulyje prieinamumas tampa vis svarbesnis. Kūrėjai gali naudoti forwardRef, kad pagerintų prieinamumą vartotojams su negalia, pavyzdžiui, programiškai fokusuojant elementus ekrano skaitytuvams arba koreguojant formos laukų tabuliavimo tvarką.
• Integracija su regioninėmis API: Kūrėjai, integruojantys su vietinėmis API (pvz., mokėjimo šliuzais, žemėlapių paslaugomis), gali naudoti forwardRef, kad pasiektų DOM elementus, reikalingus šioms API, užtikrinant suderinamumą ir sklandžią integraciją.

Išvada

React.forwardRef yra galingas įrankis kuriant daugkartinio naudojimo ir sudedamuosius React komponentus. Leidžiant tėviniams komponentams pasiekti savo vaikinių elementų DOM mazgus ar komponentų egzempliorius, forwardRef atveria platų naudojimo atvejų spektrą, nuo DOM manipuliavimo iki integracijos su trečiųjų šalių bibliotekomis. Laikydamiesi šiame vadove pateiktų geriausių praktikų, galite efektyviai išnaudoti forwardRef ir išvengti dažniausių klaidų. Nepamirškite naudoti ref apgalvotai, aiškiai dokumentuoti savo komponentus ir apsvarstyti alternatyvius sprendimus, kai tai tinkama. Turėdami tvirtą forwardRef supratimą, galite kurti tvirtesnes, lankstesnes ir lengviau prižiūrimas React programas.