Συναρτησιακά Components vs React.FC στο TypeScript: Μια Ειλικρινής Συζήτηση

Κατανόηση της εξέλιξης της τυποποίησης TypeScript στα React components

Συναρτησιακά Components vs React.FC στο TypeScript: Μια Ειλικρινής Συζήτηση

Το React και το TypeScript μπαίνουν μαζί σε ένα project. Το TypeScript λέει, «Εγώ θα αναλάβω τους τύπους». Το React λέει, «Εγώ θα κάνω το rendering». Και κάπου εκεί, κάποιος ρωτά:

Πρέπει να χρησιμοποιούμε React.FC, ή απλά να τυπώνουμε τη συνάρτηση απευθείας;

Είναι μια λογική ερώτηση. Με μια πρώτη ματιά, το React.FC φαίνεται καλοσχεδιασμένο, επίσημο — ακόμα και εκλεπτυσμένο. Σαν να σου σερβίρει το πρόγραμμα ένα ποτήρι κρασί και να λέει «Ας κάνουμε αυτό το component κομψό». Αλλά κάτω από την επιφάνεια, κουβαλά κάποια φορτία που το σύγχρονο TypeScript σε μεγάλο βαθμό έχει ξεπεράσει.

Ας δούμε πιο προσεκτικά.

Οι Δύο Τρόποι

Το Απλό Συναρτησιακό Component

type Props = { title: string };

function MyComponent({ title }: Props) {
  return <h1>{title}</h1>;
}

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

Ή, αν προτιμάτε βελάκια (arrow functions):

const MyComponent = ({ title }: Props) => {
  return <h1>{title}</h1>;
};

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

Η Παραλλαγή React.FC

import { FC } from 'react';

type Props = { title: string };

const MyComponent: FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

Αυτή η έκδοση τυλίγει το component μέσα σε έναν γενικό τύπο. Φαίνεται πιο «επίσημο», και αν έχετε ανακαλύψει πρόσφατα τους utility τύπους του TypeScript, μπορεί να μοιάζει με φυσική επιλογή — σαν να ξεκλειδώσατε μια μυστική λέσχη. Αλλά μερικές φορές, οι μυστικές λέσχες έχουν ψιλά γράμματα.

Τι Κάνει Πραγματικά το React.FC

Το React.FC (σύντμηση για React.FunctionComponent) είναι ένας βοηθητικός τύπος που περιγράφει ένα function component. Προσφέρει μερικές προεπιλεγμένες συμπεριφορές:

  • Περιλαμβάνει την prop children από προεπιλογή, είτε τη θέλετε είτε όχι.
  • Μπορεί περιστασιακά να βελτιώσει την αυτόματη συμπλήρωση (autocomplete) σε συγκεκριμένα περιβάλλοντα επεξεργασίας κώδικα.
  • Μπορεί να κάνει τον τύπο επιστροφής της συνάρτησης πιο ρητό, αν και αυτό σπάνια έχει πρακτική σημασία.

Πρόκειται για μετρημένες ευκολίες, και στις παλιότερες μέρες του React + TypeScript, ήταν πιο χρήσιμες. Αλλά οι καιροί άλλαξαν, και σήμερα, αυτές οι «λειτουργίες» συχνά εμποδίζουν παρά βοηθούν.

Γιατί Έχει Αρχίσει να Φεύγει από τη Μόδα

Μπορεί να πει κανείς πως το React.FC είναι τα cargo παντελόνια του TypeScript — πολλές τσέπες, οι περισσότερες άδειες.

  1. Άυλος χειρισμός του children

Κάθε component παίρνει την prop children είτε τη χρειάζεται είτε όχι. Αυτό μπορεί να προκαλέσει συγκεχυμένα σφάλματα όταν οι προγραμματιστές υποθέτουν ότι τα children είναι έγκυρα απλά και μόνο επειδή ο τύπος το λέει. (Υπόψη: μπορεί να μην είναι.)

  1. Δυσκινησία με γενικά (generics)

Όταν το component χρειάζεται να χρησιμοποιήσει γενικούς τύπους, το React.FC κάνει τα πράγματα πιο περίπλοκα αντί για πιο καθαρά. Η σύνταξη γίνεται αδέξια, και το TypeScript είναι λιγότερο βοηθητικό.

  1. Λεπτομέρεια χωρίς σαφήνεια

Το να γράψετε const MyComponent: FC<Props> είναι πιο μεγάλο και ενδεχομένως πιο ασαφές από το απλά να εκπροσωπείτε τους props απευθείας.

  1. Δεν είναι πια απαραίτητο

Οι αρχικοί λόγοι για τη χρήση του React.FC — υποστήριξη editor, συμπερασματικότητα JSX — έχουν καλυφθεί σχεδόν πλήρως από βελτιώσεις στο TypeScript. Αυτό που κάποτε ήταν μια πρακτική λύση, τώρα είναι απλώς παλαιά φιλοσοφία.

Σύγκριση Πλευρό με Πλευρό

Χαρακτηριστικό function Component() const Component: FC
Περιλαμβάνει children; Μόνο αν δηλωθεί Πάντα περιλαμβάνεται
Υποστηρίζει generics; Ομαλά Όχι χωρίς ταλαιπωρία
Λεπτομερής; Ελάχιστα Σημαντικά περισσότερο
Υποστήριξη editor; Επαρκής Ελαφρώς καλύτερη σε ειδικές περιπτώσεις
Συνιστάται; Ναι Όχι πλέον

Η Συνιστώμενη Προσέγγιση

Η κοινή άποψη στην κοινότητα είναι απλή: τυπώστε τους props σας απευθείας. Αν θέλετε το component σας να δέχεται children, δηλώστε το. Αν όχι, δεν θα τα έχει. Αυτή είναι η ειλικρίνεια που το μέλλον σας θα εκτιμήσει.

type Props = {
  title: string;
  children?: React.ReactNode;
};

const MyComponent = ({ title, children }: Props) => (
  <div>
    <h1>{title}</h1>
    {children}
  </div>
);

Είναι ρητό. Είναι διαχειρίσιμο. Και δεν προσποιείται πως το component χειρίζεται children όταν δεν το κάνει.

Υπάρχουν Περιπτώσεις όπου το FC Αξίζει;

Περιστασιακά. Αν δουλεύετε σε ένα legacy κώδικα που βασίζεται έντονα στο React.FC, η διατήρηση της συνέπειας μπορεί να είναι πιο σημαντική από την επανεγγραφή. Αν φτιάχνετε γρήγορα mockups και δεν θέλετε να ανησυχείτε για την τυποποίηση των children, το FC μπορεί ακόμα να είναι ένας σύντομος δρόμος.

Αλλά γενικά, αυτές είναι οι εξαιρέσεις που επιβεβαιώνουν τον κανόνα.

Κλείνοντας

Το React.FC δεν είναι λάθος. Απλά δεν είναι πια απαραίτητο. Το σύγχρονο TypeScript έχει απλοποιήσει και κάνει πιο προβλέψιμη την τυποποίηση των React components χωρίς αυτό.

Οπότε, την επόμενη φορά που θα φτάσετε στο FC, σταματήστε λίγο και σκεφτείτε αν προσθέτετε αξία — ή απλώς περισπασμούς. Συχνά, μια απλή συνάρτηση με τυποποιημένα props θα σας εξυπηρετήσει καλύτερα.

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

Categories