Υπάρχουν κυρίως δύο συστατικά στο 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
• Κατάσταση και κύκλος ζωής