Συσκευασία έναντι Παρουσιάζοντας Στοιχεία σε React

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

Τι είναι τα συστατικά του δοχείου;

  • Τα συστατικά των εμπορευματοκιβωτίων ασχολούνται κυρίως με το πώς λειτουργούν τα πράγματα
  • σπάνια έχουν τυχόν ετικέτες HTML, εκτός από την περιτύλιξη
  • είναι συχνά stateful
  • είναι υπεύθυνοι για την παροχή δεδομένων και συμπεριφοράς στα παιδιά τους (συνήθως στοιχεία παρουσίασης)

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

class Collage επεκτείνει το στοιχείο {
   κατασκευαστής (στηρίγματα) {
      σούπερ (στηρίγματα);
      
      this.state = {
         εικόνες: []
      },
   }}
   componentDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (απάντηση => response.json ())
         .then (εικόνες => this.setState ({images}));
   }}
   render () {
      ΕΠΙΣΤΡΟΦΗ (
         
            {this.state.images.map (image => {                
                                               }}}                 )    }} }}

Αντίθετα, ποια είναι τα στοιχεία παρουσίασης;

  • Τα Presentational Components ασχολούνται πρωτίστως με τον τρόπο εμφάνισης των πραγμάτων
  • πιθανόν να περιέχουν μόνο μια μέθοδο rendering και λίγο αλλιώς λογική
  • δεν γνωρίζουν πώς να φορτώνουν ή να αλλάζουν τα δεδομένα που αποδίδουν
  • είναι καλύτερα να γράφονται ως λειτουργικά συστατικά χωρίς κατάσταση

Ακολουθεί ένα παράδειγμα παρουσίασης:

// ορίζοντας το στοιχείο ως στοιχείο React
κατηγορίας εικόνας επεκτείνει το στοιχείο {
   render () {
      επιστροφή ;
   }}
}}
εξαγωγή προεπιλεγμένης εικόνας
// ορίζοντας το στοιχείο ως σταθερά
const Εικόνα = props => (
   
)
εξαγωγή προεπιλεγμένης εικόνας

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

Διαχωρισμός των ανησυχιών με τη χρήση ενός στοιχείου δοχείου

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

Δείτε πώς μπορεί να φαίνεται αυτό:

const Εικόνα = props => (
   
)
εξαγωγή προεπιλεγμένης εικόνας
class ImageContainer εκτείνεται React.Component {
   κατασκευαστής () {
      σούπερ();
      
      this.state = {
         εικόνες: []
      },
   }}
   componentDidMount () {
      fetch ('/ api / current_user / image_list')
         .then (απάντηση => response.json ())
         .then (εικόνες => this.setState ({images}));
   }}
   render () {
      ΕΠΙΣΤΡΟΦΗ (
         
            {this.state.images.map (image => {                <Εικόνα εικόνας = {εικόνα} />             }}}                 )    }} }} εξαγάγετε το προεπιλεγμένο ImageContainer

Για να ανακεφαλαιώσουμε, έχουμε διαλύσει την αρχική συνιστώσα σε δύο κομμάτια. Όλη η κατάσταση που περιέχεται στο συστατικό μας Container ImageContainer, και η λογική μας είναι ακόμα η ίδια. Η παρουσίαση του στοιχείου εικόνας είναι ανιθαγενής και τώρα είναι απίστευτα σταθερή και συνοπτική. Με αυτόν τον τρόπο, εάν αλλάξουν τα δεδομένα API (όπως εάν το src αλλάξει σε σύνδεση) θα μπορούσαμε να κάνουμε αυτήν την ενημέρωση μέσα σε ένα ενιαίο συστατικό παρουσίασης το οποίο θα ενημερώνει όλα τα παιδιά αυτής της λειτουργίας χάρτη. Αυτό μας επιτρέπει επίσης να αποδώσουμε όσο το δυνατόν περισσότερες εικόνες, αφού η Εικόνα είναι πλέον ένα επαναχρησιμοποιήσιμο στοιχείο στο React. Πάντα να θυμάστε ότι τα επαναχρησιμοποιήσιμα εξαρτήματα είναι αναμφισβήτητα μία από τις πιο ισχυρές πτυχές του React, οπότε είναι σημαντικό να το έχετε πάντα κατά νου όταν σχεδιάζετε τη δομή της εφαρμογής σας.