Κάνοντας την επιλογή μεταξύ εξαρτημάτων κατηγορίας και λειτουργικών εξαρτημάτων στο React

Αναδημοσίευση από τον Πλάτωνα

Ακολουθούν: 0

Κάνοντας την επιλογή μεταξύ στοιχείων κλάσης και λειτουργικών στοιχείων στο React PlatoBlockchain Data Intelligence. Κάθετη αναζήτηση. Ολα συμπεριλαμβάνονται.

Βασικές διαφορές

Στο React, ένα στοιχείο είναι ένα κομμάτι κώδικα που αντιπροσωπεύει ένα μέρος μιας διεπαφής χρήστη. Υπάρχουν δύο κύριοι τύποι στοιχείων στο React: στοιχεία κλάσης και λειτουργικά στοιχεία.

Τα στοιχεία κλάσης ορίζονται χρησιμοποιώντας μια κλάση που επεκτείνει την κλάση React.Component. Είναι πιο πλούσια σε χαρακτηριστικά και έχουν περισσότερες επιλογές για το χειρισμό συμβάντων κατάστασης και κύκλου ζωής. Έτσι φαίνεται ένα στοιχείο κλάσης:

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

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

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Πότε να χρησιμοποιήσετε τι

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

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

Υπάρχουν επίσης μερικοί λόγοι για τους οποίους μπορεί να θέλετε να επιλέξετε να γράψετε λειτουργικά συστατικά:

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

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

useEffect & useState

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

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

Έτσι θα εφαρμόζατε useEffect και χρησιμοποιήστε το κράτος μέσα στα λειτουργικά σας στοιχεία

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

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

Βασικές τακτικές

Αυτά είναι τα κύρια σημεία για την επιλογή μεταξύ στοιχείων κλάσης και λειτουργικών στοιχείων στο React:

Τα στοιχεία κλάσης ορίζονται χρησιμοποιώντας μια κλάση που επεκτείνει την κλάση React.Component και έχει περισσότερες επιλογές για το χειρισμό συμβάντων κατάστασης και κύκλου ζωής.
Τα λειτουργικά στοιχεία είναι απλώς συναρτήσεις JavaScript που επιστρέφουν ένα στοιχείο React και είναι απλούστερα και ευκολότερα στην ανάγνωση και εγγραφή.
Θα πρέπει να χρησιμοποιείτε λειτουργικά στοιχεία εκτός εάν χρειάζεται να χρησιμοποιήσετε μια δυνατότητα που είναι διαθέσιμη μόνο σε στοιχεία κλάσης, όπως οι μέθοδοι κατάστασης ή κύκλου ζωής.
Μπορείτε να χρησιμοποιήσετε τα άγκιστρα useState και useEffect για να προσθέσετε κατάσταση και να εκτελέσετε παρενέργειες σε λειτουργικά στοιχεία.
Συνολικά, η επιλογή μεταξύ στοιχείων κλάσης και λειτουργικών στοιχείων εξαρτάται από το τι λειτουργεί καλύτερα για τις ανάγκες σας και τι κάνει τον κώδικά σας πιο εύκολο στην ανάγνωση και κατανόηση.

Ελπίζω αυτή η σύντομη εξήγηση να σας βοηθήσει. Εάν θέλετε καθοδήγηση ή οποιαδήποτε καθοδήγηση στην πορεία σας για να μάθετε javascript, react ή webdevelopment γενικά, μη διστάσετε να επικοινωνήσετε μαζί μου για μια συνεδρία 1:1.