React Render: Komponentlarni Render Qilish va Hayot Siklini Boshqarish

React, foydalanuvchi interfeyslarini yaratish uchun mashhur JavaScript kutubxonasi bo'lib, komponentlarni ko'rsatish va yangilash uchun samarali render jarayoniga tayanadi. React komponentlarni qanday render qilishi, ularning hayot siklini boshqarishi va samaradorlikni optimallashtirishini tushunish, mustahkam va kengaytiriladigan ilovalar yaratish uchun juda muhimdir. Ushbu keng qamrovli qo'llanma bu tushunchalarni batafsil o'rganib chiqadi, butun dunyodagi dasturchilar uchun amaliy misollar va eng yaxshi amaliyotlarni taqdim etadi.

React Render Jarayonini Tushunish

Reactning ishlashining markazida uning komponentlarga asoslangan arxitekturasi va Virtual DOM yotadi. Komponentning state'i yoki props'lari o'zgarganda, React haqiqiy DOMni to'g'ridan-to'g'ri o'zgartirmaydi. Buning o'rniga, u DOMning virtual tasvirini, ya'ni Virtual DOMni yaratadi. Keyin, React Virtual DOMni avvalgi versiya bilan solishtiradi va haqiqiy DOMni yangilash uchun kerak bo'lgan minimal o'zgarishlar to'plamini aniqlaydi. "Reconciliation" (solishtirish) deb nomlanuvchi bu jarayon samaradorlikni sezilarli darajada oshiradi.

Virtual DOM va Reconciliation (Solishtirish)

Virtual DOM haqiqiy DOMning yengil, xotirada saqlanadigan tasviridir. Uni haqiqiy DOMga qaraganda ancha tezroq va samaraliroq boshqarish mumkin. Komponent yangilanganda, React yangi Virtual DOM daraxtini yaratadi va uni avvalgi daraxt bilan solishtiradi. Bu solishtirish React'ga haqiqiy DOMdagi qaysi tugunlarni yangilash kerakligini aniqlash imkonini beradi. Keyin React ushbu minimal yangilanishlarni haqiqiy DOMga qo'llaydi, bu esa tezroq va samaraliroq render jarayonini ta'minlaydi.

Ushbu soddalashtirilgan misolni ko'rib chiqing:

Stsenariy: Tugmani bosish ekranda ko'rsatilgan hisoblagichni yangilaydi.

Reactsiz: Har bir bosish to'liq DOM yangilanishini ishga tushirishi, butun sahifani yoki uning katta qismlarini qayta render qilishi mumkin, bu esa sust ishlashga olib keladi.

React bilan: Faqat Virtual DOM ichidagi hisoblagich qiymati yangilanadi. Reconciliation jarayoni bu o'zgarishni aniqlaydi va uni haqiqiy DOMdagi tegishli tugunga qo'llaydi. Sahifaning qolgan qismi o'zgarishsiz qoladi, bu esa silliq va sezgir foydalanuvchi tajribasini ta'minlaydi.

React O'zgarishlarni Qanday Aniqlaydi: Diffing Algoritmi

Reactning diffing (farqlash) algoritmi reconciliation jarayonining markazidir. U yangi va eski Virtual DOM daraxtlarini solishtirib, farqlarni aniqlaydi. Algoritm solishtirishni optimallashtirish uchun bir nechta taxminlarga tayanadi:

• Har xil turdagi ikkita element har xil daraxtlar hosil qiladi. Agar ildiz elementlar har xil turga ega bo'lsa (masalan, <div>ni <span>ga o'zgartirish), React eski daraxtni o'chirib, yangi daraxtni noldan quradi.
• Bir xil turdagi ikkita elementni solishtirganda, React o'zgarishlar bor-yo'qligini aniqlash uchun ularning atributlariga qaraydi. Agar faqat atributlar o'zgargan bo'lsa, React mavjud DOM tugunining atributlarini yangilaydi.
• React ro'yxat elementlarini noyob tarzda aniqlash uchun key prop'idan foydalanadi. key prop'ini taqdim etish React'ga butun ro'yxatni qayta render qilmasdan ro'yxatlarni samarali yangilash imkonini beradi.

Ushbu taxminlarni tushunish dasturchilarga samaraliroq React komponentlarini yozishga yordam beradi. Masalan, ro'yxatlarni render qilganda key'lardan foydalanish samaradorlik uchun juda muhim.

React Komponentining Hayot Sikli

React komponentlari aniq belgilangan hayot sikliga ega bo'lib, u komponent mavjudligining ma'lum nuqtalarida chaqiriladigan bir qator metodlardan iborat. Ushbu hayot sikli metodlarini tushunish dasturchilarga komponentlarning qanday render qilinishi, yangilanishi va o'chirilishini nazorat qilish imkonini beradi. Hooklar joriy etilishi bilan hayot sikli metodlari hali ham dolzarb bo'lib, ularning asosiy tamoyillarini tushunish foydalidir.

Sinf Komponentlaridagi Hayot Sikli Metodlari

Sinflarga asoslangan komponentlarda hayot sikli metodlari komponent hayotining turli bosqichlarida kodni bajarish uchun ishlatiladi. Quyida asosiy hayot sikli metodlarining umumiy ko'rinishi keltirilgan:

• constructor(props): Komponent montaj qilinishidan oldin chaqiriladi. U state'ni ishga tushirish va hodisalarni boshqaruvchilarni (event handlers) bog'lash uchun ishlatiladi.
• static getDerivedStateFromProps(props, state): Render qilishdan oldin, ham dastlabki montajda, ham keyingi yangilanishlarda chaqiriladi. U state'ni yangilash uchun obyekt yoki yangi props'lar hech qanday state yangilanishini talab qilmasligini bildirish uchun null qaytarishi kerak. Bu metod prop o'zgarishlariga asoslangan holda state'ni oldindan aytib bo'ladigan tarzda yangilashga yordam beradi.
• render(): Render qilinadigan JSX'ni qaytaradigan majburiy metod. U props va state'ning sof funksiyasi bo'lishi kerak.
• componentDidMount(): Komponent montaj qilinganidan (daraxtga kiritilgandan) so'ng darhol chaqiriladi. Bu ma'lumotlarni olish yoki obunalarni sozlash kabi qo'shimcha effektlarni (side effects) bajarish uchun yaxshi joy.
• shouldComponentUpdate(nextProps, nextState): Yangi props yoki state qabul qilinganda render qilishdan oldin chaqiriladi. U keraksiz qayta renderlarning oldini olish orqali samaradorlikni optimallashtirishga imkon beradi. Agar komponent yangilanishi kerak bo'lsa true, aks holda false qaytarishi kerak.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM yangilanishidan oldin darhol chaqiriladi. DOMdan ma'lumotlarni (masalan, aylantirish holati) o'zgarishidan oldin olish uchun foydalidir. Qaytarilgan qiymat componentDidUpdate() ga parametr sifatida uzatiladi.
• componentDidUpdate(prevProps, prevState, snapshot): Yangilanish sodir bo'lganidan so'ng darhol chaqiriladi. Bu komponent yangilangandan so'ng DOM operatsiyalarini bajarish uchun yaxshi joy.
• componentWillUnmount(): Komponent o'chirilishidan va yo'q qilinishidan oldin darhol chaqiriladi. Bu hodisa tinglovchilarini olib tashlash yoki tarmoq so'rovlarini bekor qilish kabi resurslarni tozalash uchun yaxshi joy.
• static getDerivedStateFromError(error): Render qilish paytida xatolik yuz bergandan so'ng chaqiriladi. U xatoni argument sifatida qabul qiladi va state'ni yangilash uchun qiymat qaytarishi kerak. Bu komponentga zaxira UI'ni ko'rsatishga imkon beradi.
• componentDidCatch(error, info): Pastki komponentda render qilish paytida xatolik yuz bergandan so'ng chaqiriladi. U xato va komponentlar stekki ma'lumotlarini argument sifatida qabul qiladi. Bu xatolarni xatoliklar haqida hisobot beruvchi xizmatga yozib qo'yish uchun yaxshi joy.

Hayot Sikli Metodlarining Amaldagi Misoli

O'rnatilganda API'dan ma'lumotlarni oladigan va props'lari o'zgarganda ma'lumotlarni yangilaydigan komponentni ko'rib chiqing:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Ma'lumotlarni olishda xatolik:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Yuklanmoqda...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

Ushbu misolda:

• componentDidMount() komponent birinchi marta o'rnatilganda ma'lumotlarni oladi.
• componentDidUpdate() agar url prop o'zgarsa, ma'lumotlarni qaytadan oladi.
• render() metodi ma'lumotlar olinayotganda yuklanish xabarini ko'rsatadi va ma'lumotlar mavjud bo'lgach, ularni render qiladi.

Hayot Sikli Metodlari va Xatoliklarni Boshqarish

React, shuningdek, render qilish paytida yuzaga keladigan xatoliklarni boshqarish uchun hayot sikli metodlarini taqdim etadi:

• static getDerivedStateFromError(error): Render qilish paytida xatolik yuz bergandan so'ng chaqiriladi. U xatoni argument sifatida qabul qiladi va state'ni yangilash uchun qiymat qaytarishi kerak. Bu komponentga zaxira UI'ni ko'rsatishga imkon beradi.
• componentDidCatch(error, info): Pastki komponentda render qilish paytida xatolik yuz bergandan so'ng chaqiriladi. U xato va komponentlar stekki ma'lumotlarini argument sifatida qabul qiladi. Bu xatolarni xatoliklar haqida hisobot beruvchi xizmatga yozib qo'yish uchun yaxshi joy.

Ushbu metodlar sizga xatoliklarni osonlik bilan boshqarish va ilovangizning ishdan chiqishini oldini olish imkonini beradi. Masalan, foydalanuvchiga xato xabarini ko'rsatish uchun getDerivedStateFromError() dan va xatoni serverga yozib qo'yish uchun componentDidCatch() dan foydalanishingiz mumkin.

Hooklar va Funksional Komponentlar

React 16.8 versiyasida taqdim etilgan React Hooklar funksional komponentlarda state va boshqa React xususiyatlaridan foydalanish imkonini beradi. Funksional komponentlar sinf komponentlari kabi hayot sikli metodlariga ega bo'lmasa-da, Hooklar ekvivalent funksionallikni ta'minlaydi.

• useState(): Funksional komponentlarga state qo'shish imkonini beradi.
• useEffect(): Funksional komponentlarda componentDidMount(), componentDidUpdate() va componentWillUnmount() ga o'xshash qo'shimcha effektlarni (side effects) bajarish imkonini beradi.
• useContext(): React kontekstiga kirish imkonini beradi.
• useReducer(): Reducer funksiyasi yordamida murakkab state'ni boshqarish imkonini beradi.
• useCallback(): Funksiyaning yodda saqlangan (memoized) versiyasini qaytaradi, u faqat bog'liqliklardan biri o'zgargandagina o'zgaradi.
• useMemo(): Yodda saqlangan (memoized) qiymatni qaytaradi, u faqat bog'liqliklardan biri o'zgargandagina qayta hisoblanadi.
• useRef(): Renderlar orasida qiymatlarni saqlab qolish imkonini beradi.
• useImperativeHandle(): ref ishlatilganda ota-komponentlarga taqdim etiladigan instansiya qiymatini sozlaydi.
• useLayoutEffect(): Barcha DOM o'zgarishlaridan so'ng sinxron ravishda ishga tushadigan useEffect versiyasi.
• useDebugValue(): React DevTools'da maxsus hooklar uchun qiymatni ko'rsatish uchun ishlatiladi.

useEffect Hook'i Misoli

Funksional komponentda ma'lumotlarni olish uchun useEffect() Hook'idan qanday foydalanish mumkinligi quyida keltirilgan:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Ma'lumotlarni olishda xatolik:', error);
      }
    }

    fetchData();
  }, [url]); // Effektni faqat URL o'zgarganda qayta ishga tushirish

  if (!data) {
    return <p>Yuklanmoqda...</p>;
  }

  return <div>{data.message}</div>;
}

Ushbu misolda:

• useEffect() komponent birinchi marta render qilinganda va url prop o'zgarganda ma'lumotlarni oladi.
• useEffect() ga ikkinchi argument - bu bog'liqliklar massivi. Agar bog'liqliklardan birortasi o'zgarsa, effekt qayta ishga tushiriladi.
• useState() Hook'i komponentning state'ini boshqarish uchun ishlatiladi.

React Render Samaradorligini Optimallashtirish

Samarali render qilish yuqori unumdorlikka ega React ilovalarini yaratish uchun juda muhimdir. Render samaradorligini optimallashtirish uchun ba'zi usullar:

1. Keraksiz Qayta Renderlarning Oldini Olish

Render samaradorligini optimallashtirishning eng samarali usullaridan biri bu keraksiz qayta renderlarning oldini olishdir. Qayta renderlarning oldini olish uchun ba'zi usullar:

• React.memo() dan foydalanish: React.memo() bu funksional komponentni yodda saqlaydigan (memoizes) yuqori tartibli komponent. U komponentni faqat uning props'lari o'zgargandagina qayta render qiladi.
• shouldComponentUpdate() ni amalga oshirish: Sinf komponentlarida prop yoki state o'zgarishlariga asoslanib qayta renderlarning oldini olish uchun shouldComponentUpdate() hayot sikli metodini amalga oshirishingiz mumkin.
• useMemo() va useCallback() dan foydalanish: Ushbu Hooklar qiymatlar va funksiyalarni yodda saqlash uchun ishlatilishi mumkin, bu esa keraksiz qayta renderlarning oldini oladi.
• O'zgarmas ma'lumotlar tuzilmalaridan foydalanish: O'zgarmas ma'lumotlar tuzilmalari ma'lumotlarga kiritilgan o'zgarishlar mavjud obyektlarni o'zgartirish o'rniga yangi obyektlar yaratishini ta'minlaydi. Bu o'zgarishlarni aniqlashni osonlashtiradi va keraksiz qayta renderlarning oldini oladi.

2. Kodni Bo'lish (Code-Splitting)

Kod-splitting - bu ilovangizni talab bo'yicha yuklanishi mumkin bo'lgan kichikroq qismlarga bo'lish jarayoni. Bu ilovangizning dastlabki yuklanish vaqtini sezilarli darajada qisqartirishi mumkin.

React kod-splittingni amalga oshirishning bir necha usullarini taqdim etadi:

• React.lazy() va Suspense dan foydalanish: Bu xususiyatlar komponentlarni dinamik ravishda import qilish imkonini beradi, ularni faqat kerak bo'lganda yuklaydi.
• Dinamik importlardan foydalanish: Modullarni talab bo'yicha yuklash uchun dinamik importlardan foydalanishingiz mumkin.

3. Ro'yxat Virtualizatsiyasi

Katta ro'yxatlarni render qilganda, barcha elementlarni bir vaqtning o'zida render qilish sekin bo'lishi mumkin. Ro'yxat virtualizatsiyasi usullari faqat ekranda ko'rinib turgan elementlarni render qilish imkonini beradi. Foydalanuvchi sahifani aylantirganda, yangi elementlar render qilinadi va eski elementlar o'chiriladi.

Ro'yxat virtualizatsiyasi komponentlarini taqdim etadigan bir nechta kutubxonalar mavjud, masalan:

• react-window
• react-virtualized

4. Rasmlarni Optimallashtirish

Rasmlar ko'pincha samaradorlik muammolarining jiddiy manbai bo'lishi mumkin. Rasmlarni optimallashtirish uchun ba'zi maslahatlar:

• Optimallashtirilgan rasm formatlaridan foydalaning: Yaxshiroq siqish va sifat uchun WebP kabi formatlardan foydalaning.
• Rasmlar hajmini o'zgartiring: Rasmlarni ularning ko'rsatilish o'lchamlariga mos ravishda o'zgartiring.
• Rasmlarni kechiktirib yuklash (Lazy load): Rasmlarni faqat ekranda ko'ringanda yuklang.
• CDN dan foydalaning: Rasmlarni foydalanuvchilaringizga geografik jihatdan yaqinroq bo'lgan serverlardan uzatish uchun kontent yetkazib berish tarmog'idan (CDN) foydalaning.

5. Profiling va Tuzatish (Debugging)

React render samaradorligini profiling va tuzatish uchun vositalarni taqdim etadi. React Profiler render samaradorligini yozib olish va tahlil qilish, samaradorlikda muammo tug'dirayotgan komponentlarni aniqlash imkonini beradi.

React DevTools brauzer kengaytmasi React komponentlari, state va props'larni tekshirish uchun vositalarni taqdim etadi.

Amaliy Misollar va Eng Yaxshi Amaliyotlar

Misol: Funksional Komponentni Yodda Saqlash (Memoizing)

Foydalanuvchi nomini ko'rsatadigan oddiy funksional komponentni ko'rib chiqing:

function UserProfile({ user }) {
  console.log('UserProfile render qilinmoqda');
  return <div>{user.name}</div>;
}

Bu komponentning keraksiz qayta render qilinishini oldini olish uchun React.memo() dan foydalanishingiz mumkin:

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('UserProfile render qilinmoqda');
  return <div>{user.name}</div>;
});

Endi, UserProfile faqat user prop o'zgargandagina qayta render qilinadi.

Misol: useCallback() dan Foydalanish

Quyi komponentga qayta qo'ng'iroq (callback) funksiyasini uzatadigan komponentni ko'rib chiqing:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Hisob: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent render qilinmoqda');
  return <button onClick={onClick}>Meni bosing</button>;
}

Ushbu misolda, handleClick funksiyasi ParentComponent'ning har bir renderida qayta yaratiladi. Bu ChildComponentning props'lari o'zgarmagan bo'lsa ham, keraksiz qayta render qilinishiga sabab bo'ladi.

Buning oldini olish uchun handleClick funksiyasini yodda saqlash uchun useCallback() dan foydalanishingiz mumkin:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Funksiyani faqat count o'zgarganda qayta yaratish

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Hisob: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent render qilinmoqda');
  return <button onClick={onClick}>Meni bosing</button>;
}

Endi, handleClick funksiyasi faqat count state o'zgargandagina qayta yaratiladi.

Misol: useMemo() dan Foydalanish

O'zining props'lariga asoslanib hosilaviy qiymatni hisoblaydigan komponentni ko'rib chiqing:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Ushbu misolda, filteredItems massivi MyComponent'ning har bir renderida, hatto items prop o'zgarmagan bo'lsa ham, qayta hisoblanadi. Agar items massivi katta bo'lsa, bu samarasiz bo'lishi mumkin.

Buning oldini olish uchun filteredItems massivini yodda saqlash uchun useMemo() dan foydalanishingiz mumkin:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // Faqat items yoki filter o'zgarganda qayta hisoblash

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Endi, filteredItems massivi faqat items prop yoki filter state o'zgargandagina qayta hisoblanadi.

Xulosa

Reactning render jarayoni va komponent hayot siklini tushunish samarali va qo'llab-quvvatlanadigan ilovalar yaratish uchun zarurdir. Memoizatsiya, kod-splitting va ro'yxat virtualizatsiyasi kabi usullardan foydalanib, dasturchilar render samaradorligini optimallashtirishi va silliq hamda sezgir foydalanuvchi tajribasini yaratishi mumkin. Hooklar joriy etilishi bilan funksional komponentlarda state va qo'shimcha effektlarni boshqarish osonlashdi, bu esa React dasturlashning moslashuvchanligi va qudratini yanada oshirdi. Kichik veb-ilova yoki yirik korporativ tizim yaratayotgan bo'lsangiz ham, Reactning render konsepsiyalarini o'zlashtirish yuqori sifatli foydalanuvchi interfeyslarini yaratish qobiliyatingizni sezilarli darajada yaxshilaydi.

Qo'shimcha Manbalar

• React Hujjatlari: Elementlarni Render Qilish
• React Hujjatlari: State va Hayot Sikli
• React Hujjatlari: Hooklar
• React Hujjatlari: Samaradorlikni Optimallashtirish