React forwardRef: Qayta foydalanish mumkin bo'lgan komponentlar uchun Ref uzatishni mukammal o'zlashtirish

React olamida qayta ishlatiladigan va kompozitsiyalanadigan komponentlarni yaratish juda muhim. Biroq, ba'zida ota komponentdan uning bola komponentining asosiy DOM tuguniga kirish kerak bo'ladi. Aynan shu yerda React.forwardRef yordamga keladi. Ushbu keng qamrovli qo'llanma forwardRefning nozik jihatlarini o'rganib chiqadi, uning maqsadi, amalga oshirilishi, qo'llanilish holatlari va eng yaxshi amaliyotlarini tushuntiradi.

Ref uzatish nima?

Ref uzatish - bu React'dagi texnika bo'lib, ota komponentga bola komponentning DOM tuguni yoki React komponenti nusxasiga kirish imkonini beradi. Aslini olganda, u komponentga uzatilgan ref'ni uning bolalaridan biriga 'uzatadi'. Bu, masalan, kiritish maydoniga fokusni o'rnatish yoki uning o'lchamlarini o'lchash kabi bola komponentning DOM'ini to'g'ridan-to'g'ri boshqarish kerak bo'lganda juda foydali.

forwardRefsiz ref'lar faqat DOM elementlariga yoki sinf komponentlariga to'g'ridan-to'g'ri biriktirilishi mumkin. Funksional komponentlar ref'larni to'g'ridan-to'g'ri qabul qila olmaydi yoki ocha olmaydi.

Nima uchun forwardRefdan foydalanish kerak?

Bir nechta stsenariylar forwardRefdan foydalanishni talab qiladi:

• DOM manipulyatsiyasi: Bola komponentning DOM'i bilan to'g'ridan-to'g'ri ishlash kerak bo'lganda. Masalan, kiritish maydoniga fokusni o'rnatish, animatsiyalarni ishga tushirish yoki elementlarni o'lchash.
• Abstraksiya: Ilovaning boshqa qismlariga moslashtirish yoki integratsiya qilish uchun ma'lum DOM elementlarini ochib berishi kerak bo'lgan qayta ishlatiladigan UI komponentlarini yaratishda.
• Yuqori tartibli komponentlar (HOCs): Komponentni HOC bilan o'rab, ref'lar asosiy komponentga to'g'ri uzatilishini ta'minlash kerak bo'lganda.
• Komponentlar kutubxonalari: Komponentlar kutubxonalarini yaratishda, ref uzatish dasturchilarga komponentlaringizning asosiy DOM elementlariga kirish va ularni sozlash imkonini beradi, bu esa ko'proq moslashuvchanlikni ta'minlaydi.

forwardRef qanday ishlaydi

React.forwardRef bu yuqori tartibli komponent (HOC) bo'lib, o'z argumenti sifatida render funksiyasini qabul qiladi. Ushbu render funksiyasi argument sifatida props va refni oladi. Keyin render funksiyasi React elementini qaytaradi. ref argumenti ota-onadan komponentga uzatilgan ref'dir. Keyin siz ushbu ref'ni render funksiyasi ichidagi bola komponentga biriktirishingiz mumkin.

Jarayonning bosqichma-bosqich tavsifi:

1. Ota komponent useRef yordamida ref yaratadi.
2. Ota komponent ref'ni bola komponentga prop sifatida uzatadi.
3. Bola komponent React.forwardRef bilan o'raladi.
4. forwardRefning render funksiyasi ichida ref DOM elementiga yoki boshqa React komponentiga biriktiriladi.
5. Endi ota komponent DOM tuguniga yoki komponent nusxasiga ref orqali kira oladi.

forwardRefni amalga oshirish: Amaliy misol

forwardRefni oddiy misol bilan ko'rsatamiz: ota komponentga kiritish maydonini dasturiy ravishda fokuslash imkonini beruvchi maxsus kiritish komponenti.

Misol: Ref uzatish bilan maxsus kiritish komponenti

Birinchi bo'lib, maxsus kiritish komponentini yaratamiz:

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"; // Yaxshiroq tuzatish uchun tavsiya etiladi

export default CustomInput;

Ushbu misolda:

• Biz 'react'dan forwardRefni import qilamiz.
• Biz funksional komponentimizni forwardRef bilan o'raymiz.
• forwardRef funksiyasi argument sifatida props va refni oladi.
• Biz refni <input> elementiga biriktiramiz.
• React DevTools'da yaxshiroq nosozliklarni tuzatish uchun displayNameni o'rnatamiz.

Endi, ushbu komponentni ota komponentda qanday ishlatishni ko'rib chiqamiz:

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

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

  useEffect(() => {
    // Komponent o'rnatilganda kiritish maydonini fokuslash
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return (
    <div>
      <CustomInput label="Ism:" id="name" ref={inputRef} placeholder="Ismingizni kiriting" />
    </div>
  );
};

export default ParentComponent;

Ushbu ota komponentda:

• Biz useRef yordamida ref yaratamiz.
• Biz inputRefni CustomInput komponentiga ref propi sifatida uzatamiz.
• useEffect hook'i ichida biz inputRef.current yordamida asosiy DOM tuguniga kiramiz va focus() usulini chaqiramiz.

ParentComponent o'rnatilganda, CustomInput komponentidagi kiritish maydoni avtomatik ravishda fokuslanadi.

forwardRefning qo'llanilish holatlari

Quyida forwardRef juda foydali bo'lgan ba'zi umumiy qo'llanilish holatlari keltirilgan:

1. Kiritish maydonlarini fokuslash

Yuqoridagi misolda ko'rsatilganidek, forwardRef sizga kiritish maydonlarini dasturiy ravishda fokuslash imkonini beradi, bu formani tekshirish, maxsus imkoniyatlar va foydalanuvchi tajribasini yaxshilash uchun foydalidir. Masalan, foydalanuvchi xatolar bilan formani yuborgandan so'ng, foydalanuvchini yo'naltirish uchun xatosi bo'lgan birinchi kiritish maydoniga fokusni o'rnatishingiz mumkin.

2. Element o'lchamlarini o'lchash

Bola komponentning DOM tuguniga kirish va uning o'lchamlarini (kengligi, balandligi va h.k.) o'lchash uchun forwardRefdan foydalanishingiz mumkin. Bu moslashuvchan maketlar, dinamik o'lchamlar va maxsus animatsiyalar yaratish uchun foydalidir. Sahifadagi boshqa elementlarning maketini sozlash uchun dinamik kontent maydonining balandligini o'lchashingiz kerak bo'lishi mumkin.

3. Uchinchi tomon kutubxonalari bilan integratsiya

Ko'pgina uchinchi tomon kutubxonalari ishga tushirish yoki sozlash uchun DOM tugunlariga to'g'ridan-to'g'ri kirishni talab qiladi. forwardRef sizga ushbu kutubxonalarni React komponentlaringiz bilan muammosiz integratsiya qilish imkonini beradi. Grafikni render qilish uchun DOM elementini nishon sifatida talab qiladigan grafik kutubxonasidan foydalanayotganingizni tasavvur qiling. forwardRef sizga o'sha DOM elementini kutubxonaga taqdim etish imkonini beradi.

4. Maxsus imkoniyatlarga ega komponentlar yaratish

Maxsus imkoniyatlar ko'pincha DOM atributlarini to'g'ridan-to'g'ri boshqarishni yoki fokusni boshqarishni talab qiladi. forwardRef maxsus imkoniyatlar standartlariga javob beradigan komponentlar yaratish uchun ishlatilishi mumkin. Masalan, kiritish maydonini xato xabari bilan bog'lash uchun aria-describedby atributini o'rnatishingiz kerak bo'lishi mumkin. Bu kiritish maydonining DOM tuguniga to'g'ridan-to'g'ri kirishni talab qiladi.

5. Yuqori tartibli komponentlar (HOCs)

HOC'larni yaratishda, ref'lar o'ralgan komponentga to'g'ri uzatilishini ta'minlash muhimdir. forwardRef bunga erishishga yordam beradi. Aytaylik, sizda komponentga uslub qo'shadigan HOC mavjud. forwardRefdan foydalanish uslub berilgan komponentga uzatilgan har qanday ref'lar asosiy komponentga uzatilishini ta'minlaydi.

forwardRefdan foydalanish bo'yicha eng yaxshi amaliyotlar

forwardRefdan samarali foydalanishni ta'minlash uchun ushbu eng yaxshi amaliyotlarni hisobga oling:

1. Nosozliklarni tuzatish uchun displayNamedan foydalaning

Har doim forwardRef komponentlaringizda displayName xususiyatini o'rnating. Bu ularni React DevTools'da aniqlashni osonlashtiradi. Masalan:

CustomInput.displayName = "CustomInput";

2. Unumdorlikka e'tibor bering

forwardRef kuchli vosita bo'lsa-da, agar haddan tashqari ko'p ishlatilsa, unumdorlikka ta'sir qilishi mumkin. Keraksiz DOM manipulyatsiyasidan saqlaning va render mantiqingizni optimallashtiring. Ref uzatish bilan bog'liq har qanday unumdorlik muammolarini aniqlash uchun ilovangizni profillang.

3. Ref'lardan oqilona foydalaning

Ref'larni React'ning ma'lumotlar oqimi o'rniga ishlatmang. Ref'lar kamdan-kam va faqat DOM manipulyatsiyasi yoki uchinchi tomon kutubxonalari bilan integratsiya uchun zarur bo'lganda ishlatilishi kerak. Komponent ma'lumotlari va xatti-harakatlarini boshqarish uchun prop'lar va holatga tayaning.

4. Komponentlaringizni hujjatlashtiring

Komponentlaringizda forwardRefni qachon va nima uchun ishlatayotganingizni aniq hujjatlashtiring. Bu boshqa dasturchilarga kodingizni tushunishga va komponentlaringizdan to'g'ri foydalanishga yordam beradi. Komponentdan qanday foydalanish misollarini va uzatilgan ref'ning maqsadini qo'shing.

5. Muqobil variantlarni ko'rib chiqing

forwardRefdan foydalanishdan oldin, yanada mos kelishi mumkin bo'lgan muqobil yechimlar mavjudligini ko'rib chiqing. Masalan, siz to'g'ridan-to'g'ri DOM'ni boshqarish o'rniga prop'lar va holat yordamida kerakli xatti-harakatga erishishingiz mumkin. forwardRefga murojaat qilishdan oldin boshqa variantlarni o'rganing.

forwardRefga muqobil variantlar

forwardRef ko'pincha ref'larni uzatish uchun eng yaxshi yechim bo'lsa-da, ba'zi vaziyatlarda ko'rib chiqishingiz mumkin bo'lgan muqobil yondashuvlar mavjud:

1. Qayta chaqiruvchi ref'lar (Callback Refs)

Qayta chaqiruvchi ref'lar DOM tugunlariga kirishning yanada moslashuvchan usulini taqdim etadi. ref propi uzatish o'rniga, siz DOM tugunini argument sifatida qabul qiladigan funksiyani uzatasiz. Bu sizga DOM tuguni biriktirilganda yoki ajratilganda maxsus mantiqni bajarish imkonini beradi. Biroq, qayta chaqiruvchi ref'lar forwardRefga qaraganda ko'proq kod talab qilishi va o'qilishi qiyinroq bo'lishi mumkin.

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

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

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

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

2. Kompozitsiya

Ba'zi hollarda, siz forwardRefdan foydalanish o'rniga komponentlarni kompozitsiyalash orqali kerakli xatti-harakatga erishishingiz mumkin. Bu murakkab komponentni kichikroq, boshqarilishi osonroq komponentlarga ajratishni va ular o'rtasida ma'lumotlar va xatti-harakatlarni prop'lar yordamida uzatishni o'z ichiga oladi. Kompozitsiya yanada qo'llab-quvvatlanadigan va sinovdan o'tkaziladigan kodga olib kelishi mumkin, ammo u barcha stsenariylar uchun mos kelmasligi mumkin.

3. Render Prop'lari

Render prop'lari qiymati funksiya bo'lgan prop yordamida React komponentlari o'rtasida kodni bo'lishish imkonini beradi. Siz DOM tugunlarini yoki komponent nusxalarini ota komponentga ochib berish uchun render prop'laridan foydalanishingiz mumkin. Biroq, render prop'lari kodingizni murakkablashtirishi va o'qishni qiyinlashtirishi mumkin, ayniqsa bir nechta render prop'lari bilan ishlaganda.

Qochish kerak bo'lgan umumiy xatolar

forwardRef bilan ishlaganda, ushbu umumiy xatolardan qochish muhim:

1. displayNameni o'rnatishni unutish

Yuqorida aytib o'tilganidek, displayName xususiyatini o'rnatishni unutish nosozliklarni tuzatishni qiyinlashtirishi mumkin. Har doim forwardRef komponentlaringiz uchun displayNameni o'rnating.

2. Ref'lardan haddan tashqari ko'p foydalanish

Hamma narsa uchun ref'lardan foydalanish vasvasasiga qarshi turing. Ref'lar kamdan-kam va faqat DOM manipulyatsiyasi yoki uchinchi tomon kutubxonalari bilan integratsiya uchun zarur bo'lganda ishlatilishi kerak. Komponent ma'lumotlari va xatti-harakatlarini boshqarish uchun prop'lar va holatga tayaning.

3. Yaxshi sababsiz DOM'ni to'g'ridan-to'g'ri boshqarish

To'g'ridan-to'g'ri DOM manipulyatsiyasi kodingizni qo'llab-quvvatlash va sinovdan o'tkazishni qiyinlashtirishi mumkin. DOM'ni faqat mutlaqo zarur bo'lganda boshqaring va keraksiz DOM yangilanishlaridan saqlaning.

4. Null ref'larni hisobga olmaslik

Asosiy DOM tuguniga yoki komponent nusxasiga kirishdan oldin har doim ref'ning null emasligini tekshiring. Bu komponent hali o'rnatilmagan yoki o'chirilgan bo'lsa, xatolarning oldini oladi.

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

5. Aylanma bog'liqliklarni yaratish

forwardRefni HOCs yoki render prop'lari kabi boshqa texnikalar bilan birgalikda ishlatganda ehtiyot bo'ling. Komponentlar o'rtasida aylanma bog'liqliklar yaratishdan saqlaning, chunki bu unumdorlik muammolariga yoki kutilmagan xatti-harakatlarga olib kelishi mumkin.

Dunyoning turli burchaklaridan misollar

React va forwardRef tamoyillari universaldir, ammo turli mintaqalardagi dasturchilar uning qo'llanilishini qanday moslashtirishi mumkinligini ko'rib chiqing:

• Lokalizatsiya va internatsionalizatsiya (i18n): Yevropa yoki Osiyoda ko'p tilli ilovalar yaratayotgan dasturchilar turli tillar uchun maketlarni dinamik ravishda sozlash, matnning konteynerlardan chiqib ketmasligini ta'minlash uchun forwardRef yordamida lokalizatsiya qilingan matn elementlarining hajmini o'lchashlari mumkin. Masalan, nemischa so'zlar inglizcha so'zlarga qaraganda uzunroq bo'lishga moyil bo'lib, tuzatishlarni talab qiladi.
• O'ngdan chapga (RTL) maketlar: Yaqin Sharq va Osiyoning ba'zi qismlarida ilovalar ko'pincha RTL maketlarini qo'llab-quvvatlashi kerak. forwardRef joriy maket yo'nalishiga qarab elementlarning joylashuvini dasturiy ravishda sozlash uchun ishlatilishi mumkin.
• Turli xil foydalanuvchilar uchun maxsus imkoniyatlar: Dunyo miqyosida maxsus imkoniyatlar tobora ortib borayotgan tashvishdir. Dasturchilar forwardRef yordamida nogironligi bo'lgan foydalanuvchilar uchun maxsus imkoniyatlarni yaxshilashi mumkin, masalan, ekran o'qish dasturlari uchun elementlarni dasturiy ravishda fokuslash yoki forma maydonlarining tab tartibini sozlash.
• Mintaqaviy API'lar bilan integratsiya: Mahalliy API'lar (masalan, to'lov shlyuzlari, xaritalash xizmatlari) bilan integratsiya qiladigan dasturchilar forwardRef yordamida ushbu API'lar talab qiladigan DOM elementlariga kirishlari mumkin, bu esa moslikni va muammosiz integratsiyani ta'minlaydi.

Xulosa

React.forwardRef qayta ishlatiladigan va kompozitsiyalanadigan React komponentlarini yaratish uchun kuchli vositadir. Ota komponentlarga o'z bolalarining DOM tugunlariga yoki komponent nusxalariga kirish imkonini berish orqali, forwardRef DOM manipulyatsiyasidan tortib uchinchi tomon kutubxonalari bilan integratsiyagacha bo'lgan keng ko'lamli qo'llanilish holatlarini ta'minlaydi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlarga rioya qilish orqali siz forwardRefdan samarali foydalanishingiz va umumiy xatolardan qochishingiz mumkin. Ref'lardan oqilona foydalanishni, komponentlaringizni aniq hujjatlashtirishni va kerak bo'lganda muqobil yechimlarni ko'rib chiqishni unutmang. forwardRefni puxta tushunish bilan siz yanada mustahkam, moslashuvchan va qo'llab-quvvatlanadigan React ilovalarini yaratishingiz mumkin.