გამოიწერე YouTube-ის არხიyoutube logoგამოწერა

ელემენტების რენდერინგი რეაქთში (reactjs)

როგორც რეაქთის დოკუმენტაციაში ვკითხულობთ ელემენტი აღწერს თუ რა გვინდა გამოჩნდეს ჩვენს ეკრანზე

const element = <h1>Hello, world</h1>;

განსხვავებით ბრაუზერის DOM ელემენტებისგან, რეაქთის ელემენტები არის ობრალოდ ობიექტები.

ReactDOM პასუხისმგებელია განაახლოს ბრაუზერის DOM, რომელიც ემთხვევა ReactDOM-ის ელემენტებს


რეაქთ (React) ელემენტის დარენდერება DOM-ში

როგორც წინა გაკვეთილში ავღნიშნეთ რეაქთი ელემენტს არენდერებს div სელექტორში, რომელსაც აქვს ატრიბუტო root

<div id="root">
  <!-- რეაქთის ელემენტი(ები) რენდერდება აქ -->
</div>

რეაქთ ელემენტის დასარენდერებრად ჯერ უნდა გამოვიყენოთ ReactDOM.createRoot() მეთოდი, ხოლო შემდეგ მას გადავცეთ დასარენდერებელი რეაქთ ელემენტი

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

დარენდერებული რეაქთ ელემენტის განახლება

რეაქთის ელემენტები არის არა მუტაციური, ანუ, როდესაც ელემენტი შეიქმნება შემდეგ ჩვენ აღარ შეგვიძლია მისი  და მისი შვილი ატრიბუტების შეცვლა.

ჩვენი არსებული ცოდნით იმისთვის, რომ განვაახლოთ UI ჩვენ უნდა გამოვიყენოთ root.render() მეთოდი

მაგალითი:

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

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

setInterval(tick, 1000);

სცადე CodePen-ზე

მოცემულ მაგალითში setInterval() მეთოდი ყოველ 1 წამში გამოიძახებს tick() ფუნქციას, რომელიც თავითავად გამოიძახებს root.render(element) მეთოდს

რეაქთი ელემენტებს ანახლებს მხოლოდ მაშინ, როდესაც საჭიროა

ReactDOM ადარებს არსებულ ელემენტს და მის შვილ ელემენტებს წინა ვერსიებთან და DOM-ს ანახლებს მხოლოდ მაშინ თუ რაიმე თვისება დაფიქსირდება

მაგალითი:


პ.ს.

მოცემული გვერდი დაფუძნებულია reactjs.org-ზე

კურსში შემავალი თემები

🔗 jsx🔗 reactjs

დამატებითი რესურსები

სხვა კატეგორიები

შეისწავლეთ ვებდეველოპმენტის ენები სრულიად უფასოდ, ისეთები როგორებიცაა Javascript, HTML, CSS და კიდევ სხვა მრავალი ენა

ბოლოს დაწერილი ბლოგები პროგრამირებაზე

ქვემოთ მოცემულია უახლესი 3 ბლოგი პროგრამირების თემატიკასთან დაკავშირებით