React qanday ishlaydi?

React — bu foydalanuvchi interfeyslarini yaratish uchun JavaScript kutubxonasi.

React ning asosiy prinsiplari va mexanizmlari quyidagilardan iborat:

1. Komponent yondashuvi: UI mustaqil va qayta ishlatiladigan komponentlarga bo'linadi. Har bir komponentning holati (state) va xususiyatlari (props) bor, ular uning xulq-atvori va ko'rinishini belgilaydi.

2. Virtual DOM: React xotirada DOM daraxtining yengil tasvirini (virtual DOM) yaratadi. Ma'lumotlar (holat yoki xususiyatlar) o'zgarganda, React yangi virtual DOM daraxtini quradi.

3. Daraxtlarni solishtirish algoritmi (Diffing): React yangi virtual DOM daraxtini avvalgisiga solishtiradi. Bu jarayon "diffing" deb ataladi. Algoritm daraxtlar orasidagi farqlarni tezda topadi.

4. Reconciliation (Yig'ilish): Topilgan farqlarga asoslanib, React haqiqiy DOM ni yangilash uchun minimal operatsiyalar to'plamini hisoblaydi.

5. Haqiqiy DOM ni yangilash: React bu minimal o'zgarishlarni haqiqiy DOM ga qo'llaydi, bu esa qimmatbaho DOM manipulyatsiya operatsiyalarini minimallashtiradi va ishlashni yaxshilaydi.

6. Bir yo'nalishli ma'lumot oqimi: React da ma'lumotlar odatda yuqoridan pastga, ota komponentlardan bolalar komponentlarga, props orqali uzatiladi. Bu o'zgarishlarni kuzatishni va debuggingni osonlashtiradi.

7. JSX: JavaScript sintaksisini kengaytirish bo'lib, UI tuzilishini HTML ga o'xshash sintaksis yordamida to'g'ridan-to'g'ri JavaScript ichida tasvirlash imkonini beradi. JSX React ning React.createElement kabi funksiyalar chaqiruvlariga kompilyatsiya qilinadi.

// Oddiy React komponenti misoli
function WelcomeMessage(props) {
  return <h1>Salom, {props.name}!</h1>;
}

// Komponentdan foydalanish
const element = <WelcomeMessage name="Dunyo" />;