გამოიწერე YouTube-ის არხიyoutube white icon svg გამოწერა

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

HTML, CSS-ის ინტენსიური კურსი

კურსის დასრულების შემდეგ შეძლებთ HTML CSS-ით ააწყოთ კომპლექსური ვებ გვერდები.

გაიგე მეტი

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

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-ზე

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

კომენტარები 0