We want to hear from you!Take our 2020 Community Survey!

Elementlarni Chizish

Elementlar React ilovalarining eng kichik qurish bloklari hisoblanadi.

Element siz ekranda ko’rmoqchi bo’lgan narsangizni tasvirlaydi.

const element = <h1>Salom Dunyo!</h1>;

Brauzer DOM elementlaridan farqli o’laroq, React elementlari oddiy obyektlar hisoblanadi va ularni yaratish katta kompyuter resurslarini talab qilmaydi. React DOM esa DOM ni React elementlariga mos ravishda yangilashni o’z zimmasiga oladi.

Eslatma:

Kimdir elementlarni keng tarqalgan konsepsiya - “komponent” lar bilan adashtirishi mumkin. Komponentlar keyingi bo’limda tanishtiriladi. Komponentlar o’zi elementlardan iborat, biz sizga boshqa mavzularga o’tishdan oldin, bu bo’limni yakunlashingizni maslahat beramiz.

Elementni DOM ga Chizish

Aytaylik HTML faylimizni qayeridadir <div> bor:

<div id="root"></div>

Buni biz “ildiz” DOM tugunimiz deb ataymiz, chunki ichidagi hamma narsa React DOM orqali boshqariladi.

React bilan qurilgan ilovalar odatda faqat bir dona ildiz DOM tuguni bo’ladi. Agar siz React ni boshqa ishlab turgan ilovaga biriktirmoqchi bo’lsangiz, siz bir biridan alohida bo’lgan bir nechta o’zak DOM elementlarini yaratishingiz mumkin.

React elementini asosiy DOM elementi ichiga chizish uchun, bu ikkisini ReactDOM.render() ichiga tashlang:

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

CodePen da sinab koʻrish

Bu sahifada “Hello, world” deb ko’rsatadi.

Chizilgan Elementni Yangilash

React elementlari o’zgarmas hisoblanadi. Bir marta yaratilgandan keyin, uni bolalari yoki atributlarini o’zgartirolmaysiz. Element kino lentasigadagi bir kadrga o’xshaydi: u ma’lum bir vaqtdagi UI ni tasvirlaydi.

Bizni bilishimizcha, UI ni yangilashning birdan bir yo’li yangi element hosil qilib uni ReactDOM.render() ga uzatishdir.

Mana bu soat misoliga e’tibor bering:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));}

setInterval(tick, 1000);

CodePen da sinab koʻrish

Bu misol ReactDOM.render() ni har soniyada setInterval() kolbek orqali chaqiradi.

Eslatma:

React ilovalari amalda ReactDOM.render()ni faqat bir marta chaqiradi. Keyingi bo’limlarda shunday kodni qanday qilib holatli komponentlar orqali yozishni oʻrganamiz.

Mavzularni sakrab ketmasligingizni maslahat beramiz, chunki bular bir biriga bog’liq.

React Faqat Zarur Narsalarni Yangilaydi

React DOM element va uni bolalarini eskisi bilan solishtirib, DOM ni kerakli holatga keltirish uchun faqat zarur bo’lgan joylarini yangilaydi.

Bundan oldingi misol ni brauzer vositalari orqali ko’zdan kechirishingiz mumkin:

DOM inspector showing granular updates

Har bir soniyada biz butun bir UI daraxtini tasvirlaydigan element hosil qilishimizga qaramasdan, React DOM faqatgina oʻzgargan matnli elementlarnigina yangilaydi.

Tajribamizdan kelib chiqib aytish mumkinki, UIʼni qanday qilib o’zgartirishdan ko’ra, UI qanday ko’rinishga ega bo’lishi kerakligi haqida o’ylash, anchagina xatolarni bartaraf qiladi.

Is this page useful?Edit this page