DEV Community: Davron Normo`minov

React 19, nimalar o'zgardi?

Davron Normo`minov — Sat, 07 Dec 2024 20:01:56 +0000

Dasturchi sifatida ishlatadigan texnologiyangizdagi yangiliklardan habardor bo'lishingiz kerak. Yaqinda React ning 19-versiyasi stabil holatga o'tdi. Bu postda 19-versiyada chiqqan o'zgarishlar bilan tanishasiz.

Post ikki qismdan iborat, birinchisi 19-versiyada chiqqan yangiliklar va Reactda qaysi qismlar yaxshilangani haqida. Keling yangiliklardan oldin nimalar yaxshilangani bilan tanishamiz.

`ref` ni props sifatida berish

ref larni props qilib berish uchun forwardRef dan foydalanishga majbur bo'lar edik va bu ortiqchi ish keltirib chiqarardi. Unda yozilgan kod esa bu holarda bo'lar edi:

import { forwardRef } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  // ...
});

Endi esa refni to'g'ridan to'g'ri props qilib berish mumkin

function MyInput({placeholder, ref}) {
  return <input placeholder={placeholder} ref={ref} />
}

//...
<MyInput ref={ref} />

ref uchun cleanup function

Agar ref biror componentda ishlatilsa, bu component UI dan olib tashlanganda (unmount) ref ni tozalash kerak bo'ladi. Bu xotirani samarali boshqarishga, kutilmagan holatlarni oldini olish uchun muhim. Avvalgi versiyalarda bu useEffectning return qismida yozilar edi:

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

    useEffect(() => {
        ref.current = null; // Reset ref if needed
    }, [/* dependencies */]);
}

19-versiyadagi o'zgarishdan so'ng yuqoridagi kod quyidagicha yoziladi:

<input
  ref={(ref) => {
    // ref created

    // NEW: return a cleanup function to reset
    // the ref when element is removed from DOM.
    return () => {
      // ref cleanup
    };
  }}
/>

`useDeferredValue` ga boshlang'ich qiymat berish imkoniyati

initialValue nima uchun berilishi yaxshi bilasiz, shu sababli keyingi bo'limga mumkin )

Metadatalarni qo'llab quvvatlash

meta, title kabi meta elementlarni kerakli sahifaga berish uchun useEffect ichida yoki react-helmet kabi kutubxonalardan foydalanishga to'g'ri kelardi.

19-versiyada bu teglarni to'g'ridan to'g'ri ishlatish imkoniyati qo'shildi.

function BlogPost({post}) {
  return (
    <article>
      <h1>{post.title}</h1>
      <title>{post.title}</title>
      <meta name="author" content="Josh" />
      <link rel="author" href="https://twitter.com/joshcstory/" />
      <meta name="keywords" content={post.keywords} />
      <p>
        Eee equals em-see-squared...
      </p>
    </article>
  );
}

React component ni render qilganda meta teglarni avtomatik

elementi ichiga o'tkazadi.

Stillarni qo'llab quvvatlash

Bu versiyada stillarni optimizatsiya qilishga ham e'tibor qaratishgan, bunda stillarni kerakli vaqtda yuklab olish imkoniyati va precedence atributi qo'shilgan. Bu atribut orqali stillarning DOM ga qo'shilish tartibini boshqarish mumkin. Stillar o'ziga bog'liq component mount bo'lishidan oldin yuklanadi.

Asinxron scriptlarni qo'llab quvvatlash

Huddi stillarga o'xshab asinxron scriptlarni kerakli vaqtda yuklab olish mumkin. Stillar va asinxron scriptlarni yuklaydigan component bir nechta joyda ishlatilganda ularni qayta yuklab olishi haqida o'ylamasangiz ham bo'ladi, chunki birinchi marta yuklanganda keshga saqlangan bo'ladi )

Resurslarni oldindan yuklash

Qaysidir resursni imkon qadar tez yuklab olish sayt performance'iga yaxshi ta'sir qiladi. Bu imkoniyatdan foydalanish uchun React 19 da yangi API lar e'lon qilindi. Bular quyidagilar

preinit - resursni tezda yuklab olib ishlatish uchun (scriptlar yoki modullar);
preload - resursni avvaldan yuklab olish uchun, bu holatda yuklangan resursni tezda ishlatish shart emas (fontlar, stillar)
preconnect - resurs yuklamoqchi bo'lgan serverga connection ochadi, bu esa resurs yuklanish vaqtini tezlashtiradi.
prefetchDNS - preconnect ga o'xshab ishlaydi, farqi connection hosil qilmasdan resurs uchun so'rov yuborilishidan oldin uni yuklab oladi va keshda saqlab turadi.

Custom elementlarni qo'llab quvvatlash

Oldingi versiylarda custom elementlar ishlatilganda React propslarni tanimagan, yangi versiyadan boshlab ularni muammosiz ishlatish mumkin. Custom elementga misol -> <my-element />.

Note - ba'zi joylarda kod orqali misollar berilmadi, misollarni bu yerda ko'rishingiz mumkin

Javascript bilimlaringizni oshiring: Siz bilmagan 5 ta operatorlar bilan tanishamiz.

Davron Normo`minov — Thu, 06 Apr 2023 07:33:31 +0000

Dasturchi sifatida ishlatadigan texnologiyalarimizdagi yangi xususiyatlarni muntazan o'rganib boramiz. Endi boshlagan dasturchilar uchun bu dasturlash tilini o'rganishning bir qismi bo'lishiga qaramasdan, middle hamda senior darajadagi dasturchilar bo'sh vaqtlarini tilning yangi imkoniyatlarini o'rganish bilan o'tkazadilar. Ba'zan bu xususiyatlarni tushunish qiyin yoki ular uchun yetarlicha vaqt ajrata olmaymiz. Bu maqolada Javascript uchun nisbatan yangi bo'lgan optional chaining, nullish coalescing operator, conditional operator, nullish assignment va nullish equality operatorlari haqida ma'lumotga ega bo'lasiz.

Optional chaining (?.)

Optional chaining operatori ob'ektning xususiyati qiymatini olish yoki uning metodini chaqirish uchun ishlatiladi. Agar bu xususiyat yoki chaqirilgan metodning qiymati undefined yoki null bo'lsa, optional chaining ishlatilgan ifoda xatolik qaytarish o'rniga undefined ga teng bo'ladi. Misol uchun:

const sayohatchi = {
  ism: "Alijon",
  yosh: 22,
  manzil: {
    nom: "Toshkent"
  }
}

console.log(sayohatchi.joylashuv?.nom);
// Natija: undefined

console.log(sayohatchi.metodNomi?.());
// Natija: undefined

JavaScriptda 'getter' va 'setter'

Davron Normo`minov — Thu, 28 Apr 2022 06:55:18 +0000

Assalomu alaykum, bugun sizlar bilan JavaScriptda getter va setter metodlari tanishamiz.

Ob'ektlarning ikki xil xususiyati bo'ladi.

Birinchisi, ma'lumot xususiyati (data property). Ma'lumot xususiyati bilan ko'pchiligimiz tanishmiz va barchamiz u bilan ishlaganmiz.

Ikkinchisi, kiruvchi xususiyat (accessor property). Bu tashqaridan qaraganda oddiy property ga o`xshaydigan, _property_ning qiymatini olish hamda yangi qiymat berish uchun mo'ljallangan maxsus funksiya.

getter va setter larni 3 xil usulda hosil qilish mumkin:

odatiy metod yaratish usuli orqali
get va set kalit so`zlari orqali
Object.defineProperty() metodi orqali

getter metodlar

Ob'ekt xususiyatining qiymatini olishning eng oson yo'llaridan biri ularnig har biriga getter metodlarini yozib chiqishdir. Keling getter metodlar qanday hosil qilinishini ko'rib chiqamiz. Dastlab, ishga kirish uchun topshirgan nomzod ob'ektini yaratib olamiz.

const nomzod = {
    ism: "ALi",
    tajriba: 3
}

Agar nomzod xususiyatlari qiymati olmoqchi bo'lsak, quyidagicha kod yozamiz:

nomzod.ism // "Ali"
nomzod.tajriba // 3

Endi, ob'ektga getter metodlarini qo'shamiz. Bu metodlar ob'ektning ism va tajriba xususiyatlari qiymatlarini qaytaradi.

const nomzod = {
    ...

    getIsm: function() {
        return this.ism
    },

    getTajriba: function() {
        return this.tajriba
    }
}

getter va setter metodlari orqali qiymatlar quyidagicha olamiz:

nomzod.getIsm() // "Ali"
nomzod.getTajriba() // 3

Oddiy ko'rinadi, to'g'rimi? Endi sizda savol tug'ilishi mumkin, getter va setter bizga nimaga kerak, ularsiz ham ob'ekt xususiyatini oddiygina qilib chaqirishimiz mumkinku? Bu savolingizga setter metodi bilan tanishganimizda javob olasiz.👇👇👇

setter metodlar

setter metodlarining vazifasi ob'ekt xususiyatiga yangi qiymat o'xlashtirish hisoblanadi. Misol uchun yuqoridagi ob'ektga setter metodlarini yozamiz.

const nomzod = {
    ...

    setIsm: function(newIsm) {
        this.ism = newIsm
    }, 

    setTajriba: function(newTajriba) {
        this.tajriba = newTajriba
    }
}

setter metodlari quyidagicha chaqiramiz.

nomzod.setIsm("Vali")
nomzod.setTajriba(5)

nomzod.getIsm() // "Vali"
nomzod.getTajriba() // 5

Endi qiziq joyiga keldik. getter va setter nimaga kerak? Tasavvur qiling siz yangi qiymat bermoqchi bo'lgan ob'ekt xususiyati bir nechta validatsiyalarda o'tishi kerak, mislo uchun, parol xususiyatini oladigan bo'lsak, parol 8 ta belgidan kam bo'lmasligi, raqam, belgi, katta va kichik harflardan iborat bo'lishi kerak. Yuqoridagi shartlarni if operatori bilan tekshiramiz va har safar yangi qiymat berganimizda o'sha shartni qayta yozamiz.

setter metodlari bilan foydasi shuki, bizga kerakli shartlarni setter metodi ichida yozamiz va har safar yangi qiymat o'zlashtirganimizda qiymat avtomatik ravishda biz yozgan shartlar bo'yicha tekshiriladi.

Hozir buni nomzodning tajriba xususiyati orqali sinab ko'ramiz.

const nomzod = {
    ...

    setIsm: function(newIsm) {
        this.ism = newIsm
    } ,

    setTajriba: function(newTajriba) {
        if(newTajriba >= 2) {
            this.tajriba = newTajriba
        } else {
            throw "2 yildan kam tajribali nomzodlar ko'rib chiqilmaydi"
        }
    }
}

nomzod.setTajriba(1.5) // Xatolik beradi va tajriba uchun yangi qiymatni olmaydi.

Demak, getter va setter metodlari bizga qiymat olguncha yoki yangi qiymat berguncha qo'shimcha logika qo'shish va xususiyatlarni xavfsiz qilish uchun kerak ekan.

get va set kalit so'zlari orqali

Biz yuqorida ko'rilgan metodlar get va set kalit so'zlari orqali quyidagi yoziladi.

const nomzod = {
    _ism: "ALi",
    _tajriba: 3,

    get ism() {
        return this._ism
    },

    get tajriba() {
        return this._tajriba
    },

    set ism(newIsm) {
        this._ism = newIsm
    } ,

    set tajriba(newTajriba) {
        if(newTajriba >= 2) {
            this._tajriba = newTajriba
        } else {
            throw "2 yildan kam tajribali nomzodlar ko'rib chiqilmaydi"
        }
    }
}

get va set kalit so'zlari orqali ob'ekt uchun metod emas, balki accessor xususiyat hosil qilinadi, ya'ni ularni metodni chaqirgandek emas xususiyatni chaqirgandek chaqiramiz. Yuqoridagi kodda o'zgaruvchi nomalari bir xil bo'lib qolmasligi uchun ob'ektning ism va tajriba xususiyatlarini mos ravishda _ism va _tajriba ga almashtirdik.

get va set bilan yaratilgan getter va setterning nomlari bir xil bo'lishi hech qanaqa muammo bo'lmaydi, agar xususiyatni chaqirgandek chaqirsak getter ishlaydi, yangi qiymat o'lashtirmoqchi bo'sak setter ishlari.

nomzod.tajriba // getter ishlaydi, tajribaning qiymatini qaytaradi
nomzod.tajriba = 3 // setter ishlaydi, tajriba uchun yangi qiymat oladi.

Object.defineProperty() orqali

Object.defineProperty() orqali biriktirilgan accessor property lar data propertylardan farq qiladi. Ulada value yoki writable o'rniga get va set funksiyalari bo'ladi.

const nomzod = {
    _ism: "ALi",
    _tajriba: 3,
}

Object.defineProperty(nomzod, "tajriba", {
    get() {
        return this._tajriba
    },

    set() {
        if(newTajriba >= 2) {
            this._tajriba = newTajriba
        } else {
            throw "2 yildan kam tajribali nomzodlar ko'rib chiqilmaydi"
        }
    }
})

Xulosa

getter va setter yuqoridagi 3 ta usul orqali yasaladi
ular orqali qiymat olish va berishda qo'shimcha funksionallik berish va qiymatni boshqarish imkoniyatini beradi

Foydali bo'lgan bo'lsa ulashing ;-)

JavaScript Class

Davron Normo`minov — Sun, 24 Apr 2022 04:07:01 +0000

Assalomu alaykum, bugungi maqolamiz JavaScript Class lari haqida bo'ladi.

JavaScriptda class ob'yekt yaratish uchun mo'ljallangan. Bunda class ob'yekt malumotlari va funksiyalarini o'z ichiga oladi. Boshqa dasturlash tillaridan farqli ravishda JavaScriptda class prototipli vorislikka asoslangan maxsus funksiya hisoblanadi.

ES6 dan oldin

ES6 dan oldin JS da class tushunchasi bo'lmagan.Biz bilgan class ni yaratish uchun constructor va prototype dan foydalanilgan.

function Person(name) {
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
};

var ali = new Person("Ali Valiyev");
console.log(ali.getName());

Natija:

Ali Valiyev

Endi yuqoridagi kodning qanday ishlashini tushuntiraman.

Dastlab, name xususiyatiga ega Person konstruktor funksiyasi yaratildi. prototype ga getName() funksiyasi biriktirildi, endi bu funksiyani Person class ishlatilgan barcha holatlarda ishlatishimiz mumkin.

Keyin esa new operatori yordamida Person klassidan namuna oldik. ali ob'yekti prototipli vorislik orqali Person va Object klasslaridan namuna olganligi uchun endi ularning barcha xususiyatlaridan foydalana oladi.

console.log(john instanceof Person); // true
console.log(john instanceof Object); // true

Es6 da class ning e'lon qilinishi

ES6 da class larni e'lon qilish uchun yangi sintaksis yaratildi. Yuqoridagi funksiya konstruktori yordamida yaratilgan class yangi sintaksisda quyidagicha yoziladi.

class Person {
    constructor(name) {
        this.name = name;
    }
    getName() {
        return this.name;
    }
}

Person klassidagi construtor() ichida olinadigan namunaning xususiyatlari e'lon qilinadi va new operatori orqali klassdan namuna olinganda JavaScript avtomatik ravishda constructor() ni chaqiradi.

let ali = new Person("Ali Valiyev");

Person klassidagi getName() metod deb ataladi va bunday qo'llaniladi.

obyektNomi.metodNomi()

Misol uchun

let name = ali.getName();
console.log(name); // "Ali Valiyev"

Biz yuqorida class ni maxsus funksiya dedik, buning isbotini ko'rish uchun Person klassining tipini typeof operatori orqali tekshiramiz.

console.log(typeof Person); // function

Class va funksiya konstruktori

Class va funksiya konstruktori orasida o'xshashlik bo'lishiga qaramasdan, ularda farqlanadigan muhim jihatlar bor.

Birinchi, class e'lon qilinganda funksiyaga o'xshab hoisting ga uchramaydi.

Misol uchun, quyidagi kodni Person klassi e'lon qilinishidan oldin yozsak, natija sifatida ReferenceError ega bo'lamiz.

let ali = new Person("Ali Valiyev");

Xatolik

Uncaught ReferenceError: Person is not defined

Ikkinchi, class ichidagi barcha kodlar avtomatik ravishda strict mode da ishlaydi.

Uchinchi, class metodlari non enumerable, ya'ni sanalmaydi(ular bilan for ... in va Object.keys() ni ishlata olmaymiz). Funksiya konstruktorida esa ob'yekt xususiyatlarini non enumerable qilish uchun Object.defineProperty() metodidan foydalanishimizga to'g'ri keladi.

Va oxirigisi, class konstruktorini new operatorisiz ishlatsak, xatolik beradi.

let ali = Person("Ali Valiyev");

Xatolik

Uncaught TypeError: Class constructor Person cannot be invoked without 'new'

Xulosa

class yaratish uchun class kalit so'zini ishlatamiz.
class prototipli vorislikka asoslangan va kuchaytirilgan maxsus funksiya.

Foydali bo'lgan bo'lsa ulashing )

DEV Community: Davron Normo`minov

React 19, nimalar o'zgardi?

ref ni props sifatida berish

ref uchun cleanup function

useDeferredValue ga boshlang'ich qiymat berish imkoniyati

Metadatalarni qo'llab quvvatlash

Stillarni qo'llab quvvatlash

Asinxron scriptlarni qo'llab quvvatlash

Resurslarni oldindan yuklash

Custom elementlarni qo'llab quvvatlash

Javascript bilimlaringizni oshiring: Siz bilmagan 5 ta operatorlar bilan tanishamiz.

Optional chaining (?.)

JavaScriptda 'getter' va 'setter'

getter metodlar

setter metodlar

get va set kalit so'zlari orqali

Object.defineProperty() orqali

Xulosa

JavaScript Class

ES6 dan oldin

Es6 da class ning e'lon qilinishi

Class va funksiya konstruktori

Xulosa

`ref` ni props sifatida berish

`useDeferredValue` ga boshlang'ich qiymat berish imkoniyati