Πύλη React.js

Η μαγεία της απόδοσης στοιχείων έξω από το δέντρο DOM

Τηλεμεταφορά στο React.js

Γνωρίζατε ότι το React παρέχει ένα ειδικό και πολύ ισχυρό στοιχείο που ονομάζεται "Portal" που μπορεί να τοποθετήσει τα παιδιά του σε μια εντελώς διαφορετική θέση μέσα στην εφαρμογή σας; Αν όχι, ήρθε η ώρα να μάθετε κάτι νέο!

Η ανατομία μιας πύλης React.js

Ακολουθεί μια γρήγορη επισκόπηση του τρόπου με τον οποίο λειτουργεί το στοιχείο Portal στο React.js στο παρελθόν.

  • Κάπου στον κωδικό σας, τοποθετείτε ένα στοιχείο που θα φιλοξενήσει τα παιδιά της Πύλης
  • Στη συνέχεια, λαμβάνετε μια αναφορά σε αυτό το στοιχείο
  • Κάπου αλλού στην εφαρμογή σας, στη συνέχεια τοποθετείτε το στοιχείο πύλης και περνάτε την αναφορά που λαμβάνεται από το στοιχείο κεντρικού υπολογιστή
  • Όλα όσα είναι τώρα τοποθετημένα μέσα στην Πύλη θα είναι πραγματικά τοποθετημένα στον κεντρικό υπολογιστή από το πρώτο βήμα

Για να καταλάβετε καλύτερα τι συμβαίνει, δημιούργησα τις ακόλουθες απλές απεικονίσεις για να απεικονίσω τη λειτουργικότητα της Πύλης.

Image ee9c2dac28e7

Image 70ff8978589d

Image 886ed0a34985

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

Image dd655b015a22

Image ab94e9940e3a

Η Πύλη είναι ακόμη πιο ισχυρή από ό, τι νομίζατε αρχικά. Επιτρέπει ακόμη και την απόδοση πολλών παιδιών από πολλές πύλες στο ίδιο στοιχείο στόχου. Η σειρά τοποθέτησης των Portals καθορίζει επίσης τη σειρά των στοιχείων στον κεντρικό υπολογιστή.

Image de39ae9a02a2

Image b12fdf680f24

Η κοινή χρήση της αναφοράς στο στοιχείο κεντρικού υπολογιστή που θα περιέχει όλα τα τηλεμεταφερόμενα παιδιά είναι επίσης πολύ εύκολη. Η επίσημη τεκμηρίωση περιγράφει τη χρήση του document.getElementById, αλλά μπορείτε επίσης να χρησιμοποιήσετε το useRef-hook του React.js. Το ακόλουθο παράδειγμα κώδικα δείχνει μια απλή εφαρμογή που δείχνει όλα όσα περιγράφονται μέχρι τώρα.

import React, { useEffect, useRef, useState } from "react";
import ReactDOM, { createPortal } from "react-dom";

//
// Link to sandbox:
// 👉 https://codesandbox.io/s/react-16-8-0-forked-d8lm1?file=/src/index.js:0-1067
//

// A simple demonstration of the React-Portal
// w/ multiple portals for the same target.
function App() {
  const ref = useRef(null);
  const [isRefReady, setIsRefReady] = useState(false);

  // Run one more render to actually
  // show the content of our portal.
  // This is necessary, as the setter
  // for the 'ref' alone won't trigger
  // a render.
  useEffect(() => {
    setIsRefReady(Boolean(ref));
  }, []);

  return (
    <div>
      <div>
        {/* The 'target' aka host for our portals. */}
        <header ref={ref} style={{display: "flex", gap: 8 }} />
        <hr/>
      </div>
      <h1>
        Debug
      </h1>
      {isRefReady && createPortal(<button>one</button>, ref.current)}
      {isRefReady && createPortal(<button>two</button>, ref.current)}
      <div>
        {isRefReady && createPortal(<button>three</button>, ref.current)}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

Πώς το συστατικό στοιχείο πύλης επιτρέπει απλούστερη κωδικοποίηση

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

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

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

Image 2761da74cf8c

Image e7810bb469d2

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

Επίσης, ρίξτε μια ματιά στην επίσημη τεκμηρίωση για όλες τις λεπτομέρειες σχετικά με τις Πύλες React.js.

Προτάσεις

Σχετικά

Προσάρτημα

Γλώσσες