Rendering Elements

Elements είναι τα μικρότερα δόκιμα στοιχείων React εφαρμογών.

Ένα element περιγράφει τι θέλεις να δεις στην οθόνη:

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

Εν αντιθέσει με τα στοιχεία του DOM του προγράμματος περιήγησης, τα React elements είναι απλά αντικείμενα, και δεν έχουν μεγάλο κόστος για να τα δημιουγήσεις. Το React DOM φροντίζει να ενημερώσει το DOM ώστε να ταιριάζει με τα React elements.

Σημείωση

Ένας μπορεί να μπερδέψει τα elements με μια ευρύτερη γνωστή έννοια, αυτή των components. Θα παρουσιάσουμε τα components στο επόμενο τμήμα. Τα elements είναι αυτό που περιέχονται από components, και σε ενθαρρύνουμε να διαβάσεις αυτό το τμήμα προτού συνεχίσετε στα επόμενα.

Rendering ένα Element στο DOM

Ας υποθέσουμε πως υπάρχει ένα <div> κάπου στο HTML αρχείο σου:

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

Αυτό το λέμε το “ριζικό” DOM node επειδή όλα μέσα του διαχειρίζεται από το React DOM.

Οι εφαρμογές χτισμένες με μόνο React συνήθως έχουν ένα μοναδικό ριζικό DOM node. Άμα ενσωματώνεις React σε μια υπάρχουσα εφαρμογή, μπορείς να έχεις όσα πολλά απομονωμένα ριζικά DOM nodes που θέλεις.

Να κανείς render ένα React element σε ένα ριζικό DOM node, να τα περάσεις στο ReactDOM.render():

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

Δοκιμάστε το στο CodePen

Εμφανίζει “Hello, world” στη σελίδα.

Ενημέρωση του Rendered Element

Ta React elements είναι αμετάβλητα. Όταν δημουργείς ένα element, δεν μπορείς να αλλάξεις τα παιδιά ή τα χαρακτηριστικά του. Ένα element είναι σαν ένα ενιαίο πλαίσιο σε μια ταινία: εκπροσωπεί το UI σε μια συγκεκριμένη χρονική στιγμή.

Με τις γνώσεις μας μέχρι στιγμής, ο μόνος τρόπος να ενημερώσουμε το UI είναι να δημιουρήσουμε ένα καινούργιο element, και να δοθεί στο ReactDOM.render().

Σκεφτείτε αυτό το παράδειγμα με χρονομετρημένο ρολόι:

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

Αυτό καλεί ReactDOM.render() κάθε δευτερόλεπτο από μια setInterval() επανάκληση.

Σημείωση

Στη πρακτική, οι περισότερες εφαρμογές React καλούν ReactDOM.render() μόνο μια φορά. Στα επόμενα τμήματα, θα μάθουμε πώς αυτός ο κώδικας γίνεται εγκλωβισμένος σε stateful components.

Σας προτείνουμε να μην παραλείψετε θέματα επειδή βασίζονται ο ένας στον άλλο.

Το React Μόνο Ενημερώνει τα Απαραίτητα

Το React DOM συγρίνει το element και τα παιδιά του προηγούμενου, και μόνο εφαρμόζει οι ενημερώσεις απαραίτητες του DOM να φέρει το DOM στην επιθυμητή κατάσταση.

Μπορείτε να επαληθεύσετε ελέγχοντας το τελευταίο παράδειγμα με τα εργαλεία του προγράμματος περιήγησης:

DOM inspector showing granular updates

Αν και δημιουργούμε ένα στοιχείο περιγράφοντας ολόκληρο το δέντρο του UI σε κάθε “τίκ”, μόνο το text node του οποίου τα περιεχόμενα έχουν αλλάξει ενημερώνονται από το React DOM.

Με βάση την εμπειρία μας, όταν σκέφτεστε πως το UI πρέπει να εμφανίζεται σε μια οποιαδήποτε στιγμή αντί για το πως πρέπει να αλλάζει με την πάροδο του χρόνου καταφέρνει να εξαλείψει μια ολόκληρη κατηγορία σφαλμάτων.