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

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

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

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

• Χειριστείτε απευθείας ένα στοιχείο DOM, όπως η εστίαση σε ένα πεδίο εισαγωγής.
• Αποκτήστε πρόσβαση στις μεθόδους ή τις ιδιότητες ενός θυγατρικού στοιχείου.
• Διαχειριστείτε τιμές που παραμένουν σε όλες τις αποδόσεις χωρίς να προκαλούν επανα-αποδόσεις (παρόμοια με τις μεταβλητές στιγμιότυπου σε στοιχεία κλάσης).

Ενώ το 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

• Μόνο στοιχεία κλάσης: Το createRef έχει σχεδιαστεί για χρήση σε στοιχεία κλάσης. Ενώ μπορεί τεχνικά να λειτουργήσει σε λειτουργικά στοιχεία, δεν είναι η προβλεπόμενη χρήση και μπορεί να οδηγήσει σε απροσδόκητη συμπεριφορά.
• Νέο Ref σε κάθε στιγμιότυπο: Κάθε στιγμιότυπο ενός στοιχείου κλάσης αποκτά το δικό του 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 είναι ένα Hook και μπορεί να χρησιμοποιηθεί μόνο μέσα σε λειτουργικά στοιχεία ή προσαρμοσμένα Hooks.
• Παραμένει σε όλες τις αποδόσεις: Το Hook useRef επιστρέφει το ίδιο αντικείμενο Ref σε κάθε απόδοση. Αυτό είναι το κλειδί για την ικανότητά του να διατηρεί τιμές χωρίς να προκαλεί επανα-αποδόσεις.
• Μεταβλητή ιδιότητα .current: Μπορείτε να τροποποιήσετε απευθείας την ιδιότητα .current του αντικειμένου Ref.
• Αρχική τιμή: Μπορείτε να δώσετε μια αρχική τιμή στο useRef. Αυτή η τιμή θα εκχωρηθεί στην ιδιότητα .current όταν το στοιχείο αποδοθεί για πρώτη φορά.
• Χωρίς επανα-αποδόσεις: Η τροποποίηση της ιδιότητας .current ενός Ref δεν προκαλεί επανα-απόδοση του στοιχείου.

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

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

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

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

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

• Εργάζεστε με ένα λειτουργικό στοιχείο; Χρησιμοποιήστε το useRef.
• Εργάζεστε με ένα στοιχείο κλάσης; Χρησιμοποιήστε το createRef.
• Πρέπει να διατηρήσετε μια τιμή σε όλες τις αποδόσεις χωρίς να προκαλούνται επανα-αποδόσεις; Χρησιμοποιήστε το useRef.
• Πρέπει να παρακολουθήσετε την προηγούμενη τιμή ενός prop; Χρησιμοποιήστε το useRef.

Πέρα από τον χειρισμό 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 συνεχίζει να εξελίσσεται, η γνώση αυτών των θεμελιωδών εννοιών θα σας δώσει τη δυνατότητα να δημιουργήσετε καινοτόμες και φιλικές προς το χρήστη διαδικτυακές εμπειρίες που υπερβαίνουν τα γεωγραφικά και πολιτιστικά όρια. Μην ξεχάσετε να δώσετε προτεραιότητα στην προσβασιμότητα, τη διεθνοποίηση και την απόδοση για να παρέχετε πραγματικά παγκόσμιες εφαρμογές.