Το Context στο React

Πριν προχωρήσουμε στη μελέτη του επόμενου hook, πρέπει να εξετάσουμε την έννοια του context στο React.

Συνήθως μεταφέραμε δεδομένα από τα γονικά components στα παιδικά χρησιμοποιώντας props. Αυτός ο τρόπος είναι καλός αν έχετε λίγα components και δεν χρειάζεται να περάσετε τα props από το γονικό στο επιθυμητό component μέσω παιδικών περισσότερες από 2-3 φορές.

Αυτός ο τρόπος μπορεί επίσης να γίνει εξαιρετικά άβολος και να οδηγήσει σε διάφορα προβλήματα, αν στα ενδιάμεσα components αυτά τα props δεν χρησιμοποιούνται καθόλου (ένα τέτοιο πρόβλημα ονομάζεται prop drilling), ή αν χρειάζεται να μεταφέρετε τα ίδια δεδομένα σε ένα μεγάλο αριθμό components.

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

Για να χρησιμοποιήσετε το context, πρέπει πρώτα να το δημιουργήσετε. Αρχικά, ας δημιουργήσουμε το αρχείο MyContext.js και ας εισάγουμε σε αυτό τη function createContext:

Τώρα ας δημιουργήσουμε το αντικείμενο context, ας το γράψουμε στη μεταβλητή MyContext, την οποία δεν θα πρέπει να ξεχάσουμε να εξάγουμε. Στη δική μας περίπτωση, ορίσαμε στην createContext μια αρχική τιμή null, αφού δεν είναι ουσιώδης για εμάς (θα μπορούσαμε απλά να αφήσουμε κενές αγκύλες). Η προκαθορισμένη τιμή θα εμφανιστεί κατά την ανάγνωση του context, εάν δεν βρεθεί κάποια άλλη. Αυτή η τιμή μπορεί να είναι οποιουδήποτε τύπου:

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

Ας εισάγουμε τώρα το MyContext.js στο κενό component App - σε εκείνο το component από το οποίο πρόκειται να μεταφέρουμε δεδομένα: