Κατάσταση ανύψωσης: Πώς αντιδρούν τα εξαρτήματα παιδιών που επικοινωνούν με τους γονείς

Το React χρησιμοποιεί μια μονόδρομη ροή δεδομένων από γονέα σε παιδί, ποτέ από παιδί σε γονέα. Τι γίνεται όμως όταν ένα παιδί χρειάζεται να επικοινωνήσει με τον γονιό του;

Μάθετε πώς μπορείτε να αυξήσετε την κατάσταση ώστε να επιτρέπεται σε ένα θυγατρικό στοιχείο να στέλνει δεδομένα σε ένα γονικό στοιχείο.

Components στο React

Το React οργανώνει τα στοιχεία σε μια ιεραρχία όπου τα θυγατρικά στοιχεία φωλιάζουν μέσα στα γονικά στοιχεία. Αυτή η ιεραρχία αποτελεί τα δομικά στοιχεία της διεπαφής χρήστη της εφαρμογής.

</ParentComponent>

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

Εξετάστε το ακόλουθο στοιχείο, που ονομάζεται CounterButton:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

Το στοιχείο διατηρεί μια τιμή κατάστασης με όνομα μετρώ η οποία αυξάνεται κάθε φορά που ένας χρήστης κάνει κλικ στο κουμπί.

Ας υποθέσουμε ότι έχετε τοποθετήσει το στοιχείο CounterButton σε ένα άλλο στοιχείο που ονομάζεται Home:

const Home = () => {
return (

 )
}

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

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

Για να το ξεπεράσετε αυτό, πρέπει να σηκώσετε την κατάσταση.

Τρόπος ανύψωσης κατάστασης για κοινή χρήση δεδομένων μεταξύ στοιχείων

Η κατάσταση ανύψωσης αναφέρεται στη μετακίνηση της κατάστασης ενός στοιχείου ψηλότερα στο δέντρο συστατικού, σε ένα μητρικό στοιχείο. Μόλις σηκώσετε την κατάσταση, μπορείτε να τη μεταβιβάσετε στα θυγατρικά στοιχεία ως τιμές στηρίγματος.

Στο παράδειγμα μετρητή από προηγουμένως, θα χρειαστεί να μετακινήσετε την κατάσταση μέτρησης και το λαβήΑύξηση λειτουργία στο στοιχείο Home. Στη συνέχεια, θα χρειαστεί να περάσετε τη συνάρτηση handleIncrement στο στοιχείο CounterButton ως βάση.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

Στη συνέχεια, πρέπει να τροποποιήσετε το στοιχείο CounterButton για να αποδεχτείτε τη συνάρτηση handleIncrement και να την καλέσετε όταν ένας χρήστης κάνει κλικ στο κουμπί.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

Η άρση του κράτους συγκεντρώνει τα δεδομένα και μεταβιβάζει την ευθύνη του διαχείριση του κράτους από το παιδί στον γονιό.

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

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

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

Ωστόσο, πρέπει να είστε προσεκτικοί όταν σηκώνετε την κατάσταση, ώστε να μην καταλήξετε σε μια κατάσταση που είναι γνωστή ως γεώτρηση στήριξης.

The Prop Drilling Challenge

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

Η γεώτρηση στηρίγματος καθιστά δύσκολη την παρακολούθηση του τρόπου ροής των δεδομένων και μπορεί να οδηγήσει σε δύσκολα στη διατήρηση κώδικα.

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

Κοινή χρήση δεδομένων στο React με χρήση Props

Όταν χρειάζεται να κάνετε κοινή χρήση δεδομένων από ένα θυγατρικό στοιχείο με το γονικό στοιχείο, ανυψώστε την κατάσταση στο γονικό στοιχείο και, στη συνέχεια, μεταβιβάστε τη συνάρτηση που ενημερώνει την κατάσταση στο θυγατρικό στοιχείο ως στηρίγματα.

Σε περιπτώσεις όπου το θυγατρικό στοιχείο είναι βαθιά ένθετο στο δέντρο συστατικών, χρησιμοποιήστε ένα εργαλείο διαχείρισης κατάστασης όπως το React Context ή ένα εργαλείο τρίτου κατασκευαστή, όπως το React Redux, για να αποτρέψετε τη διάτρηση του προβολέα.