React js da PureCompent va Component farqlari

Component bu nima ?

Oddiy component lar bu class bilan yaratilgan va React.Component extend qiladigan component lardur. Class Component lar React lifecycle ( hayot sikli ) method larga ega bo'lib va ular orqali state ni boshqara oladilar. Oddiy component lar ota component re-render ( qayta yuklanganda ) bo'lganda va o'zining state lari yoki props o'zgarganda qayta yuklanadi ( re-render bo'ladi ).

import React, { Component } from 'react';

class RegularComponent extends Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

PureComponent bu nima ?

PureComponent bu ham class component hisoblanib React.PureComponent ni extend ( kengaytiradi ) qiladi. Oddiy Component larga o'xshab PureComponent larni ham lifecycle method larga foydalanish huquqiga ega, va PureComponent lar shouldCompoentUpdate lifecycle method ni ishga tushurib component dagi props va state larni keyingi yangilangan state va props bilan qisman solishtiradi ( Oddiy component to'liq solishtiradi yani chuqurroq ), agar o'zgarishlar yo'q bo'lsa u re-render ni o'tkazib yuboradi va performance ni yaxshilashga sababchi bo'ladi ( kerakmas re-render larni olib tashlagani tufayli ).

import React, { PureComponent } from 'react';

class MyPureComponent extends PureComponent {
  render() {
    return <div>{this.props.message}</div>;
  }
}

Qachon Odatiy Component larni ishlatish kerak ?

1. Komponentning chiqishi global holat, tarmoq so'rovlari yoki DOM bilan o'zaro ta'sir kabi tashqi omillarga bog'liq bo'lganda.
2. Komponent proplar sifatida chuqur ma'lumotlar tuzilmalarini qabul qilganda va o'zgarishlar tuzilmaning har qanday darajasida sodir bo'lishi mumkin bo'lganda. Bu holda, PureComponent'ning sayoz taqqoslashi o'zgarishlarni aniqlamasligi mumkin, bu esa eskirgan renderlarga olib keladi.
3. Siz shouldComponentUpdate uchun maxsus mantiqni amalga oshirmoqchi bo'lganingizda, masalan, chuqur taqqoslash yoki ilovangizning o'ziga xos talablariga asoslangan boshqa optimizatsiyalar.

Qachon PureComponent larni ishlatish kerak ?

1. Komponent chiqishi faqat uning holati ( state ) va proplariga bog'liq bo'lganda va tarmoq so'rovlari yoki DOM bilan o'zaro ta'sir kabi side effect lar bo'lmaganda.
2. Komponent murakkab ma'lumotlar tuzilmalarini prop sifatida qabul qilganda va o'zgarishlar faqat yuqori darajada sodir bo'lishini ta'minlay olganingizda, chunki PureComponent sayoz taqqoslashni amalga oshiradi.

Eslatma, PureComponent chuqur ma'lumotlar tuzilmalari yoki render paytida yaratilgan funktsiyalar yoki obyektlarga bog'liq bo'lgan komponentlar uchun mos kelmasligi mumkin, chunki PureComponent'ning sayoz ( shallow comparision ) taqqoslashi bu holatlarda o'zgarishlarni aniqlamasligi mumkin.

https://t.me/shahzodcodes