M

MLOG

Ελληνικά

Ένας περιεκτικός οδηγός που εξερευνά τα React Refs, εστιάζοντας στα useRef και createRef. Μάθετε πώς και πότε να χρησιμοποιήσετε το καθένα για αποτελεσματική διαχείριση στοιχείων και πρόσβαση στο DOM σε παγκόσμιες εφαρμογές.

React Refs: Αποσαφηνίζοντας τα useRef έναντι createRef

Στον δυναμικό κόσμο της ανάπτυξης React, η αποτελεσματική διαχείριση της κατάστασης των στοιχείων και η αλληλεπίδραση με το Document Object Model (DOM) είναι ζωτικής σημασίας. Τα React Refs παρέχουν έναν μηχανισμό για την άμεση πρόσβαση και χειρισμό στοιχείων DOM ή στοιχείων React. Δύο κύριες μέθοδοι για τη δημιουργία Refs είναι τα useRef και createRef. Ενώ και οι δύο εξυπηρετούν τον σκοπό της δημιουργίας Refs, διαφέρουν στην υλοποίηση και τις περιπτώσεις χρήσης τους. Αυτός ο οδηγός στοχεύει να αποσαφηνίσει αυτές τις δύο προσεγγίσεις, παρέχοντας σαφήνεια σχετικά με το πότε και πώς να αξιοποιήσετε αποτελεσματικά καθεμία στα έργα σας React, ειδικά όταν αναπτύσσετε για ένα παγκόσμιο κοινό.

Κατανόηση των React Refs

Ένα Ref (συντομογραφία για αναφορά) είναι ένα χαρακτηριστικό του React που σας επιτρέπει να έχετε άμεση πρόσβαση σε έναν κόμβο DOM ή ένα στοιχείο React. Αυτό είναι ιδιαίτερα χρήσιμο όταν χρειάζεται να:

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

createRef: Η προσέγγιση στοιχείου κλάσης

Το createRef είναι μια μέθοδος που παρέχεται από το React. Χρησιμοποιείται κυρίως μέσα σε στοιχεία κλάσης για τη δημιουργία Refs. Κάθε φορά που δημιουργείται ένα στοιχείο κλάσης, το createRef δημιουργεί ένα νέο αντικείμενο Ref. Αυτό διασφαλίζει ότι κάθε στιγμιότυπο του στοιχείου έχει το δικό του μοναδικό Ref.

Σύνταξη και Χρήση

Για να χρησιμοποιήσετε το createRef, δηλώνετε πρώτα ένα Ref στο στοιχείο κλάσης σας, συνήθως στον constructor. Στη συνέχεια, επισυνάπτετε το Ref σε ένα στοιχείο DOM ή ένα στοιχείο χρησιμοποιώντας το χαρακτηριστικό ref.


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Access the DOM element after the component mounts
    this.myRef.current.focus();
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

Σε αυτό το παράδειγμα, το this.myRef δημιουργείται χρησιμοποιώντας το React.createRef(). Στη συνέχεια, εκχωρείται στο χαρακτηριστικό ref του στοιχείου εισαγωγής. Αφού το στοιχείο τοποθετηθεί (στο componentDidMount), μπορείτε να αποκτήσετε πρόσβαση στον πραγματικό κόμβο DOM χρησιμοποιώντας το this.myRef.current και να εκτελέσετε λειτουργίες σε αυτόν (σε αυτή την περίπτωση, να εστιάσετε στην εισαγωγή).

Παράδειγμα: Εστίαση σε ένα πεδίο εισαγωγής

Ας εξετάσουμε ένα σενάριο όπου θέλετε να εστιάσετε αυτόματα σε ένα πεδίο εισαγωγής όταν τοποθετείται ένα στοιχείο. Αυτή είναι μια κοινή περίπτωση χρήσης για τα Refs, ειδικά σε φόρμες ή διαδραστικά στοιχεία.


class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
      </div>
    );
  }
}

Σε αυτό το παράδειγμα, το FocusInput εστιάζει στο πεδίο εισαγωγής αμέσως μετά την τοποθέτηση. Αυτό μπορεί να βελτιώσει την εμπειρία χρήστη κατευθύνοντας την προσοχή του χρήστη στο στοιχείο εισαγωγής μόλις αποδοθεί το στοιχείο.

Σημαντικές Σκέψεις με το createRef

useRef: Το Functional Component Hook

Το useRef είναι ένα Hook που εισήχθη στο React 16.8. Παρέχει έναν τρόπο δημιουργίας μεταβλητών αντικειμένων Ref μέσα σε λειτουργικά στοιχεία. Σε αντίθεση με το createRef, το useRef επιστρέφει το ίδιο αντικείμενο Ref κάθε φορά που αποδίδεται το στοιχείο. Αυτό το καθιστά ιδανικό για τη διατήρηση τιμών σε όλες τις αποδόσεις χωρίς να προκαλούνται επανα-αποδόσεις.

Σύνταξη και Χρήση

Η χρήση του useRef είναι απλή. Καλέιτε το Hook useRef, περνώντας μια αρχική τιμή. Το Hook επιστρέφει ένα αντικείμενο με μια ιδιότητα .current, την οποία μπορείτε στη συνέχεια να χρησιμοποιήσετε για να αποκτήσετε πρόσβαση και να τροποποιήσετε την τιμή.


import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Access the DOM element after the component mounts
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return <input type="text" ref={myRef} />;
}

Σε αυτό το παράδειγμα, το useRef(null) δημιουργεί ένα Ref με αρχική τιμή null. Το Hook useEffect χρησιμοποιείται για την πρόσβαση στο στοιχείο DOM μετά την τοποθέτηση του στοιχείου. Η ιδιότητα myRef.current περιέχει την αναφορά στο στοιχείο εισαγωγής, επιτρέποντάς σας να το εστιάσετε.

Παράδειγμα: Παρακολούθηση Προηγούμενων Τιμών Prop

Μία ισχυρή περίπτωση χρήσης για το useRef είναι η παρακολούθηση της προηγούμενης τιμής ενός prop. Δεδομένου ότι οι αλλαγές στα Refs δεν προκαλούν επανα-αποδόσεις, μπορείτε να τα χρησιμοποιήσετε για να αποθηκεύσετε τιμές που θέλετε να διατηρήσετε σε όλες τις αποδόσεις χωρίς να επηρεάζεται το UI.


import React, { useRef, useEffect } from 'react';

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    <div>
      <p>Current Value: {value}</p>
      <p>Previous Value: {previousValue.current}</p>
    </div>
  );
}

Σε αυτό το παράδειγμα, το previousValue.current αποθηκεύει την προηγούμενη τιμή του prop value. Το Hook useEffect ενημερώνει το Ref κάθε φορά που αλλάζει το prop value. Αυτό σας επιτρέπει να συγκρίνετε τις τρέχουσες και προηγούμενες τιμές, κάτι που μπορεί να είναι χρήσιμο για την ανίχνευση αλλαγών ή την εφαρμογή κινούμενων εικόνων.

Σημαντικές Σκέψεις με το useRef

useRef έναντι createRef: Μια λεπτομερής σύγκριση

Τώρα που έχουμε εξερευνήσει τόσο το useRef όσο και το createRef ξεχωριστά, ας τα συγκρίνουμε δίπλα-δίπλα για να επισημάνουμε τις βασικές διαφορές τους και πότε να επιλέξουμε το ένα έναντι του άλλου.

Χαρακτηριστικό useRef createRef
Τύπος στοιχείου Λειτουργικά στοιχεία Στοιχεία κλάσης
Hook ή Μέθοδος Hook Μέθοδος
Στιγμιότυπο Ref Επιστρέφει το ίδιο αντικείμενο Ref σε κάθε απόδοση Δημιουργεί ένα νέο αντικείμενο Ref σε κάθε στιγμιότυπο του στοιχείου
Περιπτώσεις χρήσης
  • Πρόσβαση σε στοιχεία DOM
  • Διατήρηση τιμών σε όλες τις αποδόσεις χωρίς να προκαλούνται επανα-αποδόσεις
  • Παρακολούθηση προηγούμενων τιμών prop
  • Αποθήκευση μεταβλητών τιμών που δεν προκαλούν επανα-αποδόσεις
  • Πρόσβαση σε στοιχεία DOM
  • Πρόσβαση σε μεθόδους θυγατρικού στοιχείου

Επιλογή του σωστού Ref: Ένας οδηγός απόφασης

Ακολουθεί ένας απλός οδηγός που θα σας βοηθήσει να επιλέξετε μεταξύ useRef και createRef:

Πέρα από τον χειρισμό DOM: Προηγμένες περιπτώσεις χρήσης για Refs

Ενώ η πρόσβαση και ο χειρισμός στοιχείων DOM είναι μια κύρια περίπτωση χρήσης για τα Refs, προσφέρουν δυνατότητες πέρα από αυτή τη βασική λειτουργικότητα. Ας εξερευνήσουμε ορισμένα προηγμένα σενάρια όπου τα Refs μπορεί να είναι ιδιαίτερα χρήσιμα.

1. Πρόσβαση σε μεθόδους θυγατρικού στοιχείου

Τα Refs μπορούν να χρησιμοποιηθούν για την πρόσβαση σε μεθόδους που ορίζονται σε θυγατρικά στοιχεία. Αυτό επιτρέπει σε ένα γονικό στοιχείο να ενεργοποιεί ενέργειες ή να ανακτά δεδομένα απευθείας από τα παιδιά του. Αυτή η προσέγγιση είναι ιδιαίτερα χρήσιμη όταν χρειάζεστε λεπτομερή έλεγχο των θυγατρικών στοιχείων.


class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Call a method on the child component
    this.childRef.current.doSomething();
  };

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>Trigger Child Action</button>
      </div>
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Child component action triggered!');
  };

  render() {
    return <div>This is a child component.</div>;
  }
}

Σε αυτό το παράδειγμα, το ParentComponent χρησιμοποιεί ένα Ref για να αποκτήσει πρόσβαση στο ChildComponent και να καλέσει τη μέθοδο doSomething.

2. Διαχείριση εστίασης και επιλογής

Τα Refs είναι ανεκτίμητα για τη διαχείριση της εστίασης και της επιλογής μέσα σε πεδία εισαγωγής και άλλα διαδραστικά στοιχεία. Αυτό είναι ζωτικής σημασίας για τη δημιουργία προσβάσιμων και φιλικών προς το χρήστη διεπαφών.


import React, { useRef, useEffect } from 'react';

function FocusOnMount() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Select the text in the input
    }
  }, []);

  return <input type="text" ref={inputRef} defaultValue="Initial text" />;
}

Αυτό το παράδειγμα εστιάζει στην είσοδο και επιλέγει το κείμενό της αμέσως μόλις τοποθετηθεί το στοιχείο.

3. Κινούμενα στοιχεία

Τα Refs μπορούν να χρησιμοποιηθούν σε συνδυασμό με βιβλιοθήκες κίνησης (όπως το GreenSock ή το Framer Motion) για τον άμεσο χειρισμό του DOM και τη δημιουργία σύνθετων κινούμενων εικόνων. Αυτό επιτρέπει τον λεπτομερή έλεγχο των ακολουθιών κίνησης.

Παράδειγμα χρήσης vanilla JavaScript για απλότητα:


import React, { useRef, useEffect } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Simple animation: move the box to the right
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 second
          iterations: Infinity, // Repeat forever
          direction: 'alternate',
        }
      );
    }
  }, []);

  return <div ref={boxRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}></div>;
}

Αυτό το παράδειγμα χρησιμοποιεί το Web Animations API για να κινήσει ένα απλό πλαίσιο, μετακινώντας το εμπρός και πίσω οριζόντια.

Βέλτιστες πρακτικές για τη χρήση των React Refs σε παγκόσμιες εφαρμογές

Κατά την ανάπτυξη εφαρμογών React για ένα παγκόσμιο κοινό, είναι σημαντικό να λάβετε υπόψη τον τρόπο με τον οποίο τα Refs αλληλεπιδρούν με τη διεθνοποίηση (i18n) και την προσαρμογή (l10n). Ακολουθούν ορισμένες βέλτιστες πρακτικές:

1. Προσβασιμότητα (A11y)

Βεβαιωθείτε ότι η χρήση των Refs δεν επηρεάζει αρνητικά την προσβασιμότητα. Για παράδειγμα, όταν εστιάζετε προγραμματιστικά στοιχεία, λάβετε υπόψη τη σειρά εστίασης του χρήστη και εάν η αλλαγή εστίασης είναι κατάλληλη για προγράμματα ανάγνωσης οθόνης και χρήστες πληκτρολογίου.


import React, { useRef, useEffect } from 'react';

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Only focus if the button is not already focused by the user
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return <button ref={buttonRef}>Click Me</button>;
}

2. Διεθνοποιημένα πεδία εισαγωγής

Όταν εργάζεστε με πεδία εισαγωγής, να έχετε υπόψη τις διαφορετικές μεθόδους εισαγωγής και τα σύνολα χαρακτήρων που χρησιμοποιούνται σε διαφορετικές γλώσσες. Βεβαιωθείτε ότι οι χειρισμοί σας βάσει Ref (π.χ. επιλογή, θέση δρομέα) λειτουργούν σωστά σε διάφορους τύπους εισαγωγής και τοπικές ρυθμίσεις. Ελέγξτε διεξοδικά τα στοιχεία σας με διαφορετικές γλώσσες και μεθόδους εισαγωγής.

3. Διατάξεις από δεξιά προς τα αριστερά (RTL)

Εάν η εφαρμογή σας υποστηρίζει γλώσσες RTL (π.χ. Αραβικά, Εβραϊκά), βεβαιωθείτε ότι οι χειρισμοί DOM που χρησιμοποιείτε Refs λαμβάνουν υπόψη την αντίστροφη διάταξη. Για παράδειγμα, κατά την κίνηση στοιχείων, εξετάστε το ενδεχόμενο να αντιστρέψετε την κατεύθυνση κίνησης για γλώσσες RTL.

4. Ζητήματα απόδοσης

Ενώ τα Refs παρέχουν έναν ισχυρό τρόπο αλληλεπίδρασης με το DOM, η υπερβολική χρήση μπορεί να οδηγήσει σε προβλήματα απόδοσης. Ο άμεσος χειρισμός DOM παρακάμπτει το εικονικό DOM και τη διαδικασία συμφιλίωσης του React, οδηγώντας ενδεχομένως σε ασυνέπειες και πιο αργές ενημερώσεις. Χρησιμοποιήστε τα Refs με σύνεση και μόνο όταν είναι απαραίτητο.

Συμπέρασμα

Τα React Refs, συγκεκριμένα τα useRef και createRef, είναι απαραίτητα εργαλεία για τους προγραμματιστές React. Η κατανόηση των αποχρώσεων κάθε προσέγγισης και πότε να τις εφαρμόσετε αποτελεσματικά είναι ζωτικής σημασίας για τη δημιουργία ισχυρών και αποδοτικών εφαρμογών. Το createRef παραμένει το πρότυπο για τη διαχείριση των Refs μέσα σε στοιχεία κλάσης, διασφαλίζοντας ότι κάθε στιγμιότυπο έχει το μοναδικό του Ref. Το useRef, με τη σταθερή του φύση σε όλες τις αποδόσεις, είναι ιδανικό για λειτουργικά στοιχεία, προσφέροντας έναν τρόπο διαχείρισης στοιχείων DOM και διατήρησης τιμών χωρίς να προκαλούνται περιττές επανα-αποδόσεις. Αξιοποιώντας αυτά τα εργαλεία με σύνεση, μπορείτε να βελτιώσετε τη λειτουργικότητα και την εμπειρία χρήστη των εφαρμογών σας React, εξυπηρετώντας ένα παγκόσμιο κοινό με προσβάσιμες και αποδοτικές διεπαφές.

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