React savollari

React — foydalanuvchi interfeyslarini (UI) yaratish uchun mo'ljallangan open-source JavaScript kutubxonasi. U Meta tomonidan ishlab chiqilgan va qo'llab-quvvatlanadi hamda dasturchilar tomonidan interaktiv va dinamik veb-ilovalar yaratishda keng qo'llaniladi.

Real DOM o'rniga Virtual DOM'dan foydalanish, JSX, server-side rendering, bir tomonlama data flow yoki data binding, qayta ishlatiladigan component'lar va boshqalar.

JSX — JavaScript uchun sintaksis kengaytmasi bo'lib, JavaScript'ning barcha imkoniyatlariga ega. JSX React “element”larini hosil qiladi. JSX ichiga istalgan JavaScript ifodasini jingalak qavslarga o'rab joylashtirishingiz mumkin. Kompilyatsiyadan so'ng JSX ifodalari oddiy JavaScript obyektlariga aylanadi.

Virtual DOM — UI'ning oddiy JavaScript obyekti ko'rinishidagi tasviri. U elementlar, ularning attribute'lari va kontentini obyektlar hamda ularning property'lari sifatida ifodalovchi node tree. Real DOM esa UI'ning brauzerda ko'rish va tekshirish mumkin bo'lgan haqiqiy tasviri. Virtual DOM'ni o'zgartirish real DOM'ni o'zgartirishdan ancha tez, chunki bunda ekranga hech narsa chizilmaydi. React brauzer DOM'ini eng samarali usulda qanday yangilashni aniqlash uchun ana shu virtual DOM'dan foydalanadi.

Ref'lar DOM node'iga yoki component instance'iga reference olish uchun ishlatiladi. Ular render method'ida yaratilgan DOM node'lari yoki React elementlariga murojaat qilishga yordam beradi. Shuningdek, component biror ma'lumotni “eslab qolishini” xohlasangiz-u, lekin bu ma'lumot yangi render'larni keltirib chiqarmasligi kerak bo'lsa, ref'dan foydalanishingiz mumkin.

Odatda har bir component'ning DOM node'lari private bo'ladi. Biroq ba'zan DOM node'ni parent'ga ochib berish foydali bo'ladi — masalan, unga focus berish imkonini yaratish uchun. Buni yoqish uchun component ta'rifingizni forwardRef() bilan o'rab oling:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} />
    </label>
  );
});

Siz props'dan keyin ikkinchi argument sifatida ref olasiz. Uni ochib bermoqchi bo'lgan DOM node'ga uzating:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

Bu parent Form component'iga MyInput ochib bergan <input> DOM node'iga murojaat qilish imkonini beradi:

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Ushbu Form component'i MyInput'ga ref uzatadi. MyInput component'i esa bu ref'ni <input> brauzer tag'iga forward qiladi. Natijada Form component'i o'sha <input> DOM node'iga murojaat qilib, unda focus()'ni chaqira oladi.

React Fiber — React v16'da asosiy algoritm o'rnini egallagan reconciliation engine. U ekranda nima render qilinishini rejalashtirishga javobgar bo'lgan asosiy algoritmning qayta yozilgan versiyasi. Bu UI'ni samarali yangilash uchun mo'ljallangan algoritmlar to'plami. Mana React Fiber haqida biroz eskirgan, ammo ancha yaxshi maqola.

React — foydalanuvchi interfeyslarini yaratish uchun kutubxona. react paketi faqat renderer'ga bog'liq bo'lmagan kodni, ya'ni React'ning asosiy kutubxonasi, UI'dagi o'zgarishlarni hisoblash algoritmi va boshqa yordamchi vositalarni o'z ichiga oladi. react-dom paketi esa React component'larini DOM'ga render qilishga xos kodni o'z ichiga oladi.

Class component'lar component'larni class'lar yordamida aniqlash imkonini beradi. Component yaratish uchun React.Component class'ini extend qilishingiz mumkin. Class component'lar component darajasidagi lifecycle method'larini aniqlash imkonini ham beradi. Function component'lar React elementini qaytaradigan funksiya yozish orqali aniqlanadi. Functional component'lar React component'larini yozishning afzal ko'riladigan usuli hisoblanadi. Functional component'larda class component'lardagiga o'xshash lifecycle method'lari mavjud emas; buning o'rniga component lifecycle'ini boshqarish uchun React hook'laridan foydalanishingiz mumkin.

Higher-order component (HOC) — component'ni qabul qilib, yangi component qaytaradigan funksiya. Aslida bu React'ning composition'ga asoslangan tabiatidan kelib chiqqan pattern. Higher-Order Component'lar React API'sining bir qismi emas. Ular React'ning composition'ga asoslangan tabiatidan kelib chiqadigan pattern hisoblanadi.

Hook'lar — function component'lardan React state va lifecycle imkoniyatlariga “ulanish” imkonini beradigan funksiyalar. Hook'lar class'lar ichida ishlamaydi — ular React'dan class'larsiz foydalanish imkonini beradi. Keng tarqalgan hook'lardan ba'zilari: useState, useEffect, useMemo, useRef, useCallback va boshqalar.

React'da HTML'ni render qilish uchun dangerouslySetInnerHTML prop'idan foydalanishingiz mumkin. U HTML'ni bevosita React'dan o'rnatish uchun ishlatiladi. Bu property'dan foydalanishda ehtiyot bo'lish kerak, chunki u XSS hujumlariga sabab bo'lishi mumkin.

Reconciliation — React yangi qaytarilgan elementlarni avval render qilinganlari bilan solishtirib, DOM'ni yangilaydigan jarayon. React component'ning state'i o'zgarganda DOM'ni yangilaydi.

Prop drilling — ma'lumotni parent component'dan chuqur ichma-ich joylashgan child component'larga props orqali uzatish jarayoni. React buni taqiqlamasa-da, bu qo'llab-quvvatlash va tushunish qiyin bo'lgan kodga olib kelishi mumkin. Haddan tashqari prop drilling data flow'ni kuzatishni qiyinlashtiradi va keraksiz re-render'larga sabab bo'lishi mumkin. Bu muammolarni yumshatish uchun Context API yoki Redux kabi state management kutubxonalaridan foydalanishingiz mumkin.

React'dagi useEffect hook'i functional component'larda side effect'larni bajarish uchun ishlatiladi. Side effect'larga data fetching, DOM manipulyatsiyasi va tashqi ma'lumot manbalariga subscribe bo'lish kirishi mumkin.

Error boundary'lar — o'zidan pastdagi butun tree'da rendering vaqtida, lifecycle method'larida va constructor ichida yuzaga kelgan JavaScript xatolarini ushlab oladigan maxsus React component'lari. Ular fallback UI ko'rsatish orqali xatolarni ohista qayta ishlash va ushlanmagan xatolar tufayli butun ilovaning ishdan chiqishining oldini olish uchun ishlatiladi.

Ilovangizda error boundary'lar yaratish uchun react-error-boundary paketidan foydalanishingiz mumkin. U xato chiqarishi mumkin bo'lgan istalgan component'ni o'rab olish mumkin bo'lgan ErrorBoundary component'ini taqdim etadi. ErrorBoundary component'i FallbackComponent prop'ini qabul qiladi va xato yuz berganda fallback UI'ni render qilish uchun shundan foydalanadi.

Xatolarni ushlash

import { ErrorBoundary } from 'react-error-boundary';
import { FetchData } from './FetchData';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

export function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <FetchData />
    </ErrorBoundary>
  );
}

Ushbu FetchData component'i render qilinganda xato chiqaradi, ErrorBoundary component'i esa bu xatoni ushlab, ErrorFallback component'ini ko'rsatadi.

export function FetchData() {
  throw new Error('Error fetching data');
  return <p>This will never render</p>;
}

React component'dan bir nechta elementni qaytarishga ruxsat bermaydi. Bir nechta elementni qaytarish uchun fragment'lardan foydalanishingiz mumkin.

React'dagi fragment'lar DOM'ga qo'shimcha node qo'shmasdan, component'ning render method'idan elementlar guruhini qaytarish imkonini beradi. Ular bir nechta elementni parent konteynerga o'ramasdan qaytarmoqchi bo'lganingizda foydali.

createPortal — ReactDOM obyektidagi method. U React elementini parent component'dan tashqaridagi boshqa DOM elementiga render qilish uchun ishlatiladi. Bu modal oynalar, popup'lar yoki tooltip'lar kabi component o'z konteyneridan tashqariga chiqishi kerak bo'lgan holatlarda foydali.

ReactDOM.createPortal(child, container);

Birinchi argument (child) — element, satr yoki fragment kabi render qilinishi mumkin bo'lgan istalgan React child. Ikkinchi argument (container) — DOM elementi.

Quyidagi Modal component'i createPortal yordamida o'z children'ini id'si root bo'lgan DOM elementiga render qiladigan oddiy modal component misoli. Modal component'i App component'ining child'i sifatida render qilinadi, ammo modalning o'zi App component'idan tashqarida render qilinadi.

import { createPortal } from 'react-dom';

export function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: 'white',
        padding: '20px',
        zIndex: 1000,
      }}
    >
      <button onClick={onClose} aria-label="Close Modal">
        Close
      </button>
      {children}
    </div>,
    document.getElementById('root')
  );
}

Modal component'idan quyidagicha foydalanish mumkin:

import { useState } from 'react';
import { Modal } from './modal';

export function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
      </Modal>
    </div>
  );
}

React'dagi flushSync funksiyasi yangilanishlarni sinxron tarzda flush qilish uchun ishlatiladi. U yangilanishlarni yuqori ustuvorlikka ega vazifa ichida bajarilishga rejalashtiradi va boshqaruv chaqiruvchiga qaytarilishidan oldin ular darhol hamda sinxron bajarilishini ta'minlaydi.

import { flushSync } from 'react-dom';

flushSync(callback);

Bu DOM darhol yangilanishi kerak bo'lgan holatlarda foydali, masalan, o'lchovlar uchun yoki sinxron rendering'ni ta'minlash uchun. Biroq flushSync'dan haddan tashqari ko'p foydalanish performance'ning pasayishiga olib kelishi mumkin, shuning uchun undan o'ylab, ehtiyotkorlik bilan foydalanish kerak.

Virtual DOM quyidagi bosqichlarda ishlaydi:

1. Asosidagi ma'lumotlardan biri o'zgarganda, yangi virtual DOM ko'rinishi yaratiladi.
2. So'ngra oldingi DOM ko'rinishi bilan yangisi o'rtasidagi farq hisoblanadi.
3. Hisob-kitoblar tugagach, real DOM faqat haqiqatda o'zgargan qismlar bilan yangilanadi.

React'ning functional component'larida lifecycle'ga o'xshash xatti-harakatlar hook'lar yordamida amalga oshiriladi:

Mounting va Unmounting

useEffect hook'ini bo'sh dependency array ([]) bilan ishlatish hook component DOM'ga mount bo'lgandan keyin ishga tushishini ta'minlaydi.

useEffect(() => {
  // do something after component mounts
  return () => {
    // do something before component unmounts
  };
}, []);

useEffect callback'i ichidan qaytariladigan cleanup funksiyasi component unmount bo'lish arafasida turgan paytda bajarilishi kerak bo'lgan vazifalarni hal qilish mexanizmini taqdim etadi.

Yangilanishlar

useEffect hook'i dependency array'siz yoki aniq dependency'lar bilan chaqirilganda har bir render'dan keyin yoki ko'rsatilgan prop/state o'zgarishlari aniqlanganda bajariladi.

useEffect(() => {
  // do something after every render
});

useEffect(() => {
  // do something after specific prop/state changes
}, [state1, state2]);

JSX'da izohni jingalak qavslarga o'rab, JavaScript'ning ko'p qatorli izoh sintaksisidan foydalanib yozishingiz mumkin.

{/* This is a comment */}

Stateful va stateless component'lar o'rtasidagi asosiy farq shundaki, birida state bor, ikkinchisida esa yo'q. Stateful component'lar o'z state'idagi o'zgarishlarni kuzatib boradi va state o'zgarganda o'zini re-render qiladi. Stateless component'lar esa ularga props orqali uzatilgan narsani render qiladi yoki doim bir xil narsani render qiladi.

React'da component'larni nomlashda PascalCase qoidasidan foydalaniladi, ya'ni component nomidagi har bir so'zning birinchi harfi katta harf bilan yozilishi kerak. Masalan, UserProfile, SidebarItem yoki NavigationMenu. Bu qoida JSX'da custom React component'larini oddiy HTML tag'laridan ajratib turadi, chunki React kichik harf bilan boshlanadigan elementlarni DOM tag'lari, katta harf bilan boshlanadiganlarini esa custom component'lar sifatida qabul qiladi.

React'da ro'yxatni render qilish uchun JavaScript'ning map funksiyasi yordamida elementlar massivi bo'ylab aylanib chiqib, har bir element uchun JSX element qaytarishingiz mumkin. Re-render'lar vaqtida React'ning diffing algoritmi samarali ishlashi uchun ro'yxatdagi har bir elementga unikal key prop'ini berish muhim. Mana oddiy misol:

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Eslatma: Index'ni key sifatida ishlatish ba'zi hollarda ishlashi mumkin bo'lsa-da, elementlar qo'shilishi, o'chirilishi yoki tartibi o'zgarishi mumkin bo'lgan dinamik ro'yxatlar uchun bu odatda tavsiya etilmaydi.

Custom hook'lar — React'da kodni qayta ishlatish mexanizmi bo'lib, component mantiqini qayta ishlatiladigan funksiyalarga ajratib olish imkonini beradi. Custom hook'lar yordamida mantiqni component'lar o'rtasida ulashish yoki murakkab mantiqni abstraksiya ortiga yashirib, component'larni o'qilishi osonroq qilish mumkin.

Keling, tarmoq holati haqidagi ma'lumotni qaytaradigan custom hook misolini ko'rib chiqamiz:

Custom hook yaratish

Custom hook'lar nomi use prefiksi bilan boshlanadi va kerak bo'lsa boshqa hook'larni chaqira oladi. Ular argument qabul qilishi va qiymat qaytarishi ham mumkin.

import { useState, useEffect } from 'react';

function useNetworkStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

Yuqoridagi custom hook brauzerning tarmoq holatini kuzatish uchun useState va useEffect hook'laridan foydalanadi. U brauzer online yoki offline ekanini bildiruvchi boolean qiymat qaytaradi.

Custom hook'dan foydalanish

function NetworkStatus() {
  const isOnline = useNetworkStatus();

  return (
    <div>
      <p>You are {isOnline ? 'online' : 'offline'}.</p>
    </div>
  );
}

React — foydalanuvchi interfeyslarini (UI) yaratish uchun mo'ljallangan open-source JavaScript kutubxonasi. U Meta tomonidan ishlab chiqilgan va qo'llab-quvvatlanadi hamda dasturchilar tomonidan interaktiv va dinamik veb-ilovalar yaratishda keng qo'llaniladi.

Real DOM o'rniga Virtual DOM'dan foydalanish, JSX, server-side rendering, bir tomonlama data flow yoki data binding, qayta ishlatiladigan component'lar va boshqalar.

JSX — JavaScript uchun sintaksis kengaytmasi bo'lib, JavaScript'ning barcha imkoniyatlariga ega. JSX React “element”larini hosil qiladi. JSX ichiga istalgan JavaScript ifodasini jingalak qavslarga o'rab joylashtirishingiz mumkin. Kompilyatsiyadan so'ng JSX ifodalari oddiy JavaScript obyektlariga aylanadi.

Virtual DOM — UI'ning oddiy JavaScript obyekti ko'rinishidagi tasviri. U elementlar, ularning attribute'lari va kontentini obyektlar hamda ularning property'lari sifatida ifodalovchi node tree. Real DOM esa UI'ning brauzerda ko'rish va tekshirish mumkin bo'lgan haqiqiy tasviri. Virtual DOM'ni o'zgartirish real DOM'ni o'zgartirishdan ancha tez, chunki bunda ekranga hech narsa chizilmaydi. React brauzer DOM'ini eng samarali usulda qanday yangilashni aniqlash uchun ana shu virtual DOM'dan foydalanadi.

Props ma'lumotni parent'dan child'ga uzatish uchun ishlatiladi. Ular funksiya argumentlariga o'xshaydi. Props immutable hisoblanadi. State esa component ichida boshqariladi va mutable hisoblanadi.

Yo'q, component'ning state'ini to'g'ridan-to'g'ri o'zgartirib bo'lmaydi. State'ni faqat setState() method'i orqali o'zgartirish mumkin. State o'zgaruvchisini to'g'ridan-to'g'ri o'zgartirish component'ni re-render qilmaydi.

Controlled component — joriy qiymatini props orqali oladigan va o'zgarishlar haqida onChange kabi callback'lar orqali xabar beradigan component. Parent component callback'ni qayta ishlab, o'z state'ini boshqaradi va yangi qiymatlarni props sifatida controlled component'ga uzatadi — ya'ni uni "boshqaradi". Bunday component'ni "dumb component" deb ham atash mumkin.

Uncontrolled component esa o'z state'ini ichida saqlaydi, joriy qiymati kerak bo'lganda esa ref yordamida DOM'dan so'rab olasiz. Bu an'anaviy HTML'ga biroz yaqinroq yondashuv.

React'ning native forma component'larining aksariyati ham controlled, ham uncontrolled usulda ishlatilishini qo'llab-quvvatlaydi:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

CSS stylesheet'lar, inline style'lar, CSS Modules, Styled Components, CSS in JS kutubxonalari va boshqalar.

Satr tipidagi key attribute'i — elementlar massivini render qilishda qo'shishingiz kerak bo'lgan maxsus attribute. Key'lar React'ga qaysi elementlar o'zgargani, qo'shilgani yoki olib tashlanganini aniqlashga yordam beradi. Elementlarga barqaror identifikator berish uchun key'lar massiv ichidagi elementlarga berilishi kerak.

React — foydalanuvchi interfeyslarini yaratish uchun kutubxona. react paketi faqat renderer'ga bog'liq bo'lmagan kodni, ya'ni React'ning asosiy kutubxonasi, UI'dagi o'zgarishlarni hisoblash algoritmi va boshqa yordamchi vositalarni o'z ichiga oladi. react-dom paketi esa React component'larini DOM'ga render qilishga xos kodni o'z ichiga oladi.

Class component'lar component'larni class'lar yordamida aniqlash imkonini beradi. Component yaratish uchun React.Component class'ini extend qilishingiz mumkin. Class component'lar component darajasidagi lifecycle method'larini aniqlash imkonini ham beradi. Function component'lar React elementini qaytaradigan funksiya yozish orqali aniqlanadi. Functional component'lar React component'larini yozishning afzal ko'riladigan usuli hisoblanadi. Functional component'larda class component'lardagiga o'xshash lifecycle method'lari mavjud emas; buning o'rniga component lifecycle'ini boshqarish uchun React hook'laridan foydalanishingiz mumkin.

Hook'lar — function component'lardan React state va lifecycle imkoniyatlariga “ulanish” imkonini beradigan funksiyalar. Hook'lar class'lar ichida ishlamaydi — ular React'dan class'larsiz foydalanish imkonini beradi. Keng tarqalgan hook'lardan ba'zilari: useState, useEffect, useMemo, useRef, useCallback va boshqalar.

React'da HTML'ni render qilish uchun dangerouslySetInnerHTML prop'idan foydalanishingiz mumkin. U HTML'ni bevosita React'dan o'rnatish uchun ishlatiladi. Bu property'dan foydalanishda ehtiyot bo'lish kerak, chunki u XSS hujumlariga sabab bo'lishi mumkin.

React component'dan bir nechta elementni qaytarishga ruxsat bermaydi. Bir nechta elementni qaytarish uchun fragment'lardan foydalanishingiz mumkin.

React'dagi fragment'lar DOM'ga qo'shimcha node qo'shmasdan, component'ning render method'idan elementlar guruhini qaytarish imkonini beradi. Ular bir nechta elementni parent konteynerga o'ramasdan qaytarmoqchi bo'lganingizda foydali.

Server Component'lar serverda render qilinadi va rendering uchun client-side JavaScript talab qilmaydi. Server Component'lar va Client component'lar bitta ilovada birga ishlay oladi; bunda Server Component'lar Client component'larni import qilib, render qilishi mumkin.

Server Component'lar rendering vaqtida ma'lumot olish uchun backend resurslari, ma'lumotlar bazalari yoki fayl tizimlariga bevosita murojaat qila oladi, bu esa data fetching uchun alohida API qatlamiga bo'lgan ehtiyojni yo'qotadi.

React'ning functional component'larida lifecycle'ga o'xshash xatti-harakatlar hook'lar yordamida amalga oshiriladi:

Mounting va Unmounting

useEffect hook'ini bo'sh dependency array ([]) bilan ishlatish hook component DOM'ga mount bo'lgandan keyin ishga tushishini ta'minlaydi.

useEffect(() => {
  // do something after component mounts
  return () => {
    // do something before component unmounts
  };
}, []);

useEffect callback'i ichidan qaytariladigan cleanup funksiyasi component unmount bo'lish arafasida turgan paytda bajarilishi kerak bo'lgan vazifalarni hal qilish mexanizmini taqdim etadi.

Yangilanishlar

useEffect hook'i dependency array'siz yoki aniq dependency'lar bilan chaqirilganda har bir render'dan keyin yoki ko'rsatilgan prop/state o'zgarishlari aniqlanganda bajariladi.

useEffect(() => {
  // do something after every render
});

useEffect(() => {
  // do something after specific prop/state changes
}, [state1, state2]);

JSX'da izohni jingalak qavslarga o'rab, JavaScript'ning ko'p qatorli izoh sintaksisidan foydalanib yozishingiz mumkin.

{/* This is a comment */}

Stateful va stateless component'lar o'rtasidagi asosiy farq shundaki, birida state bor, ikkinchisida esa yo'q. Stateful component'lar o'z state'idagi o'zgarishlarni kuzatib boradi va state o'zgarganda o'zini re-render qiladi. Stateless component'lar esa ularga props orqali uzatilgan narsani render qiladi yoki doim bir xil narsani render qiladi.

index'ni key sifatida ishlatish performance'ga salbiy ta'sir qilishi va component state'i bilan bog'liq muammolarga sabab bo'lishi mumkin. Ro'yxat elementlari qo'shish, o'chirish yoki tartibini o'zgartirish natijasida o'zgarganda index'lardan foydalanish keraksiz re-render'larga yoki hatto UI'ning noto'g'ri yangilanishiga olib kelishi mumkin. React ro'yxatdagi elementlarni aniqlash uchun key'lardan foydalanadi va agar key shunchaki index bo'lsa, u component instance'lari va state'ni noto'g'ri qayta ishlatib yuborishi mumkin. Ayniqsa ro'yxat dinamik bo'lgan yoki elementlar tartibi o'zgarishi mumkin bo'lgan holatlarda barqaror xatti-harakatni ta'minlash uchun key sifatida unikal va barqaror identifikatorlardan foydalanish tavsiya etiladi.

React'da component'larni nomlashda PascalCase qoidasidan foydalaniladi, ya'ni component nomidagi har bir so'zning birinchi harfi katta harf bilan yozilishi kerak. Masalan, UserProfile, SidebarItem yoki NavigationMenu. Bu qoida JSX'da custom React component'larini oddiy HTML tag'laridan ajratib turadi, chunki React kichik harf bilan boshlanadigan elementlarni DOM tag'lari, katta harf bilan boshlanadiganlarini esa custom component'lar sifatida qabul qiladi.

React'da ro'yxatni render qilish uchun JavaScript'ning map funksiyasi yordamida elementlar massivi bo'ylab aylanib chiqib, har bir element uchun JSX element qaytarishingiz mumkin. Re-render'lar vaqtida React'ning diffing algoritmi samarali ishlashi uchun ro'yxatdagi har bir elementga unikal key prop'ini berish muhim. Mana oddiy misol:

const items = ['Apple', 'Banana', 'Cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Eslatma: Index'ni key sifatida ishlatish ba'zi hollarda ishlashi mumkin bo'lsa-da, elementlar qo'shilishi, o'chirilishi yoki tartibi o'zgarishi mumkin bo'lgan dinamik ro'yxatlar uchun bu odatda tavsiya etilmaydi.

Props ma'lumotni parent'dan child'ga uzatish uchun ishlatiladi. Ular funksiya argumentlariga o'xshaydi. Props immutable hisoblanadi. State esa component ichida boshqariladi va mutable hisoblanadi.

Yo'q, component'ning state'ini to'g'ridan-to'g'ri o'zgartirib bo'lmaydi. State'ni faqat setState() method'i orqali o'zgartirish mumkin. State o'zgaruvchisini to'g'ridan-to'g'ri o'zgartirish component'ni re-render qilmaydi.

Controlled component — joriy qiymatini props orqali oladigan va o'zgarishlar haqida onChange kabi callback'lar orqali xabar beradigan component. Parent component callback'ni qayta ishlab, o'z state'ini boshqaradi va yangi qiymatlarni props sifatida controlled component'ga uzatadi — ya'ni uni "boshqaradi". Bunday component'ni "dumb component" deb ham atash mumkin.

Uncontrolled component esa o'z state'ini ichida saqlaydi, joriy qiymati kerak bo'lganda esa ref yordamida DOM'dan so'rab olasiz. Bu an'anaviy HTML'ga biroz yaqinroq yondashuv.

React'ning native forma component'larining aksariyati ham controlled, ham uncontrolled usulda ishlatilishini qo'llab-quvvatlaydi:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

Context props'ni har bir darajada qo'lda uzatib o'tirmasdan, ma'lumotni component tree orqali uzatish imkonini beradi. Context asosan biror ma'lumot turli darajada ichma-ich joylashgan ko'plab component'lar uchun ochiq bo'lishi kerak bo'lganda ishlatiladi.

useContext hook'i functional component'larda context qiymatlarini olish va ulardan foydalanish uchun ishlatiladi. U context consumer'ga ehtiyoj sezmasdan context ma'lumotlariga murojaat qilish imkonini beradi. useContext ayniqsa oraliq component'lar orqali props uzatib o'tirmasdan, ichma-ich joylashgan component'larda context qiymatlaridan foydalanmoqchi bo'lganingizda foydali.

CSS stylesheet'lar, inline style'lar, CSS Modules, Styled Components, CSS in JS kutubxonalari va boshqalar.

Pure component'lar faqat ularga uzatilgan props o'zgargandagina re-render bo'ladi. Masalan, parent component ichida pure child component bo'lsa, parent component'dagi state o'zgarishlari child component'ga uzatilgan props o'zgarmaguncha child component'ni re-render qilmaydi.

Pure component yaratish uchun React'dagi memo funksiyasidan foydalanishingiz mumkin. Bu higher order component bo'lib, component'ni argument sifatida qabul qiladi va yangi component qaytaradi. Yangi component faqat props o'zgargandagina render bo'ladi.

import React, { memo } from 'react';

const ChildComponent = ({ name }) => {
  console.log('Rendering child component');
  return <div>{name}</div>;
};

const PureChildComponent = memo(ChildComponent);

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count - {count}</button>
      <button onClick={() => setName('Jane')}>Change name</button>
      <PureChildComponent name={name} />
    </div>
  );
};

Satr tipidagi key attribute'i — elementlar massivini render qilishda qo'shishingiz kerak bo'lgan maxsus attribute. Key'lar React'ga qaysi elementlar o'zgargani, qo'shilgani yoki olib tashlanganini aniqlashga yordam beradi. Elementlarga barqaror identifikator berish uchun key'lar massiv ichidagi elementlarga berilishi kerak.

Component'larda keraksiz re-render'lar bir nechta sabablarga ko'ra yuzaga kelishi mumkin, va yaxshiroq performance uchun kodni ularni minimallashtiradigan qilib optimallashtirish muhim.

Functional component'larda keraksiz re-render'larning eng keng tarqalgan sabablari:

• JSX props'da inline funksiyalardan foydalanish: Agar child component'larga prop sifatida inline funksiya uzatsangiz, parent component har safar re-render bo'lganda bu component'lar ham re-render bo'ladi. Buning sababi — har bir render'da yangi funksiya yaratiladi. Buni funksiyani memoize qilish uchun useCallback hook'idan foydalanib optimallashtirish mumkin.
• useState hook'ini obyektlar bilan ishlatish: Agar useState hook'ini obyektlar bilan ishlatsangiz, obyektni mutate qilmayotganingizga ishonch hosil qilishingiz kerak. Obyektni mutate qilsangiz, React o'zgarishni aniqlay olmaydi va component'ni re-render qilmaydi. Buni useState hook'i o'rniga useReducer hook'idan foydalanib optimallashtirish mumkin.
• useEffect hook'ini dependency'larsiz ishlatish: Agar useEffect hook'ini dependency'larsiz ishlatsangiz, u har bir render'da ishga tushadi. Buni useEffect hook'iga ikkinchi argument sifatida bo'sh massiv uzatib optimallashtirish mumkin.
• Parent component'ning re-render bo'lishi: Agar parent component re-render bo'lsa, uning barcha child component'lari ham re-render bo'ladi. Buni imkon bo'lgan joylarda child component'ni memoize qilish uchun React.memo'dan foydalanib optimallashtirish mumkin.
• Global state o'zgarishlari: Agar Redux, MobX va shu kabi global state management kutubxonalaridan foydalansangiz va global state o'zgarsa, shu state'dan foydalanadigan barcha component'lar re-render bo'ladi. Buni component'da faqat kerakli state'ni tanlab olish uchun useSelector hook'idan foydalanib optimallashtirish mumkin.
• Context'dan noto'g'ri foydalanish: Agar child component'larga ma'lumot uzatish uchun Context API'dan foydalansangiz va ma'lumot o'zgarsa, barcha child component'lar re-render bo'ladi. Buni component'da faqat kerakli ma'lumotni tanlab olish uchun useContext hook'idan foydalanib optimallashtirish mumkin.

Kodingizdagi keraksiz re-render'larga sabab bo'lishi mumkin bo'lgan potensial muammolarni aniqlash uchun React.StrictMode'dan ham foydalanishingiz mumkin.

useMemo hook'i functional component'da hisoblash jihatidan qimmat operatsiya natijasini memoize qilish uchun ishlatiladi. U operatsiya natijasini keshlab, dependency'lar o'zgarmagan bo'lsa keyingi render'larda keshlangan natijani qaytarish orqali performance'ni optimallashtirishga yordam beradi. Bu keraksiz hisob-kitoblarning oldini olishi mumkin.

Ilgari Concurrent Mode deb atalgan Concurrent React — React'dagi yangi imkoniyatlar to'plami bo'lib, React'ga shoshilinchroq vazifalarni bajarish uchun rendering jarayonini to'xtatib turish imkonini beradi. Natijada React foydalanuvchi harakatlariga tezroq javob bera oladi va silliqroq foydalanuvchi tajribasini taqdim etadi. U rendering ishini kichikroq bo'laklarga bo'lib, ularni bir nechta frame'ga taqsimlash orqali katta component tree'larni render qilayotganda ham UI'ning javob berishini saqlab qoladi.

useTransition hook'i ayrim yangilanishlarni transition sifatida belgilash imkonini beradi, natijada ularning ustuvorligi pasaytiriladi va boshqa, shoshilinchroq yangilanishlar birinchi navbatda qayta ishlanadi. Bu biroz vaqt talab qilishi mumkin bo'lgan yangilanishlar davomida UI javob berishda davom etishini ta'minlaydi.

import { useTransition, useState } from 'react';
import { Posts } from './Posts';
import { Home } from './Home';
import { Contact } from './Contact';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState('home');

  function changePage(newPage: string) {
    startTransition(() => {
      setPage(newPage);
    });
  }

  return (
    <>
      <button onClick={() => changePage('home')}>Home</button>
      <button onClick={() => changePage('posts')}>Posts</button>
      <button onClick={() => changePage('contact')}>Contact</button>
      <hr />
      {isPending && <div>Loading...</div>}
      {page === 'home' && <Home />}
      {page === 'posts' && <Posts />}
      {page === 'contact' && <Contact />}
    </>
  );
}

export function Home() {
  return <div>Home</div>;
}

export function Contact() {
  return <div>Contact</div>;
}

Juda sekin ishlaydigan kodni taqlid qilish uchun Posts component'i sun'iy ravishda 500ms'ga kechiktirilgan.

export function Posts() {
  const items = [];
  for (let i = 0; i < 500; i++) {
    items.push(<SlowPost key={i} />);
  }
  return <ul>{items}</ul>;
}

function SlowPost() {
  const startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return <li>Post</li>;
}

Endi Posts tugmasini bossangiz, UI javob berishda davom etayotganini va post'lar yuklanayotgan paytda ham boshqa sahifalarga o'ta olishingizni ko'rasiz. Farqni ko'rish uchun changePage ichidagi setPage atrofidagi startTransition o'ramini olib tashlab ko'ring.

Component'ni lazy load qilish uchun React'ning lazy() funksiyasini dynamic import() bilan birgalikda ishlatishingiz mumkin. Bu odatda component yuklanayotgan paytda fallback kontentni ko'rsatish uchun Suspense bilan birga qo'llaniladi.

// The component has to be exported as a default export
export default function RoadmapRender() {
  return <h1>This is a lazily-loaded component!</h1>;
}

import { lazy, Suspense } from 'react';

const LazyRoadmapRender = lazy(() => delay(import('./RoadmapRender')));

export function App() {
  const [showRoadmapRender, setShowRoadmapRender] = useState(false);
  return (
    <>
      <button onClick={() => setShowRoadmapRender(true)}>
        Show RoadmapRender
      </button>
      {showRoadmapRender && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyRoadmapRender />
        </Suspense>
      )}
    </>
  );
}

// Helper function to simulate a 2 seconds delay
function delay(promise) {
  return new Promise((resolve) => setTimeout(resolve, 2000)).then(
    () => promise
  );
}

RoadmapRender component'i lazy load qilinadi va Suspense component'i ichida render qilinadi. Component yuklanayotgan paytda Suspense component'i fallback kontentni ko'rsatib turadi.

index'ni key sifatida ishlatish performance'ga salbiy ta'sir qilishi va component state'i bilan bog'liq muammolarga sabab bo'lishi mumkin. Ro'yxat elementlari qo'shish, o'chirish yoki tartibini o'zgartirish natijasida o'zgarganda index'lardan foydalanish keraksiz re-render'larga yoki hatto UI'ning noto'g'ri yangilanishiga olib kelishi mumkin. React ro'yxatdagi elementlarni aniqlash uchun key'lardan foydalanadi va agar key shunchaki index bo'lsa, u component instance'lari va state'ni noto'g'ri qayta ishlatib yuborishi mumkin. Ayniqsa ro'yxat dinamik bo'lgan yoki elementlar tartibi o'zgarishi mumkin bo'lgan holatlarda barqaror xatti-harakatni ta'minlash uchun key sifatida unikal va barqaror identifikatorlardan foydalanish tavsiya etiladi.

Ilova sekin ishlashining sabablari ko'p bo'lishi mumkin. Bunga sekin tarmoq, sekin backend yoki sekin client sabab bo'lishi mumkin. Shuningdek, memory leak, keraksiz re-render'lar yoki katta bundle hajmi ham sabab bo'lishi mumkin.

Quyida performance muammolarini tekshirish va tuzatishga yordam beradigan bir nechta maslahatlar keltirilgan:

React DevTools Profiler'dan foydalaning

React DevTools Profiler component'lar qanday render bo'lishini vizual ko'rish va qimmatga tushadigan render'larni aniqlashga yordam beradi. U keraksiz re-render'larni aniqlashda ham yordam berishi mumkin.

Keraksiz render'larni tekshiring

Component'lar keragidan ko'ra tez-tez render bo'lmasligiga ishonch hosil qiling. useEffect dependency'larini aniq belgilang va har bir render'da yangi obyekt yoki massivlar yaratishdan saqlaning, chunki ular child component'larning keraksiz render bo'lishiga sabab bo'lishi mumkin. why-did-you-render kabi vositalar keraksiz re-render'larni aniqlashga yordam beradi.

Bundle hajmini tahlil qiling

Bundle hajmini tahlil qilish uchun production build'dan foydalaning. webpack-bundle-analyzer yoki source-map-explorer kabi vositalar katta kutubxonalar yoki ishlatilmayotgan kod dastlabki yuklanishni sekinlashtirayotganini ko'rishga yordam beradi.

Rasmlar va asset'larni optimallashtiring

Rasmlar mos o'lchamda bo'lishi va zamonaviy formatlardan foydalanilishiga ishonch hosil qiling. Shuningdek, tez-tez o'zgarmaydigan asset'lar uchun CDN'lardan foydalanishni ko'rib chiqing.

Component'larni lazy load qiling

Bundle'ni bo'laklarga ajratish va component'larni faqat kerak bo'lganda yuklash uchun lazy() va dynamic import'lardan foydalaning. Bu dastlabki yuklanish vaqtini qisqartirishga yordam beradi.

Tarmoq so'rovlarini tekshiring

Sekin API chaqiruvlari yoki katta hajmdagi ma'lumotlarni yuklab olish performance'ga ta'sir qilishi mumkin. Backend'ni optimallashtiring, ma'lumotlarga pagination qo'llang yoki natijalarni keshlang. Data fetching va keshlashni boshqarish uchun @tanstack/react-query yoki swr kabi vositalardan ham foydalanishingiz mumkin.

Testlash uchun production build'dan foydalaning

Performance'ni production build'da testlayotganingizga ishonch hosil qiling, chunki development build'lar qo'shimcha tekshiruvlar va log'lar tufayli odatda sekinroq ishlaydi.

Ilovangizni muntazam profiling va monitoring qilib borish performance muammolarini jiddiy muammoga aylanishidan oldin aniqlash va tuzatishga yordam beradi. Ilovangiz performance'ini vaqt davomida kuzatib borish uchun Lighthouse yoki Calibre kabi vositalardan foydalanishingiz mumkin.

Pure component'lar faqat ularga uzatilgan props o'zgargandagina re-render bo'ladi. Masalan, parent component ichida pure child component bo'lsa, parent component'dagi state o'zgarishlari child component'ga uzatilgan props o'zgarmaguncha child component'ni re-render qilmaydi.

Pure component yaratish uchun React'dagi memo funksiyasidan foydalanishingiz mumkin. Bu higher order component bo'lib, component'ni argument sifatida qabul qiladi va yangi component qaytaradi. Yangi component faqat props o'zgargandagina render bo'ladi.

import React, { memo } from 'react';

const ChildComponent = ({ name }) => {
  console.log('Rendering child component');
  return <div>{name}</div>;
};

const PureChildComponent = memo(ChildComponent);

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('John');

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count - {count}</button>
      <button onClick={() => setName('Jane')}>Change name</button>
      <PureChildComponent name={name} />
    </div>
  );
};

React HTML'dan shunisi bilan farq qiladiki, u brauzerning native event'lariga to'g'ridan-to'g'ri bog'lanish o'rniga synthetic event tizimidan foydalanadi. Bu tizim bir xillik va performance jihatidan afzalliklar beradi, shuningdek React'ga brauzer, server yoki React Native kabi muhitlarga bog'liq bo'lmaslik imkonini beradi.

onClick, onSubmit, onFocus va boshqa event'larning barchasi JavaScript'dagi nomlash qoidasiga mos bo'lishi uchun camelCase'da yoziladi. React event handler'lari jingalak qavslar ichida yoziladi:

function activateLasers(e) {
    e.preventDefault();
    console.log('The button was clicked.');
}

<button onClick={activateLasers}>Activate Lasers</button>

Bu holatda activateLasers — event handler bo'lib, u "synthetic event" deb ham ataladigan React event obyektini qabul qiladi. Bu obyekt asosidagi DOM event'lari bilan bir xil standartga mos keladi, biroq brauzerlar o'rtasidagi ayrim nomuvofiqliklarni tuzatadi.

Ba'zi React event'lari brauzerning native event'lariga bevosita mos kelmaydi. Masalan, onMouseLeave'da e.nativeEvent mouseout event'iga ishora qiladi. Agar biror sababga ko'ra asosidagi brauzer event'i kerak bo'lsa, uni e.nativeEvent'dan o'qing.

Batafsil ma'lumot uchun React hujjatlariga qarang.

Ref'lar DOM node'iga yoki component instance'iga reference olish uchun ishlatiladi. Ular render method'ida yaratilgan DOM node'lari yoki React elementlariga murojaat qilishga yordam beradi. Shuningdek, component biror ma'lumotni “eslab qolishini” xohlasangiz-u, lekin bu ma'lumot yangi render'larni keltirib chiqarmasligi kerak bo'lsa, ref'dan foydalanishingiz mumkin.

Odatda har bir component'ning DOM node'lari private bo'ladi. Biroq ba'zan DOM node'ni parent'ga ochib berish foydali bo'ladi — masalan, unga focus berish imkonini yaratish uchun. Buni yoqish uchun component ta'rifingizni forwardRef() bilan o'rab oling:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} />
    </label>
  );
});

Siz props'dan keyin ikkinchi argument sifatida ref olasiz. Uni ochib bermoqchi bo'lgan DOM node'ga uzating:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const { label, ...otherProps } = props;
  return (
    <label>
      {label}
      <input {...otherProps} ref={ref} />
    </label>
  );
});

Bu parent Form component'iga MyInput ochib bergan <input> DOM node'iga murojaat qilish imkonini beradi:

function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
  }

  return (
    <form>
      <MyInput label="Enter your name:" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Ushbu Form component'i MyInput'ga ref uzatadi. MyInput component'i esa bu ref'ni <input> brauzer tag'iga forward qiladi. Natijada Form component'i o'sha <input> DOM node'iga murojaat qilib, unda focus()'ni chaqira oladi.

Higher-order component (HOC) — component'ni qabul qilib, yangi component qaytaradigan funksiya. Aslida bu React'ning composition'ga asoslangan tabiatidan kelib chiqqan pattern. Higher-Order Component'lar React API'sining bir qismi emas. Ular React'ning composition'ga asoslangan tabiatidan kelib chiqadigan pattern hisoblanadi.

Context props'ni har bir darajada qo'lda uzatib o'tirmasdan, ma'lumotni component tree orqali uzatish imkonini beradi. Context asosan biror ma'lumot turli darajada ichma-ich joylashgan ko'plab component'lar uchun ochiq bo'lishi kerak bo'lganda ishlatiladi.

Reconciliation — React yangi qaytarilgan elementlarni avval render qilinganlari bilan solishtirib, DOM'ni yangilaydigan jarayon. React component'ning state'i o'zgarganda DOM'ni yangilaydi.

Component'larda keraksiz re-render'lar bir nechta sabablarga ko'ra yuzaga kelishi mumkin, va yaxshiroq performance uchun kodni ularni minimallashtiradigan qilib optimallashtirish muhim.

Functional component'larda keraksiz re-render'larning eng keng tarqalgan sabablari:

• JSX props'da inline funksiyalardan foydalanish: Agar child component'larga prop sifatida inline funksiya uzatsangiz, parent component har safar re-render bo'lganda bu component'lar ham re-render bo'ladi. Buning sababi — har bir render'da yangi funksiya yaratiladi. Buni funksiyani memoize qilish uchun useCallback hook'idan foydalanib optimallashtirish mumkin.
• useState hook'ini obyektlar bilan ishlatish: Agar useState hook'ini obyektlar bilan ishlatsangiz, obyektni mutate qilmayotganingizga ishonch hosil qilishingiz kerak. Obyektni mutate qilsangiz, React o'zgarishni aniqlay olmaydi va component'ni re-render qilmaydi. Buni useState hook'i o'rniga useReducer hook'idan foydalanib optimallashtirish mumkin.
• useEffect hook'ini dependency'larsiz ishlatish: Agar useEffect hook'ini dependency'larsiz ishlatsangiz, u har bir render'da ishga tushadi. Buni useEffect hook'iga ikkinchi argument sifatida bo'sh massiv uzatib optimallashtirish mumkin.
• Parent component'ning re-render bo'lishi: Agar parent component re-render bo'lsa, uning barcha child component'lari ham re-render bo'ladi. Buni imkon bo'lgan joylarda child component'ni memoize qilish uchun React.memo'dan foydalanib optimallashtirish mumkin.
• Global state o'zgarishlari: Agar Redux, MobX va shu kabi global state management kutubxonalaridan foydalansangiz va global state o'zgarsa, shu state'dan foydalanadigan barcha component'lar re-render bo'ladi. Buni component'da faqat kerakli state'ni tanlab olish uchun useSelector hook'idan foydalanib optimallashtirish mumkin.
• Context'dan noto'g'ri foydalanish: Agar child component'larga ma'lumot uzatish uchun Context API'dan foydalansangiz va ma'lumot o'zgarsa, barcha child component'lar re-render bo'ladi. Buni component'da faqat kerakli ma'lumotni tanlab olish uchun useContext hook'idan foydalanib optimallashtirish mumkin.

Kodingizdagi keraksiz re-render'larga sabab bo'lishi mumkin bo'lgan potensial muammolarni aniqlash uchun React.StrictMode'dan ham foydalanishingiz mumkin.

Prop drilling — ma'lumotni parent component'dan chuqur ichma-ich joylashgan child component'larga props orqali uzatish jarayoni. React buni taqiqlamasa-da, bu qo'llab-quvvatlash va tushunish qiyin bo'lgan kodga olib kelishi mumkin. Haddan tashqari prop drilling data flow'ni kuzatishni qiyinlashtiradi va keraksiz re-render'larga sabab bo'lishi mumkin. Bu muammolarni yumshatish uchun Context API yoki Redux kabi state management kutubxonalaridan foydalanishingiz mumkin.

React'dagi useEffect hook'i functional component'larda side effect'larni bajarish uchun ishlatiladi. Side effect'larga data fetching, DOM manipulyatsiyasi va tashqi ma'lumot manbalariga subscribe bo'lish kirishi mumkin.

useContext hook'i functional component'larda context qiymatlarini olish va ulardan foydalanish uchun ishlatiladi. U context consumer'ga ehtiyoj sezmasdan context ma'lumotlariga murojaat qilish imkonini beradi. useContext ayniqsa oraliq component'lar orqali props uzatib o'tirmasdan, ichma-ich joylashgan component'larda context qiymatlaridan foydalanmoqchi bo'lganingizda foydali.

useMemo hook'i functional component'da hisoblash jihatidan qimmat operatsiya natijasini memoize qilish uchun ishlatiladi. U operatsiya natijasini keshlab, dependency'lar o'zgarmagan bo'lsa keyingi render'larda keshlangan natijani qaytarish orqali performance'ni optimallashtirishga yordam beradi. Bu keraksiz hisob-kitoblarning oldini olishi mumkin.

createPortal — ReactDOM obyektidagi method. U React elementini parent component'dan tashqaridagi boshqa DOM elementiga render qilish uchun ishlatiladi. Bu modal oynalar, popup'lar yoki tooltip'lar kabi component o'z konteyneridan tashqariga chiqishi kerak bo'lgan holatlarda foydali.

ReactDOM.createPortal(child, container);

Birinchi argument (child) — element, satr yoki fragment kabi render qilinishi mumkin bo'lgan istalgan React child. Ikkinchi argument (container) — DOM elementi.

Quyidagi Modal component'i createPortal yordamida o'z children'ini id'si root bo'lgan DOM elementiga render qiladigan oddiy modal component misoli. Modal component'i App component'ining child'i sifatida render qilinadi, ammo modalning o'zi App component'idan tashqarida render qilinadi.

import { createPortal } from 'react-dom';

export function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;

  return createPortal(
    <div
      role="dialog"
      aria-modal="true"
      style={{
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        backgroundColor: 'white',
        padding: '20px',
        zIndex: 1000,
      }}
    >
      <button onClick={onClose} aria-label="Close Modal">
        Close
      </button>
      {children}
    </div>,
    document.getElementById('root')
  );
}

Modal component'idan quyidagicha foydalanish mumkin:

import { useState } from 'react';
import { Modal } from './modal';

export function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
        <h1>Modal Title</h1>
        <p>Modal Content</p>
      </Modal>
    </div>
  );
}

Ilgari Concurrent Mode deb atalgan Concurrent React — React'dagi yangi imkoniyatlar to'plami bo'lib, React'ga shoshilinchroq vazifalarni bajarish uchun rendering jarayonini to'xtatib turish imkonini beradi. Natijada React foydalanuvchi harakatlariga tezroq javob bera oladi va silliqroq foydalanuvchi tajribasini taqdim etadi. U rendering ishini kichikroq bo'laklarga bo'lib, ularni bir nechta frame'ga taqsimlash orqali katta component tree'larni render qilayotganda ham UI'ning javob berishini saqlab qoladi.

React'dagi renderToString funksiyasi react-dom/server paketining bir qismi bo'lib, React component'larini server tomonda statik HTML satriga render qilish uchun ishlatiladi. U odatda React'da server-side rendering (SSR) uchun qo'llaniladi.

Server Component'lar dasturchilarga client'da emas, balki serverda render qilinadigan component'lar yozish imkonini beradi. An'anaviy component'lardan farqli o'laroq, Server Component'larda client-side runtime bo'lmaydi, ya'ni ular bundle hajmini kichraytiradi va yuklanishni tezlashtiradi. Ular client component'lar bilan muammosiz integratsiya qilina oladi va API qatlamiga ehtiyoj sezmasdan ma'lumotlarni to'g'ridan-to'g'ri backend'dan olishi mumkin. Bu dasturchilarga kamroq client-side kod bilan boy, interaktiv ilovalar yaratish imkonini beradi, natijada performance va developer experience yaxshilanadi.

Component'ni lazy load qilish uchun React'ning lazy() funksiyasini dynamic import() bilan birgalikda ishlatishingiz mumkin. Bu odatda component yuklanayotgan paytda fallback kontentni ko'rsatish uchun Suspense bilan birga qo'llaniladi.

// The component has to be exported as a default export
export default function RoadmapRender() {
  return <h1>This is a lazily-loaded component!</h1>;
}

import { lazy, Suspense } from 'react';

const LazyRoadmapRender = lazy(() => delay(import('./RoadmapRender')));

export function App() {
  const [showRoadmapRender, setShowRoadmapRender] = useState(false);
  return (
    <>
      <button onClick={() => setShowRoadmapRender(true)}>
        Show RoadmapRender
      </button>
      {showRoadmapRender && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyRoadmapRender />
        </Suspense>
      )}
    </>
  );
}

// Helper function to simulate a 2 seconds delay
function delay(promise) {
  return new Promise((resolve) => setTimeout(resolve, 2000)).then(
    () => promise
  );
}

RoadmapRender component'i lazy load qilinadi va Suspense component'i ichida render qilinadi. Component yuklanayotgan paytda Suspense component'i fallback kontentni ko'rsatib turadi.

Suspense — React'dagi component bo'lib, biror component yuklanishini kutish paytida ko'rsatiladigan fallback kontentni belgilash imkonini beradi. U component'larni lazy load qilish uchun lazy() bilan birgalikda ishlatiladi.

import { lazy, Suspense } from 'react';

const LazyRoadmapRender = lazy(() => import('./RoadmapRender'));

export function App() {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={() => setShow(true)}>Show</button>
      {show && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyRoadmapRender />
        </Suspense>
      )}
    </>
  );
}

RoadmapRender component'i yuklanib bo'lmaguncha Suspense component'i Loading... fallback kontentini ko'rsatib turadi.

Virtual DOM quyidagi bosqichlarda ishlaydi:

1. Asosidagi ma'lumotlardan biri o'zgarganda, yangi virtual DOM ko'rinishi yaratiladi.
2. So'ngra oldingi DOM ko'rinishi bilan yangisi o'rtasidagi farq hisoblanadi.
3. Hisob-kitoblar tugagach, real DOM faqat haqiqatda o'zgargan qismlar bilan yangilanadi.

use client directive'i component'lari faqat client'da bajarilishi mo'ljallangan manba fayllarni belgilaydi. Aksincha, use server client-side koddan chaqirilishi mumkin bo'lgan server-side funksiyalarni belgilaydi.

Yo'q, Server Component'larda hook'lar qo'llab-quvvatlanmaydi. Hook'lar client-side imkoniyat bo'lib, Server Component'larda ishlamaydi. Biroq hook'lardan client component'larda foydalanib, ularni Server Component'larga import qilishingiz mumkin.

Custom hook'lar — React'da kodni qayta ishlatish mexanizmi bo'lib, component mantiqini qayta ishlatiladigan funksiyalarga ajratib olish imkonini beradi. Custom hook'lar yordamida mantiqni component'lar o'rtasida ulashish yoki murakkab mantiqni abstraksiya ortiga yashirib, component'larni o'qilishi osonroq qilish mumkin.

Keling, tarmoq holati haqidagi ma'lumotni qaytaradigan custom hook misolini ko'rib chiqamiz:

Custom hook yaratish

Custom hook'lar nomi use prefiksi bilan boshlanadi va kerak bo'lsa boshqa hook'larni chaqira oladi. Ular argument qabul qilishi va qiymat qaytarishi ham mumkin.

import { useState, useEffect } from 'react';

function useNetworkStatus() {
  const [isOnline, setIsOnline] = useState(true);

  useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }

    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

Yuqoridagi custom hook brauzerning tarmoq holatini kuzatish uchun useState va useEffect hook'laridan foydalanadi. U brauzer online yoki offline ekanini bildiruvchi boolean qiymat qaytaradi.

Custom hook'dan foydalanish

function NetworkStatus() {
  const isOnline = useNetworkStatus();

  return (
    <div>
      <p>You are {isOnline ? 'online' : 'offline'}.</p>
    </div>
  );
}

Hydration — server tomonidan yaratilgan markup'ga client-side JavaScript yordamida interaktivlik qo'shish jarayoni. Server-side rendering'dan foydalanganingizda server component tree'ning statik HTML ko'rinishini qaytaradi. Bu brauzerga yetib kelgach, uni interaktiv qilish uchun React statik kontentni "hydrate" qiladi va uni to'liq interaktiv ilovaga aylantiradi.

Strict Mode — React'dagi ilovadagi potensial muammolarni ko'rsatib beradigan vosita. Component tree'ni StrictMode bilan o'rab olsangiz, React uning ichidagi barcha component'lar uchun qo'shimcha tekshiruvlar va ogohlantirishlarni yoqadi. Bu production build'ga ta'sir qilmaydi, ammo development jarayonida foydali ma'lumotlar beradi.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Strict Mode'da React development vaqtida bir nechta qo'shimcha ishlarni bajaradi:

1. Impure rendering tufayli yuzaga keladigan bug'larni aniqlash uchun component'larni ikki marta render qiladi.
2. Effect cleanup yo'qligi sababli yuzaga keladigan xatolarni topish uchun side effect'larni (masalan, data fetching'ni) ikki marta ishga tushiradi.
3. Deprecated API'lar ishlatilayotganini tekshiradi va agar ishlatilsa, console'ga ogohlantirish xabarini chiqaradi.

Ilova sekin ishlashining sabablari ko'p bo'lishi mumkin. Bunga sekin tarmoq, sekin backend yoki sekin client sabab bo'lishi mumkin. Shuningdek, memory leak, keraksiz re-render'lar yoki katta bundle hajmi ham sabab bo'lishi mumkin.

Quyida performance muammolarini tekshirish va tuzatishga yordam beradigan bir nechta maslahatlar keltirilgan:

React DevTools Profiler'dan foydalaning

React DevTools Profiler component'lar qanday render bo'lishini vizual ko'rish va qimmatga tushadigan render'larni aniqlashga yordam beradi. U keraksiz re-render'larni aniqlashda ham yordam berishi mumkin.

Keraksiz render'larni tekshiring

Component'lar keragidan ko'ra tez-tez render bo'lmasligiga ishonch hosil qiling. useEffect dependency'larini aniq belgilang va har bir render'da yangi obyekt yoki massivlar yaratishdan saqlaning, chunki ular child component'larning keraksiz render bo'lishiga sabab bo'lishi mumkin. why-did-you-render kabi vositalar keraksiz re-render'larni aniqlashga yordam beradi.

Bundle hajmini tahlil qiling

Bundle hajmini tahlil qilish uchun production build'dan foydalaning. webpack-bundle-analyzer yoki source-map-explorer kabi vositalar katta kutubxonalar yoki ishlatilmayotgan kod dastlabki yuklanishni sekinlashtirayotganini ko'rishga yordam beradi.

Rasmlar va asset'larni optimallashtiring

Rasmlar mos o'lchamda bo'lishi va zamonaviy formatlardan foydalanilishiga ishonch hosil qiling. Shuningdek, tez-tez o'zgarmaydigan asset'lar uchun CDN'lardan foydalanishni ko'rib chiqing.

Component'larni lazy load qiling

Bundle'ni bo'laklarga ajratish va component'larni faqat kerak bo'lganda yuklash uchun lazy() va dynamic import'lardan foydalaning. Bu dastlabki yuklanish vaqtini qisqartirishga yordam beradi.

Tarmoq so'rovlarini tekshiring

Sekin API chaqiruvlari yoki katta hajmdagi ma'lumotlarni yuklab olish performance'ga ta'sir qilishi mumkin. Backend'ni optimallashtiring, ma'lumotlarga pagination qo'llang yoki natijalarni keshlang. Data fetching va keshlashni boshqarish uchun @tanstack/react-query yoki swr kabi vositalardan ham foydalanishingiz mumkin.

Testlash uchun production build'dan foydalaning

Performance'ni production build'da testlayotganingizga ishonch hosil qiling, chunki development build'lar qo'shimcha tekshiruvlar va log'lar tufayli odatda sekinroq ishlaydi.

Ilovangizni muntazam profiling va monitoring qilib borish performance muammolarini jiddiy muammoga aylanishidan oldin aniqlash va tuzatishga yordam beradi. Ilovangiz performance'ini vaqt davomida kuzatib borish uchun Lighthouse yoki Calibre kabi vositalardan foydalanishingiz mumkin.

React HTML'dan shunisi bilan farq qiladiki, u brauzerning native event'lariga to'g'ridan-to'g'ri bog'lanish o'rniga synthetic event tizimidan foydalanadi. Bu tizim bir xillik va performance jihatidan afzalliklar beradi, shuningdek React'ga brauzer, server yoki React Native kabi muhitlarga bog'liq bo'lmaslik imkonini beradi.

onClick, onSubmit, onFocus va boshqa event'larning barchasi JavaScript'dagi nomlash qoidasiga mos bo'lishi uchun camelCase'da yoziladi. React event handler'lari jingalak qavslar ichida yoziladi:

function activateLasers(e) {
    e.preventDefault();
    console.log('The button was clicked.');
}

<button onClick={activateLasers}>Activate Lasers</button>

Bu holatda activateLasers — event handler bo'lib, u "synthetic event" deb ham ataladigan React event obyektini qabul qiladi. Bu obyekt asosidagi DOM event'lari bilan bir xil standartga mos keladi, biroq brauzerlar o'rtasidagi ayrim nomuvofiqliklarni tuzatadi.

Ba'zi React event'lari brauzerning native event'lariga bevosita mos kelmaydi. Masalan, onMouseLeave'da e.nativeEvent mouseout event'iga ishora qiladi. Agar biror sababga ko'ra asosidagi brauzer event'i kerak bo'lsa, uni e.nativeEvent'dan o'qing.

Batafsil ma'lumot uchun React hujjatlariga qarang.

React Fiber — React v16'da asosiy algoritm o'rnini egallagan reconciliation engine. U ekranda nima render qilinishini rejalashtirishga javobgar bo'lgan asosiy algoritmning qayta yozilgan versiyasi. Bu UI'ni samarali yangilash uchun mo'ljallangan algoritmlar to'plami. Mana React Fiber haqida biroz eskirgan, ammo ancha yaxshi maqola.

Error boundary'lar — o'zidan pastdagi butun tree'da rendering vaqtida, lifecycle method'larida va constructor ichida yuzaga kelgan JavaScript xatolarini ushlab oladigan maxsus React component'lari. Ular fallback UI ko'rsatish orqali xatolarni ohista qayta ishlash va ushlanmagan xatolar tufayli butun ilovaning ishdan chiqishining oldini olish uchun ishlatiladi.

Ilovangizda error boundary'lar yaratish uchun react-error-boundary paketidan foydalanishingiz mumkin. U xato chiqarishi mumkin bo'lgan istalgan component'ni o'rab olish mumkin bo'lgan ErrorBoundary component'ini taqdim etadi. ErrorBoundary component'i FallbackComponent prop'ini qabul qiladi va xato yuz berganda fallback UI'ni render qilish uchun shundan foydalanadi.

Xatolarni ushlash

import { ErrorBoundary } from 'react-error-boundary';
import { FetchData } from './FetchData';

function ErrorFallback({ error, resetErrorBoundary }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

export function App() {
  return (
    <ErrorBoundary FallbackComponent={ErrorFallback}>
      <FetchData />
    </ErrorBoundary>
  );
}

Ushbu FetchData component'i render qilinganda xato chiqaradi, ErrorBoundary component'i esa bu xatoni ushlab, ErrorFallback component'ini ko'rsatadi.

export function FetchData() {
  throw new Error('Error fetching data');
  return <p>This will never render</p>;
}

useTransition hook'i ayrim yangilanishlarni transition sifatida belgilash imkonini beradi, natijada ularning ustuvorligi pasaytiriladi va boshqa, shoshilinchroq yangilanishlar birinchi navbatda qayta ishlanadi. Bu biroz vaqt talab qilishi mumkin bo'lgan yangilanishlar davomida UI javob berishda davom etishini ta'minlaydi.

import { useTransition, useState } from 'react';
import { Posts } from './Posts';
import { Home } from './Home';
import { Contact } from './Contact';

export function App() {
  const [isPending, startTransition] = useTransition();
  const [page, setPage] = useState('home');

  function changePage(newPage: string) {
    startTransition(() => {
      setPage(newPage);
    });
  }

  return (
    <>
      <button onClick={() => changePage('home')}>Home</button>
      <button onClick={() => changePage('posts')}>Posts</button>
      <button onClick={() => changePage('contact')}>Contact</button>
      <hr />
      {isPending && <div>Loading...</div>}
      {page === 'home' && <Home />}
      {page === 'posts' && <Posts />}
      {page === 'contact' && <Contact />}
    </>
  );
}

export function Home() {
  return <div>Home</div>;
}

export function Contact() {
  return <div>Contact</div>;
}

Juda sekin ishlaydigan kodni taqlid qilish uchun Posts component'i sun'iy ravishda 500ms'ga kechiktirilgan.

export function Posts() {
  const items = [];
  for (let i = 0; i < 500; i++) {
    items.push(<SlowPost key={i} />);
  }
  return <ul>{items}</ul>;
}

function SlowPost() {
  const startTime = performance.now();
  while (performance.now() - startTime < 1) {
    // Do nothing for 1 ms per item to emulate extremely slow code
  }

  return <li>Post</li>;
}

Endi Posts tugmasini bossangiz, UI javob berishda davom etayotganini va post'lar yuklanayotgan paytda ham boshqa sahifalarga o'ta olishingizni ko'rasiz. Farqni ko'rish uchun changePage ichidagi setPage atrofidagi startTransition o'ramini olib tashlab ko'ring.

React'dagi flushSync funksiyasi yangilanishlarni sinxron tarzda flush qilish uchun ishlatiladi. U yangilanishlarni yuqori ustuvorlikka ega vazifa ichida bajarilishga rejalashtiradi va boshqaruv chaqiruvchiga qaytarilishidan oldin ular darhol hamda sinxron bajarilishini ta'minlaydi.

import { flushSync } from 'react-dom';

flushSync(callback);

Bu DOM darhol yangilanishi kerak bo'lgan holatlarda foydali, masalan, o'lchovlar uchun yoki sinxron rendering'ni ta'minlash uchun. Biroq flushSync'dan haddan tashqari ko'p foydalanish performance'ning pasayishiga olib kelishi mumkin, shuning uchun undan o'ylab, ehtiyotkorlik bilan foydalanish kerak.

React'dagi renderToString funksiyasi react-dom/server paketining bir qismi bo'lib, React component'larini server tomonda statik HTML satriga render qilish uchun ishlatiladi. U odatda React'da server-side rendering (SSR) uchun qo'llaniladi.

Server Component'lar dasturchilarga client'da emas, balki serverda render qilinadigan component'lar yozish imkonini beradi. An'anaviy component'lardan farqli o'laroq, Server Component'larda client-side runtime bo'lmaydi, ya'ni ular bundle hajmini kichraytiradi va yuklanishni tezlashtiradi. Ular client component'lar bilan muammosiz integratsiya qilina oladi va API qatlamiga ehtiyoj sezmasdan ma'lumotlarni to'g'ridan-to'g'ri backend'dan olishi mumkin. Bu dasturchilarga kamroq client-side kod bilan boy, interaktiv ilovalar yaratish imkonini beradi, natijada performance va developer experience yaxshilanadi.

Server Component'lar serverda render qilinadi va rendering uchun client-side JavaScript talab qilmaydi. Server Component'lar va Client component'lar bitta ilovada birga ishlay oladi; bunda Server Component'lar Client component'larni import qilib, render qilishi mumkin.

Server Component'lar rendering vaqtida ma'lumot olish uchun backend resurslari, ma'lumotlar bazalari yoki fayl tizimlariga bevosita murojaat qila oladi, bu esa data fetching uchun alohida API qatlamiga bo'lgan ehtiyojni yo'qotadi.

use client directive'i component'lari faqat client'da bajarilishi mo'ljallangan manba fayllarni belgilaydi. Aksincha, use server client-side koddan chaqirilishi mumkin bo'lgan server-side funksiyalarni belgilaydi.

Yo'q, Server Component'larda hook'lar qo'llab-quvvatlanmaydi. Hook'lar client-side imkoniyat bo'lib, Server Component'larda ishlamaydi. Biroq hook'lardan client component'larda foydalanib, ularni Server Component'larga import qilishingiz mumkin.

Hydration — server tomonidan yaratilgan markup'ga client-side JavaScript yordamida interaktivlik qo'shish jarayoni. Server-side rendering'dan foydalanganingizda server component tree'ning statik HTML ko'rinishini qaytaradi. Bu brauzerga yetib kelgach, uni interaktiv qilish uchun React statik kontentni "hydrate" qiladi va uni to'liq interaktiv ilovaga aylantiradi.

Suspense — React'dagi component bo'lib, biror component yuklanishini kutish paytida ko'rsatiladigan fallback kontentni belgilash imkonini beradi. U component'larni lazy load qilish uchun lazy() bilan birgalikda ishlatiladi.

import { lazy, Suspense } from 'react';

const LazyRoadmapRender = lazy(() => import('./RoadmapRender'));

export function App() {
  const [show, setShow] = useState(false);
  return (
    <>
      <button onClick={() => setShow(true)}>Show</button>
      {show && (
        <Suspense fallback={<div>Loading...</div>}>
          <LazyRoadmapRender />
        </Suspense>
      )}
    </>
  );
}

RoadmapRender component'i yuklanib bo'lmaguncha Suspense component'i Loading... fallback kontentini ko'rsatib turadi.

Strict Mode — React'dagi ilovadagi potensial muammolarni ko'rsatib beradigan vosita. Component tree'ni StrictMode bilan o'rab olsangiz, React uning ichidagi barcha component'lar uchun qo'shimcha tekshiruvlar va ogohlantirishlarni yoqadi. Bu production build'ga ta'sir qilmaydi, ammo development jarayonida foydali ma'lumotlar beradi.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Strict Mode'da React development vaqtida bir nechta qo'shimcha ishlarni bajaradi:

1. Impure rendering tufayli yuzaga keladigan bug'larni aniqlash uchun component'larni ikki marta render qiladi.
2. Effect cleanup yo'qligi sababli yuzaga keladigan xatolarni topish uchun side effect'larni (masalan, data fetching'ni) ikki marta ishga tushiradi.
3. Deprecated API'lar ishlatilayotganini tekshiradi va agar ishlatilsa, console'ga ogohlantirish xabarini chiqaradi.