ელემენტების რენდერინგი რეაქთში (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) მეთოდს