Διαχωρισμός ανησυχιών με τα άγκιστρα React

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

Ο διαχωρισμός της διεπαφής χρήστη από την επιχειρηματική λογική δεν είναι τίποτα μοναδικό για το React: ο διαχωρισμός των ανησυχιών είναι μια αρχή σχεδιασμού που έχει υπήρχε ήδη στη δεκαετία του '70. Για παράδειγμα, είναι κοινή πρακτική να διαχωρίζετε τον κώδικα που έχει πρόσβαση στη βάση δεδομένων από την επιχειρηματική λογική στο backend.

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

Με την εισαγωγή των αγκιστριών React, υπάρχει μια νέα προσέγγιση σε αυτό: χρήση προσαρμοσμένα άγκιστρα.

Γιατί πρέπει να διαχωρίσουμε τη λογική από το συστατικό;

Πριν ξεκινήσουμε να αποσυνδέουμε τη λογική από τα στοιχεία του React, θα πρέπει να ξέρουμε γιατί.

Η οργάνωση του κώδικά μας με τρόπο που κάθε συνάρτηση ή στοιχείο είναι υπεύθυνη για ένα μόνο πράγμα έχει το πλεονέκτημα ότι είναι πολύ ευκολότερη αλλαγή και συντήρηση (Ο Ντέιβ και ο Άντριου το αποκαλούν αυτό "ορθογονικότητα» στο βιβλίο τους Ο Πραγματιστής Προγραμματιστής).

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

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

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

Πώς να αποσυνδέσετε τη λογική με τα άγκιστρα React

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

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

Μπορείτε να βρείτε τον πλήρη πηγαίο κώδικα εδώ.

Ο κώδικας μοιάζει με τον ακόλουθο:

export const ExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return (
    <div className="blue-wrapper">
      <input
        type="number"
        className="base"
        onChange={handleBaseChange}
        placeholder="Base"
        value={base}
      />
      <input
        type="number"
        className="exponent"
        onChange={handleExponentChange}
        placeholder="Exp."
        value={exponent}
      />
      <h1 className="result">{result}</h1>
    </div>
  );
};

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

Ως πρώτο βήμα, θα το κάνουμε μετακινήστε τη λογική σε ένα προσαρμοσμένο άγκιστρο και καλέστε το μέσα στο στοιχείο μας.

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = (base ** exponent).toFixed(2);

  const handleBaseChange = (e) => {
    e.preventDefault();
    setBase(e.target.value);
  };

  const handleExponentChange = (e) => {
    e.preventDefault();
    setExponent(e.target.value);
  };

  return {
    base,
    exponent,
    result,
    handleBaseChange,
    handleExponentChange,
  };
};

export const ExponentCalculator = () => {
  const {
    base,
    exponent,
    result,
    handleExponentChange,
    handleBaseChange,
  } = useExponentCalculator();

  // ...
};

Θα μπορούσαμε να μετακινήσουμε αυτό το άγκιστρο σε α ξεχωριστό αρχείο για έναν πιο εμφανή διαχωρισμό των ανησυχιών.

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

useExponentCalculator.js

const calculateExponent = (base, exponent) => base ** exponent;

const useExponentCalculator = () => {
  const [base, setBase] = useState(4);
  const [exponent, setExponent] = useState(4);
  const result = calculateExponent(base, exponent).toFixed(2);

  // ...
};

Η δοκιμή αυτών των λειτουργιών είναι πολύ πιο εύκολη από τη δοκιμή ολόκληρου του κώδικα του στοιχείου από το πρώτο παράδειγμα. Θα μπορούσαμε να τα δοκιμάσουμε με οποιαδήποτε βιβλιοθήκη δοκιμών Node.js, η οποία δεν χρειάζεται καν να υποστηρίζει στοιχεία React.

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

Βέλτιστες πρακτικές

Ονομασία

Μου αρέσει να ονομάζω τα προσαρμοσμένα μου άγκιστρα μετά το στοιχείο ως συνένωση του use και το όνομα του στοιχείου (π.χ useExponentCalculator). Στη συνέχεια καλώ το καταθέστε το ίδιο ως το αγκίστρι.

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

Εάν μπορώ να επαναχρησιμοποιήσω μέρη ενός προσαρμοσμένου γάντζου, συνήθως το μετακινώ σε άλλο αρχείο κάτω από αυτό src/hooks.

Μην το παρακάνετε

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

CSS-σε-JS

Εάν χρησιμοποιείτε βιβλιοθήκη CSS-in-JS (useStyles), μπορεί να θέλετε να μετακινήσετε αυτόν τον κώδικα και σε άλλο αρχείο.

Μπορείτε να το μετακινήσετε στο ίδιο αρχείο με το άγκιστρο. Ωστόσο, προτιμώ είτε να το κρατήσω πάνω από το στοιχείο στο ίδιο αρχείο είτε να το μετακινήσω στο δικό του αρχείο εάν μεγαλώσει πολύ.

Συμπέρασμα

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

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

Το θέμα συζητείται επίσης σε γενικότερο επίπεδο στο Ο Πραγματιστής Προγραμματιστής. Έγραψα ένα άρθρο που καλύπτει τα αγαπημένα μου θέματα του βιβλίου, οπότε αν αυτό σας ενδιαφέρει, φροντίστε να το κάνετε ελέγξτε το.