React.Component — κλασικά στοιχεία και πώς λειτουργούν

Τι είναι το React.Component;

React.Component — μια αφηρημένη κλάση που παρέχει ενσωματωμένες μεθόδους για εργασία με κατάσταση, props και κύκλο ζωής του στοιχείου. Για να δημιουργήσετε ένα κλασικό στοιχείο, πρέπει να ορίσετε μια κλάση που κληρονομεί από το React.Component και να υλοποιήσετε τη μέθοδο render.

Το React.Component εμφανίστηκε στην πρώτη έκδοση του React (2013) και παρέμεινε ο κύριος τρόπος δημιουργίας στοιχείων για πέντε χρόνια. Το οικοσύστημα του React χτίστηκε γύρω από κλάσεις: στοιχεία υψηλότερης τάξης (HOC), render props, περιβάλλον — όλα αυτά τα μοτίβα υλοποιήθηκαν μέσω σύνταξης κλάσεων.

Με την κυκλοφορία του React 16.8 το 2019, η ομάδα του React παρουσίασε τα hooks ως εναλλακτική λύση για τις κλάσεις. Τα hooks έλυναν τις ίδιες εργασίες — κατάσταση, εφέ, περιβάλλον — αλλά χωρίς κληρονομικότητα και περίπλοκη δέσμευση περιβάλλοντος. Το React.Component παραμένει πλήρως υποστηριζόμενο, αλλά για νέα έργα συνιστάται η λειτουργική προσέγγιση.

Δημιουργία κλασικού στοιχείου

Ελάχιστο κλασικό στοιχείο — μια κλάση με μία μόνο μέθοδο render που επιστρέφει ένα στοιχείο React. render — η μόνη υποχρεωτική μέθοδος. Πρέπει να είναι μια καθαρή συνάρτηση των this.props και this.state: το ίδιο σύνολο props και κατάστασης δίνει το ίδιο αποτέλεσμα.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Κατασκευαστής και αρχικοποίηση κατάστασης

Ο κατασκευαστής εκτελείται πριν από την προσάρτηση. Σε αυτόν καλείται το super(props) για τη μεταβίβαση props στη γονική κλάση και αρχικοποιείται το this.state. Η χρήση του κατασκευαστή για άλλους σκοπούς — συνδρομές, κλήσεις API — δεν συνιστάται: γι' αυτό υπάρχει το componentDidMount.

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return <p>Count: {this.state.count}</p>;
  }
}

Διαχείριση κατάστασης μέσω this.state και this.setState

this.state — το αντικείμενο που περιέχει τα δεδομένα του στοιχείου. Η άμεση αλλαγή του (this.state.count = 1) απαγορεύεται — δεν προκαλεί εκ νέου απόδοση και σπάει την προβλεψιμότητα. Η κατάσταση πρέπει να ενημερώνεται μέσω του this.setState, το οποίο δημιουργεί ένα νέο αντικείμενο κατάστασης και ενεργοποιεί την εκ νέου απόδοση.

Το setState μπορεί να δεχτεί ένα αντικείμενο ή μια συνάρτηση. Η λειτουργική μορφή προτιμάται όταν η νέα κατάσταση εξαρτάται από την προηγούμενη: this.setState(prev => ({ count: prev.count + 1 })). Το React μπορεί να ομαδοποιήσει πολλαπλές κλήσεις setState σε ένα batch για βελτιστοποίηση απόδοσης.

class Toggle extends Component {
  constructor(props) {
    super(props);
    this.state = { isOn: false };
  }

  handleClick() {
    this.setState(prev => ({ isOn: !prev.isOn }));
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        {this.state.isOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

Μια σημαντική ιδιότητα του setState — είναι ασύγχρονο. Μετά την κλήση του setState, η κατάσταση δεν ενημερώνεται αμέσως. Αν χρειαστεί να εκτελέσετε μια ενέργεια μετά την ενημέρωση, δώστε μια callback ως δεύτερο όρισμα: this.setState(newState, () => console.log(this.state)).

Μέθοδοι κύκλου ζωής

Τα κλασικά στοιχεία έχουν προκαθορισμένες μεθόδους που το React καλεί σε συγκεκριμένες στιγμές. Προσάρτηση — constructor → render → componentDidMount. Ενημέρωση — render → componentDidUpdate. Αποπροσάρτηση — componentWillUnmount.

ComponentDidMount — αίτημα δεδομένων

componentDidMount — το κύριο μέρος για παρενέργειες μετά την πρώτη απόδοση. Εδώ εκτελούνται αιτήματα HTTP, δημιουργούνται συνδέσεις WebSocket και ξεκινούν χρονομετρητές. Αν δεν καθαρίσετε τη συνδρομή στο componentWillUnmount, προκύπτει διαρροή μνήμης.

class UserProfile extends Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(data => this.setState({ user: data }));
  }

  componentWillUnmount() {
    // Ακύρωση αιτήματος κατά την αποπροσάρτηση
  }

  render() {
    return <div>{this.state.user?.name}</div>;
  }
}

Δέσμευση περιβάλλοντος this σε μεθόδους

Στην JavaScript, οι μέθοδοι κλάσης δεν είναι δεσμευμένες στο στιγμιότυπο από προεπιλογή. Αν μεταβιβάσετε μια μέθοδο ως callback — σε χειριστή συμβάντος, χρονομετρητή — το this θα είναι undefined (σε αυστηρή λειτουργία) ή window (χωρίς αυστηρή λειτουργία). Χωρίς δέσμευση, το this.setState θα προκαλέσει σφάλμα.

Υπάρχουν τρεις τρόποι δέσμευσης: bind στον κατασκευαστή, συνάρτηση βέλους στο callback και class field με συνάρτηση βέλους. Ο πρώτος τρόπος — η επίσημη σύσταση του React: bind μία φορά στον κατασκευαστή, χωρίς αναδημιουργία της συνάρτησης σε κάθε απόδοση.

// Μέθοδος 1: bind στον κατασκευαστή (συνιστάται)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ clicked: true });
  }

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

Class field — μοντέρνα σύνταξη με αυτόματη δέσμευση. Η συνάρτηση βέλους στην ιδιότητα της κλάσης συλλαμβάνει το this από το πεδίο ορατότητας του κατασκευαστή. Μειονέκτημα — η μέθοδος δημιουργείται σε κάθε στιγμιότυπο, όχι στο πρωτότυπο, αυξάνοντας τη μνήμη για εκατοντάδες στοιχεία του ίδιου τύπου.

Σύγκριση κλασικών και λειτουργικών στοιχείων

Η επιλογή μεταξύ κλάσης και συνάρτησης — δεν είναι μόνο θέμα σύνταξης. Τα λειτουργικά στοιχεία με hooks λύνουν προβλήματα εγγενή στις κλάσεις: αντιγραφή λογικής σε διαφορετικές μεθόδους κύκλου ζωής (componentDidMount + componentDidUpdate), πολυπλοκότητα με το this και αδυναμία εξαγωγής σχετικής λογικής σε επαναχρησιμοποιήσιμο μπλοκ.

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

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

Στρατηγική μετάβασης από κλάσεις σε hooks

Η σταδιακή μετάβαση ξεκινά με ανάλυση του στοιχείου. Τα απλά στοιχεία χωρίς κατάσταση (stateless) μεταφράζονται πρώτα — αντικαθίστανται εύκολα με συναρτήσεις. Στη συνέχεια — στοιχεία με ένα-δύο πεδία κατάστασης, όπου το useState αντικαθιστά άμεσα το this.state και το this.setState.

Τα σύνθετα στοιχεία με πολλαπλές μεθόδους κύκλου ζωής μεταφράζονται μέσω του useEffect. Η λογική από componentDidMount + componentDidUpdate χωρίζεται σε ξεχωριστά useEffect με διαφορετικές εξαρτήσεις. Το componentWillUnmount αντικαθίσταται από συνάρτηση επιστροφής μέσα στο useEffect. Για σύνθετη λογική κατάστασης, χρησιμοποιήστε το useReducer.

Εργαλεία αυτόματης μετάβασης — @phenomnomnominal/ts-react-class-to-hook ή σενάρια codemod — μπορούν να μετατρέψουν αυτόματα απλές κλάσεις. Για σύνθετες περιπτώσεις, η μετάβαση παραμένει χειρωνακτική εργασία που απαιτεί κατανόηση της λογικής του αρχικού στοιχείου.