Μια βαθύτερη ματιά στα πιο δημοφιλή άγκιστρα React

Τα πιο σημαντικά πράγματα που πρέπει να θυμάστε σχετικά με τα άγκιστρα:

• μπορούν να χρησιμοποιηθούν μόνο σε στοιχεία συναρτήσεων - τα στοιχεία κλάσεων έχουν δική τους υλοποίηση του κύκλου ζωής,
• αρχίζουν πάντα με χρήση;
• μπορείτε να χρησιμοποιήσετε όσα Hooks θέλετε, αλλά πρέπει να θυμάστε ότι η χρήση τους έχει αντίκτυπο στη συνολική απόδοση,
• πρέπει να εκτελούνται με την ίδια σειρά σε κάθε απόδοση... αλλά γιατί; Ας δούμε ένα παράδειγμα:

import { useState,useEffect } from "react",

export default function FunctionComponent() {
const [value, setValue] = useState(1),
const [doubleValue, setDoubleValue] = useState(1),
if (value > 3) {
  useEffect(() => setDoubleValue(value * 2),[value]),
}

return (
  <>
    <p>{`Single ${value} Double ${doubleValue}`}</p>
    <button onclick="{()" > setValue(value + 1)}&gt;Έλεγχος</button>
  </>
);
}
```

Αρχικά, θα λάβετε μια προειδοποίηση από το eslint:

<code>srcFunctionComponent.js
   Γραμμή 11:5: React Το άγκιστρο "useEffect" καλείται υπό όρους. <strong>React Άγκιστρα</strong> πρέπει να καλούνται με την ίδια ακριβώς σειρά σε κάθε στοιχείο render .eslintreact-hooks/rules-of-hooks

Όπως μπορείτε να δείτε, είναι μόνο μια προειδοποίηση eslint, οπότε μπορείτε να την απενεργοποιήσετε προσθέτοντας μια εντολή από κάτω στην κορυφή του FunctionComponent

/* eslint-disable react-hooks/rules-of-hooks */ 

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

Σφάλμα χωρίς αιτία: Rendered more hooks than during the previous render.
     React 5
     FunctionComponent FunctionComponent.js:11
     React 12
     unstable_runWithPriority scheduler.development.js:468
     React 17
     js index.js:7
     js main.chunk.js:905
     Webpack 7
 react-dom.development.js:15162

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

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

useState

Πιθανόν να ξέρετε πώς φαίνεται 😉

const [value, setValue] = useState(0),

Έτσι, έχετε 4 στοιχεία: κατάσταση (αντιδραστική τιμή), συνάρτηση ενημέρωσης (setter), πραγματικό άγκιστρο (συνάρτηση) και προαιρετική αρχική τιμή. Γιατί επιστρέφει έναν πίνακα; Επειδή μπορούμε να την αναδομήσουμε όπως θέλουμε.

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

1. Με σκληρά κωδικοποιημένη τιμή ή κάτι τέτοιο - το οποίο θα καλείται σε κάθε απόδοση

const [value, setValue] = useState(0),

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

const [value, setValue] = useState(() => {
   console.log("INIT"),
   return 0,
 });

Πώς να ελέγξετε ότι ο πρώτος τρόπος καλείται πραγματικά σε κάθε απόδοση; Δημιουργήστε μια συνάρτηση και περάστε την ως αρχική κατάσταση:

const checkInit = () => {
console.log("INIT"),
return 0,
};

const [value, setValue] = useState(checkInit()),
```

Και τώρα περάστε το με τον δεύτερο τρόπο:

const checkInit = () => {
console.log("INIT"),
return 0,
};

const [value, setValue] = useState(() => checkInit()),
```

Ωραία, έτσι;

Ένα άλλο πράγμα που μπορεί να δημιουργήσει σφάλματα στη ροή της εφαρμογής: πιθανότατα γνωρίζετε πώς να ενημερώνετε μια κατάσταση, σωστά;

setValue(1),

Σωστά... αλλά τι γίνεται αν θέλω να ενημερώσω την κατάσταση με βάση μια προηγούμενη κατάσταση;

setValue(value + 1),

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

setValue((prevState) => prevState + 1),
// με αντικείμενα:
...prevState, επώνυμο: "Brzeczyszczykiewicz" } })),

useEffect

Αυτό το Hook δέχεται 2 ορίσματα (το δεύτερο είναι προαιρετικό) και το χρησιμοποιούμε για να χειριζόμαστε τις παρενέργειες. Και ανάλογα με το τι περνάμε ως δεύτερο όρισμα, το Hook θα κληθεί διαφορετικά:

1. χωρίς δεύτερο όρισμα - κάθε απόδοση

useEffect(() => {
   doSomething(),
 });

2. άδειος πίνακας - μόνο στην πρώτη απόδοση

useEffect(() => {
   doSomething(),
 }, []);

3. πίνακα με εξαρτήσεις - κάθε φορά που αλλάζει η τιμή στον πίνακα εξαρτήσεων

useEffect(() => {
   doSomething(value),
 }, [value]),

Καθαρισμός

Με το useEffect, μπορούμε να χρησιμοποιήσουμε κάτι που ονομάζεται cleanup. Για ποιο λόγο; Είναι πολύ χρήσιμο, αλλά νομίζω ότι είναι καλύτερο για τον καθαρισμό των ακροατών συμβάντων. Ας πούμε ότι θέλετε να δημιουργήσετε έναν ακροατή συμβάντων που εξαρτάται από κάποια κατάσταση. Δεν θέλετε να προσθέτετε έναν νέο ακροατή συμβάντων σε κάθε αλλαγή κατάστασης, γιατί μετά από μερικά renders θα υπάρχουν τόσοι πολλοί ακροατές που θα επηρεάζουν την απόδοση της εφαρμογής. Ένας πολύ καλός τρόπος για να αποφύγετε τέτοια πράγματα είναι να χρησιμοποιήσετε τη λειτουργία καθαρισμού. Πώς να το κάνετε; Απλά προσθέστε μια συνάρτηση επιστροφής στο useEffect.

useEffect(() => {
console.log("side effect 1", count),
return () => { {
console.log("ΚΑΤΑΣΤΡΟΦΗ 1"),
};
});

useEffect(() => {
console.log("side effect 2", count),
return () => { {
console.log("ΚΑΤΑΣΤΡΟΦΗ 2"),
};
}, []);

useEffect(() => {
console.log("side effect 3", count),
return () => { {
console.log("ΚΑΤΑΣΤΡΟΦΗ 3"),
};
}, [count]),
```

Επειδή βρίσκεται μέσα στο useEffect Hook, η επιστροφή καλείται ανάλογα με τον πίνακα εξαρτήσεων - σε κάθε απόδοση, μόνο στην πρώτη απόδοση ή όταν αλλάζει η τιμή στον πίνακα εξαρτήσεων. Αλλά όταν το συστατικό αποσυνδέεται, το cleaning θα κληθεί στο δεύτερο όρισμα, ό,τι κι αν γίνει. Η επιστροφή κωδικός καλείται πριν από τον πραγματικό κώδικα από το Hook. Είναι πολύ λογικό - πρώτα καθαρίζετε το παλιό και στη συνέχεια δημιουργείτε ένα νέο. Σωστά;

useEffect(() => {
   // addEventListener
   console.log("Add"),
   return () => { {
     // removeEventListener
     console.log("Remove"),
   };
 }, [value]),

Έτσι, πρώτα, θα λάβετε ένα αφαιρέστε το μήνυμα, τότε Προσθέστε.

Υπάρχει ένα πράγμα που πρέπει να προσέξετε όταν χρησιμοποιείτε το useEffect και ασύγχρονο κώδικα μέσα σε αυτό. Ρίξτε μια ματιά στον παρακάτω κώδικα:

useEffect(() => {
   fetch("https://picsum.photos/5000/5000").then(() => {
     setValue((prevState) => prevState + 1),
   });
 }, []);

Στην αρχή, φαίνεται εντάξει. Λαμβάνετε κάποια δεδομένα, και όταν έρθουν τα δεδομένα, ενημερώνετε την κατάσταση. Και εδώ είναι η παγίδα:

Μερικές φορές θα λάβετε μια τέτοια προειδοποίηση:
Δεν μπορεί να πραγματοποιηθεί ενημέρωση κατάστασης React σε ένα μη προσαρτημένο στοιχείο. Αυτό είναι ένα no-op, αλλά υποδεικνύει μια διαρροή μνήμης στην εφαρμογή σας. Για να το διορθώσετε, ακυρώστε όλες τις συνδρομές και τις ασύγχρονες εργασίες σε μια συνάρτηση καθαρισμού useEffect.

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

useEffect(() => {
let mounted = true,
fetch("https://picsum.photos/5000/5000").then(() => {
if (mounted) {
setValue((prevState) => prevState + 1),
}
});

return () => {
mounted = false,
};
}, []);
```

Σημείωση: Υπάρχει ένα πολύ παρόμοιο Hook => useLayoutEffect() - το callback εκτελείται μετά την απόδοση του συστατικού αλλά πριν την οπτική ενημέρωση του dom. Είναι χρήσιμο όταν εργάζεστε με την getBoundingClientRect(), αλλά θα πρέπει να χρησιμοποιείτε το useEffect από προεπιλογή. Γιατί; Επειδή μπορεί να μπλοκάρει τις οπτικές ενημερώσεις - όταν έχετε έναν πολύπλοκο κώδικα μέσα στο effect Hook σας.

useContext

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

1. Δημιουργημένο πλαίσιο - δεδομένα
2. Πάροχος πλαισίου - παρέχει πλαίσιο σε όλα τα παιδιά
3. Περασμένη τιμή - δεδομένα που θέλετε να μοιραστείτε
4. Hook - για να διαβάσετε κοινά δεδομένα

const user = {
name: "Adam",
lastName: "Kowalski",
};

export const UserContext = createContext(user),

;
```

Στο παιδί, πρέπει να εισαγάγετε το πλαίσιο και να καλέσετε το useContext Hook και να περάσετε το πλαίσιο ως όρισμα.

import { UserContext } from "./App",

const { name } = useContext(UserContext),

return <h1>Γεια σου {όνομα}<>
```

Ορίστε. Φαίνεται ωραίο. Κυρίως για τη μετάδοση παγκόσμιων δεδομένων όπως θέματα κ.λπ. Δεν συνιστάται για χρήση σε εργασίες με πολύ δυναμικές αλλαγές.

Φυσικά, μπορούμε να δημιουργήσουμε έναν προσαρμοσμένο πάροχο περιβάλλοντος και ένα προσαρμοσμένο Hook για να μειώσουμε το boilerplate... αλλά θα ασχοληθώ με τα προσαρμοσμένα Hooks στο επόμενο άρθρο.

useReducer

Μας επιτρέπει να διαχειριζόμαστε την κατάσταση και να επανεκτελούμε όταν η κατάσταση αλλάζει - όπως το useState. Είναι παρόμοιο με το redux reducer. Αυτό είναι καλύτερο από το useState όταν η λογική της κατάστασης είναι πιο περίπλοκη.

const [state, dispatch] = useReducer(reducer, initialArg), 

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

Υπάρχει επίσης ένα τρίτο όρισμα που μπορεί να μεταβιβαστεί στον useReducer - η συνάρτηση init.

const [state, dispatch] = useReducer(reducer, initialArg, init),

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

// Γονέας

// Παιδί
function init(initialNumber) {
return { number: initialNumber },
}

function reducer(state, action) {
switch (action.type) {
case "change":
return { number: Math.random() },
case "reset":
return init(action.payload),
default:
throw new Error(),
}
}

export default function ChildComponent({ getFactorial }) {
const [state, dispatch] = useReducer(reducer, initialNumber, init),

return (
<>
   <h2>Αριθμός: {state.number}</h2>
      <button
        onclick="{()" > dispatch({ type: "reset", payload: initialNumber })}
      &gt;
        Επαναφορά
      </button>
      <button onclick="{()" > dispatch({ type: "change" })}&gt;Draw</button>
    </>
  );
}

Αριθμός: {state.number}

);
}
“`

useCallback

Πότε να το χρησιμοποιήσετε; Όταν θέλουμε να επιτύχουμε αναφορική ισότητα (μειώνοντας έτσι τον αριθμό των συναρτήσεων που δημιουργούνται). Αυτό το Hook επιστρέφει τη συνάρτηση, σε αντίθεση με το useMemo που επιστρέφει την τιμή.

Παράδειγμα: Δημιουργήστε μια συνάρτηση στο γονικό στοιχείο και στη συνέχεια περάστε την μέσω props

// Γονέας
 const getSquaredValue = () => count * count,
 ...
 return (
   
 )

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

// Child
 useEffect(() => {
   console.log("getSquaredValue", getSquaredValue()),
 }, [getSquaredValue]),

Θα καταγράφει στην κονσόλα σε κάθε απόδοση! Ακόμα και αν οι τιμές μέσα στο getSquaredValue() η λειτουργία δεν άλλαξε. Μπορούμε όμως να το αποφύγουμε αυτό τυλίγοντας αυτή τη συνάρτηση σε useCallback

const getSquaredValue = useCallback(() => count * count, [count])

Μπορούμε επίσης να περάσουμε κάποιες παραμέτρους σε αυτή τη συνάρτηση:

const getSquaredValue = useCallback(
   (multiplier) => count * count * multiplier,
   [count]
 );

useMemo

const memoizedValue = useMemo(() => {
   return doSomething(value),
 }, [value]),

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

Θα πρέπει να το χρησιμοποιείτε μόνο σε 2 περιπτώσεις:

1. Αν θέλετε να αποφύγετε την κλήση ενός πολύπλοκου κώδικα σε κάθε απόδοση,
2. Αν θέλετε να επιτύχετε αναφορική ισότητα.

Ας δούμε λίγο πιο προσεκτικά τη δεύτερη περίπτωση. Θέλουμε να χρησιμοποιήσουμε το useEffect με ένα αντικείμενο ως εξάρτηση. Επειδή τα αντικείμενα συγκρίνονται με την αναφορά τους, η useEffect θα κληθεί σε κάθε απόδοση. Για να αποφύγουμε τέτοια πράγματα, μπορούμε να συνδυάσουμε το useEffect με το useMemo για να απομνημονεύσουμε τέτοια αντικείμενα και στη συνέχεια να περάσουμε αυτά τα απομνημονευμένα αντικείμενα στον πίνακα εξαρτήσεων. Σύντομο παράδειγμα:

Προσπαθήστε πρώτα να το κάνετε χωρίς useMemo:

const hobbit = { name: "Bilbo" },

useEffect(() => {
console.log("Hello ", hobbit.name),
}, [hobbit]),
```

Επίσης, θα λάβετε μια προειδοποίηση:

Το αντικείμενο 'hobbit' κάνει τις εξαρτήσεις του useEffect Hook (γραμμή 49) να αλλάζουν σε κάθε απόδοση. Μετακινήστε το μέσα στο useEffect callback. Εναλλακτικά, τυλίξτε την αρχικοποίηση του 'hobbit' στο δικό του useMemo () Hook.eslintreact-hooks/exhaustive-deps

Στη συνέχεια, δοκιμάστε με το useMemo:

const hobbit = useMemo(() => {
return { name: "Bilbo" },
}, []);

useEffect(() => {
console.log("Hello ", hobbit.name),
}, [hobbit]),
```

useRef

Το πιο σημαντικό πράγμα: το useRef δεν ενεργοποιεί την επανεκτέλεση (όπως το useState) επειδή δεν συνδέεται με τον κύκλο απόδοσης - διατηρεί την ίδια αναφορά μεταξύ των αποδόσεων.

const ref = useRef(0),

Για να καλέσετε την αποθηκευμένη τιμή, πρέπει να χρησιμοποιήσετε μια τρέχουσα ιδιότητα (η ref είναι ένα αντικείμενο) - ref.current

Η δεύτερη περίπτωση για την οποία μπορούμε να χρησιμοποιήσουμε αυτό το Hook είναι για να αναφερθούμε σε στοιχεία μέσα στην HTML. Κάθε στοιχείο έχει ένα χαρακτηριστικό ref. Έτσι, μπορούμε να χειριστούμε την εστίαση, τα γεγονότα κ.λπ.

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

export default function UncontrolledForm() {
  const input = useRef(),

  const handleSubmit = (e) => {
    e.preventDefault(),
    console.log(input.current.value),
  };

  return (
    
      
      Submit
    
  );
}

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

Μπόνους: Είναι ιδανικό όταν πρέπει να θυμάστε προηγούμενες τιμές κατάστασης. Μπορείτε να χρησιμοποιήσετε γι' αυτό το useEffect Hook, απλά περάστε την κατάσταση στο ref.

const [value, setValue] = useState(""),

let prevValue = useRef(""),

useEffect(() => {
  prevValue.current = value,
}, [value]),

 setValue(e.target.value)}>,

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

Και υπάρχουν επίσης προσαρμοσμένα άγκιστρα...

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

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

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

Τέλος του Μέρους 1

Διαβάστε περισσότερα:

Το JavaScript είναι εντελώς νεκρό. Κάποιος τύπος στο Διαδίκτυο

Ανάπτυξη GraphQL/MongoDB API χρησιμοποιώντας λειτουργίες Netlify Functions

Πώς να σκοτώσετε ένα έργο με κακές πρακτικές κωδικοποίησης