Νοημοσύνη δεδομένων Πλάτωνα.
Κάθετη Αναζήτηση & Αι.

Πώς να χρησιμοποιήσετε το clearInterval() μέσα στο useEffect() του React και γιατί είναι σημαντικό.

Ημερομηνία:

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

Τι θα συμβεί αν δεν διαγράψουμε τα διαστήματα;

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

const Blinker = ({ text }) => {
  const [visible, setVisible] = useState(true);
  useEffect(() => {
    setInterval(() => {
      console.log(`Current blinking text: ${text}`);
      setVisible((visible) => !visible);
    }, 1000);
  }, [text]);
  return visible ? <h1>{text}</h1> : null;
};

Note: Ο [text] Η εξάρτηση του useEffect αναγκάζει το άγκιστρο να εκτελείται ξανά κάθε φορά που αλλάζει το κείμενο της βάσης. Ο μόνος λόγος για να προσθέσετε αυτήν την εξάρτηση είναι να κάνετε το console.log λειτουργήσει σωστά.
Δεδομένου ότι θα μπορούσαμε να θεωρήσουμε ότι δεν είναι ζωτικής σημασίας για την εφαρμογή μας, θα μπορούσαμε να την καταργήσουμε. Αλλά λαμβάνοντας υπόψη ότι υπάρχουν πολλοί έγκυροι λόγοι για να προσθέσετε ένα στήριγμα στις εξαρτήσεις, ας υποθέσουμε ότι console.log είναι ισχυρή απαίτηση.

Τι συμβαίνει με το Blinker όταν κάνουμε απόδοση για πρώτη φορά (δηλαδή κατά την τοποθέτηση)

  1. Το εφέ εκτελείται για πρώτη φορά, αφού τα εφέ τρέχουν πάντα στην πρώτη απόδοση (μοντάρισμα).
  2. Ξεκινά το πρώτο διάστημα, το οποίο καταγράφει ένα Current blinking text: χορδή κάθε δευτερόλεπτο.
  3. Το στοιχείο επιστρέφει μια κενή κεφαλίδα, την οποία αποδίδει το πρόγραμμα περιήγησης.

Τι συμβαίνει με το Blinker όταν αλλάξουμε το στηρίγμα κειμένου σε "a"

  1. Το στοιχείο Blinker αποδίδεται ξανά, καθώς κάθε φορά που αλλάζουν τα στηρίγματα ή η κατάσταση, το react θα αποδίδει ξανά το στοιχείο μας.
  2. Το React ελέγχει τις εξαρτήσεις του useEffect και αφού άλλαξε ένα (κείμενο), εκτελεί ξανά τη συνάρτηση του εφέ.
  3. Καταγράφεται ένα νέο διάστημα, το οποίο θα εκτυπωθεί Current blinking text: a κάθε δευτερόλεπτο.
  4. Το στοιχείο επιστρέφει μια κεφαλίδα με το γράμμα "a", το οποίο εμφανίζεται επίσης στην οθόνη.

Σε αυτό το σενάριο, η κονσόλα του προγράμματος περιήγησης μοιάζει με αυτό: Στιγμιότυπο οθόνης από 2022-04-18 00-09-12.png

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

Λύση

Για να το λύσουμε αυτό, μπορούμε να χρησιμοποιήσουμε τη συνάρτηση καθαρισμού του useEffect, η οποία μοιάζει με αυτό:

const Blinker = ({ text }) => {
  const [visible, setVisible] = useState(true);
  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log(`Current blinking text: ${text}`);
      setVisible((visible) => !visible);
    }, 1000);
    return () => {
      clearInterval(intervalId);
    };
  }, [text]);
  return visible ? <h1>{text}</h1> : null;
};

Αυτό που συμβαίνει τώρα είναι:

  1. Το στοιχείο Blinker αποδίδεται ξανά, όπως πριν, αφού άλλαξαν τα στηρίγματα.
  2. Το React ελέγχει τις εξαρτήσεις του useEffect και αφού άλλαξαν, εκτελεί ξανά τη συνάρτηση του εφέ.
  3. Αλλά πρώτα, πριν το react εκτελέσει το εφέ, θα εκτελέσει τη συνάρτηση που επιστρέψαμε, καθαρίζοντας το προηγούμενο εφέ και διαγράφοντας το παλιό διάστημα.
  4. Καταγράφεται ένα νέο διάστημα, το οποίο θα εκτυπωθεί The text currently blinking is: a κάθε δευτερόλεπτο.
  5. Το στοιχείο επιστρέφει μια κεφαλίδα με το γράμμα "a", το οποίο εμφανίζεται επίσης στην οθόνη.

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

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

Υπάρχουν πολλά άλλα σενάρια όπου η λειτουργία εκκαθάρισης του useEffect είναι χρήσιμη ή απαραίτητη, μείνετε συντονισμένοι για περισσότερα παραδείγματα στο μέλλον!

spot_img

Τελευταία Νοημοσύνη

spot_img