Λειτουργικά συστατικά έναντι εξαρτημάτων κλάσης στο React

Υπάρχουν κυρίως δύο συστατικά στο React:

  • Λειτουργικά συστατικά
  • Στοιχεία κλάσης

Λειτουργικά συστατικά

  • Τα λειτουργικά στοιχεία είναι βασικές λειτουργίες JavaScript. Αυτές είναι συνήθως λειτουργίες βέλους, αλλά μπορούν επίσης να δημιουργηθούν με την κανονική functionλέξη-κλειδί.
  • Μερικές φορές αναφέρονται ως "χαζές" ή "απάτριδες" συστατικά, καθώς δέχονται απλά δεδομένα και τα εμφανίζουν σε κάποια μορφή. δηλαδή είναι κυρίως υπεύθυνοι για την απόδοση της διεπαφής χρήστη.
  • Οι μέθοδοι του κύκλου ζωής αντιδράσεων (για παράδειγμα componentDidMount) δεν μπορούν να χρησιμοποιηθούν σε λειτουργικά συστατικά.
  • Δεν χρησιμοποιείται μέθοδος απόδοσης σε λειτουργικά στοιχεία.
  • Αυτά είναι κυρίως υπεύθυνα για τη διεπαφή χρήστη και συνήθως παρουσιάζονται μόνο (για παράδειγμα, ένα στοιχείο Button).
  • Τα λειτουργικά εξαρτήματα μπορούν να δέχονται και να χρησιμοποιούν στηρίγματα.
  • Τα λειτουργικά στοιχεία θα πρέπει να προτιμούνται εάν δεν χρειάζεται να κάνετε χρήση της κατάστασης React.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Στοιχεία κλάσης

  • Τα στοιχεία της κλάσης χρησιμοποιούν την κατηγορία ES6 και επεκτείνουν την Componentκλάση στο React.
  • Μερικές φορές ονομάζονται "έξυπνα" ή "stateful" στοιχεία καθώς τείνουν να εφαρμόζουν λογική και κατάσταση.
  • Οι μέθοδοι του κύκλου ζωής του React μπορούν να χρησιμοποιηθούν εντός των συστατικών της κλάσης (για παράδειγμα, componentDidMount).
  • Περνάτε τα στηρίγματα στα εξαρτήματα της κατηγορίας και τα έχετε πρόσβαση σε αυτά this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 

Hello Person

); } } export default Person;

Περισσότερες πληροφορίες

  • Αντιδρώντα συστατικά
  • Λειτουργικά εξαρτήματα κατηγορίας
  • Λειτουργικά συστατικά Stateful vs Stateless στο React
  • Κατάσταση και κύκλος ζωής