React „ref“ perdavimo modeliai: Komponentų API dizaino įvaldymas

„Ref“ perdavimas (angl. ref forwarding) yra galinga React technika, leidžianti automatiškai perduoti „ref“ per komponentą vienam iš jo vaikinių elementų. Tai suteikia galimybę tėviniams komponentams tiesiogiai sąveikauti su konkrečiais DOM elementais ar komponentų egzemplioriais jų vaikiniuose elementuose, net jei tie vaikiniai elementai yra giliai įdėti. Efektyvus „ref“ perdavimo supratimas ir naudojimas yra labai svarbus kuriant lanksčias, pakartotinai naudojamas ir palaikomas komponentų API.

Kodėl „ref“ perdavimas svarbus komponentų API dizainui

Kuriant React komponentus, ypač tuos, kurie skirti pakartotiniam naudojimui, svarbu apsvarstyti, kaip su jais sąveikaus kiti programuotojai. Gerai suprojektuota komponento API yra:

• Intuityvi: Lengva suprasti ir naudoti.
• Lanksti: Pritaikoma skirtingiems naudojimo atvejams, nereikalaujant didelių pakeitimų.
• Palaikoma: Komponento vidinės implementacijos pakeitimai neturėtų pažeisti išorinio kodo, kuris jį naudoja.

„Ref“ perdavimas atlieka pagrindinį vaidmenį siekiant šių tikslų. Jis leidžia atverti konkrečias komponento vidinės struktūros dalis išoriniam pasauliui, tuo pačiu išlaikant kontrolę ties komponento vidine implementacija.

React.forwardRef pagrindai

React „ref“ perdavimo pagrindas yra `React.forwardRef` aukštesnės eilės komponentas (HOC). Ši funkcija kaip argumentą priima atvaizdavimo (angl. rendering) funkciją ir grąžina naują React komponentą, galintį priimti `ref` atributą (angl. prop).

Štai paprastas pavyzdys:

            import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

export default MyInput;

            

              
                Copy
              
            
          

Šiame pavyzdyje `MyInput` yra funkcinis komponentas, kuris naudoja `forwardRef`. `ref` atributas, perduotas `MyInput`, yra tiesiogiai priskiriamas `input` elementui. Tai leidžia tėviniam komponentui gauti nuorodą į tikrąjį įvesties lauko DOM mazgą.

Perduoto „ref“ naudojimas

Štai kaip galėtumėte naudoti `MyInput` komponentą tėviniame komponente:

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

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

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

  return (
    

      
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šiame pavyzdyje `ParentComponent` sukuria „ref“ naudodamas `useRef` ir perduoda jį `MyInput` komponentui. Tuomet `useEffect` „hook“ naudoja „ref“, kad sufokusuotų įvesties lauką, kai komponentas yra prijungiamas (angl. mounts). Tai parodo, kaip tėvinis komponentas gali tiesiogiai manipuliuoti DOM elementu savo vaikiniame komponente, naudojant „ref“ perdavimą.

Dažniausiai pasitaikantys „ref“ perdavimo modeliai komponentų API dizainui

Dabar panagrinėkime keletą įprastų ir naudingų „ref“ perdavimo modelių, kurie gali žymiai pagerinti jūsų komponentų API dizainą.

1. „Ref“ perdavimas DOM elementams

Kaip parodyta pagrindiniame pavyzdyje, „ref“ perdavimas DOM elementams yra fundamentalus modelis. Tai leidžia tėviniams komponentams pasiekti ir manipuliuoti konkrečiais DOM mazgais jūsų komponente. Tai ypač naudinga:

• Fokusavimo valdymui: Nustatant fokusą įvesties laukui ar kitam interaktyviam elementui.
• Elementų matmenų matavimui: Gaunant elemento plotį ar aukštį.
• Elementų savybių pasiekimui: Skaitant ar modifikuojant elementų atributus.

Pavyzdys: Pritaikomas mygtuko komponentas

Apsvarstykite mygtuko komponentą, kuris leidžia vartotojams pritaikyti jo išvaizdą.

            import React, { forwardRef } from 'react';

const CustomButton = forwardRef((props, ref) => {
  const { children, ...rest } = props;
  return (
    
      {children}
    
  );
});

export default CustomButton;

            

              
                Copy
              
            
          

Dabar tėvinis komponentas gali gauti nuorodą į mygtuko elementą ir atlikti veiksmus, tokius kaip programinis paspaudimas ar stiliaus keitimas.

2. „Ref“ perdavimas vaikiniams komponentams

„Ref“ perdavimas neapsiriboja tik DOM elementais. Taip pat galite perduoti „ref“ kitiems React komponentams. Tai leidžia tėviniams komponentams pasiekti vaikinių komponentų egzemplioriaus metodus ar savybes.

Pavyzdys: Kontroliuojamas įvesties komponentas

Įsivaizduokite, kad turite pasirinktinį įvesties komponentą, kuris valdo savo būseną. Galbūt norėsite atverti metodą, leidžiantį programiškai išvalyti įvesties vertę.

            import React, { useState, forwardRef, useImperativeHandle } from 'react';

const ControlledInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  const clearInput = () => {
    setValue('');
  };

  useImperativeHandle(ref, () => ({
    clear: clearInput,
  }));

  return (
     setValue(e.target.value)}
    />
  );
});

export default ControlledInput;

            

              
                Copy
              
            
          

Šiame pavyzdyje `useImperativeHandle` naudojamas tam, kad atvertų `clear` metodą tėviniam komponentui. Tėvinis komponentas tuomet gali iškviesti šį metodą, kad išvalytų įvesties vertę.

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

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

  const handleClearClick = () => {
    if (inputRef.current) {
      inputRef.current.clear();
    }
  };

  return (
    

      
      Clear
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šis modelis naudingas, kai reikia atverti konkrečią vaikinio komponento funkciją jo tėviniam komponentui, tuo pačiu išlaikant vaikinio komponento vidinės būsenos kontrolę.

3. „Ref“ derinimas sudėtingiems komponentams

Sudėtingesniuose komponentuose gali prireikti perduoti kelis „ref“ skirtingiems elementams ar komponentams jūsų komponente. Tai galima pasiekti sujungiant „ref“ naudojant pasirinktinę funkciją.

Pavyzdys: Sudėtinis komponentas su keliais fokusuojamais elementais

Tarkime, turite komponentą, kuriame yra ir įvesties laukas, ir mygtukas. Norite leisti tėviniam komponentui sufokusuoti arba įvesties lauką, arba mygtuką.

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

const CompositeComponent = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  useEffect(() => {
    if (typeof ref === 'function') {
      ref({
        input: inputRef.current,
        button: buttonRef.current,
      });
    } else if (ref && typeof ref === 'object') {
      ref.current = {
        input: inputRef.current,
        button: buttonRef.current,
      };
    }
  }, [ref]);

  return (
    

      
      Click Me
    
  );
});

export default CompositeComponent;

            

              
                Copy
              
            
          

Šiame pavyzdyje `CompositeComponent` naudoja du vidinius „ref“: `inputRef` ir `buttonRef`. Tuomet `useEffect` „hook“ sujungia šiuos „ref“ į vieną objektą ir priskiria jį perduodamam „ref“. Tai leidžia tėviniam komponentui pasiekti ir įvesties lauką, ir mygtuką.

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

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

  const handleFocusInput = () => {
    if (compositeRef.current && compositeRef.current.input) {
      compositeRef.current.input.focus();
    }
  };

  const handleFocusButton = () => {
    if (compositeRef.current && compositeRef.current.button) {
      compositeRef.current.button.focus();
    }
  };

  return (
    

      
      Focus Input
      Focus Button
    
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Šis modelis naudingas, kai reikia atverti kelis elementus ar komponentus sudėtingame komponente tėviniam komponentui.

4. Sąlyginis „ref“ perdavimas

Kartais galite norėti perduoti „ref“ tik tam tikromis sąlygomis. Tai gali būti naudinga, kai norite pateikti numatytąjį elgesį, bet leisti tėviniam komponentui jį pakeisti.

Pavyzdys: Komponentas su pasirenkamu įvesties lauku

Tarkime, turite komponentą, kuris atvaizduoja įvesties lauką tik tada, kai nustatytas tam tikras atributas (prop). Norite perduoti „ref“ tik tuo atveju, jei įvesties laukas iš tikrųjų yra atvaizduojamas.

            import React, { forwardRef } from 'react';

const ConditionalInput = forwardRef((props, ref) => {
  const { showInput, ...rest } = props;

  if (showInput) {
    return ;
  } else {
    return 
No input field
;
  }
});

export default ConditionalInput;

            

              
                Copy
              
            
          

Šiame pavyzdyje „ref“ perduodamas `input` elementui tik tada, jei `showInput` atributo reikšmė yra „true“. Kitu atveju „ref“ yra ignoruojamas.

5. „Ref“ perdavimas su aukštesnės eilės komponentais (HOC)

Naudojant aukštesnės eilės komponentus (HOC), svarbu užtikrinti, kad „ref“ būtų tinkamai perduoti apgaubtam (angl. wrapped) komponentui. Jei netinkamai tvarkysite „ref“, tėvinis komponentas gali negalėti pasiekti pagrindinio komponento.

Pavyzdys: Paprastas HOC, pridedantis rėmelį

            import React, { forwardRef } from 'react';

const withBorder = (WrappedComponent) => {
  const WithBorder = forwardRef((props, ref) => {
    return (
      

        
      
    );
  });

  WithBorder.displayName = `withBorder(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return WithBorder;
};

export default withBorder;

            

              
                Copy
              
            
          

Šiame pavyzdyje `withBorder` HOC naudoja `forwardRef`, kad užtikrintų, jog „ref“ būtų perduotas apgaubtam komponentui. Taip pat nustatoma `displayName` savybė, kad būtų lengviau derinti kodą.

Svarbi pastaba: Naudojant klasių komponentus su HOC ir „ref“ perdavimu, „ref“ bus perduotas kaip įprastas atributas (prop) klasių komponentui. Jums reikės jį pasiekti naudojant `this.props.ref`.

Gerosios „ref“ perdavimo praktikos

Norėdami užtikrinti, kad efektyviai naudojate „ref“ perdavimą, apsvarstykite šias gerasias praktikas:

• Naudokite `React.forwardRef` komponentams, kuriems reikia perduoti „ref“. Tai yra standartinis būdas įjungti „ref“ perdavimą React.
• Aiškiai dokumentuokite savo komponento API. Paaiškinkite, kuriuos elementus ar komponentus galima pasiekti per „ref“ ir kaip juos naudoti.
• Atsižvelkite į našumą. Venkite nereikalingo „ref“ perdavimo, nes tai gali sukelti papildomų sąnaudų.
• Naudokite `useImperativeHandle`, kad atvertumėte ribotą metodų ar savybių rinkinį. Tai leidžia kontroliuoti, ką gali pasiekti tėvinis komponentas.
• Venkite perteklinio „ref“ perdavimo. Daugeliu atvejų geriau naudoti atributus (props) bendravimui tarp komponentų.

Prieinamumo aspektai

Naudojant „ref“ perdavimą, svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad jūsų komponentai išliktų prieinami vartotojams su negalia, net kai „ref“ naudojami DOM elementams manipuliuoti. Štai keli patarimai:

• Naudokite ARIA atributus semantinei informacijai suteikti. Tai padeda pagalbinėms technologijoms suprasti jūsų komponentų paskirtį.
• Tinkamai valdykite fokusą. Užtikrinkite, kad fokusas visada būtų matomas ir nuspėjamas.
• Testuokite savo komponentus su pagalbinėmis technologijomis. Tai geriausias būdas nustatyti ir ištaisyti prieinamumo problemas.

Internacionalizavimas ir lokalizavimas

Kuriant komponentų API pasaulinei auditorijai, atsižvelkite į internacionalizavimą (i18n) ir lokalizavimą (l10n). Užtikrinkite, kad jūsų komponentus būtų galima lengvai išversti į skirtingas kalbas ir pritaikyti prie skirtingų kultūrinių kontekstų. Štai keli patarimai:

• Naudokite biblioteką i18n ir l10n. Yra daug puikių bibliotekų, tokių kaip `react-intl` ir `i18next`.
• Iškelkite visą tekstą. Nekoduokite teksto eilučių tiesiogiai savo komponentuose.
• Palaikykite skirtingus datos ir skaičių formatus. Pritaikykite savo komponentus prie vartotojo lokalės.
• Apsvarstykite išdėstymus iš dešinės į kairę (RTL). Kai kurios kalbos, pavyzdžiui, arabų ir hebrajų, rašomos iš dešinės į kairę.

Pavyzdžiai iš viso pasaulio

Pažvelkime į keletą pavyzdžių, kaip „ref“ perdavimas gali būti naudojamas skirtinguose kontekstuose visame pasaulyje:

• Elektroninės komercijos programose: „Ref“ perdavimas gali būti naudojamas fokusuoti paieškos laukelį, kai vartotojas pereina į paieškos puslapį, taip pagerinant vartotojo patirtį pirkėjams visame pasaulyje.
• Duomenų vizualizavimo bibliotekose: „Ref“ perdavimas gali būti naudojamas pasiekti pagrindinius diagramų ir grafikų DOM elementus, leidžiant programuotojams pritaikyti jų išvaizdą ir elgesį pagal regioninius duomenų standartus.
• Formų bibliotekose: „Ref“ perdavimas gali būti naudojamas programinei įvesties laukų kontrolei, pavyzdžiui, jų išvalymui ar patvirtinimui, kas ypač naudinga programose, kurios turi atitikti skirtingus duomenų privatumo reglamentus įvairiose šalyse.

Išvados

„Ref“ perdavimas yra galingas įrankis kuriant lanksčias ir palaikomas React komponentų API. Suprasdami ir naudodami šiame straipsnyje aptartus modelius, galite kurti komponentus, kurie yra lengvai naudojami, pritaikomi skirtingiems naudojimo atvejams ir atsparūs pokyčiams. Nepamirškite atsižvelgti į prieinamumą ir internacionalizavimą kurdami savo komponentus, kad užtikrintumėte, jog jie būtų naudojami pasaulinei auditorijai.

Įvaldę „ref“ perdavimą ir kitas pažangias React technikas, galite tapti efektyvesniu ir vertingesniu React programuotoju. Toliau tyrinėkite, eksperimentuokite ir tobulinkite savo įgūdžius, kad sukurtumėte nuostabias vartotojo sąsajas, kurios džiugintų vartotojus visame pasaulyje.