Δημιουργία προσαρμοσμένων αγκίστρων στο React

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

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

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

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

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

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

Σε αυτήν την ανάρτηση, θα εμβαθύνουμε στην έννοια των προσαρμοσμένων αγκίστρων.

Κατανόηση της βασικής δομής και σύνταξης ενός γάντζου

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

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

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

Ας ορίσουμε ένα άγκιστρο useState που παίρνει την αρχική τιμή ως 0 και με το κλικ του κουμπιού, αυξάνεται κατά ένα.

import React, { useState } from 'react';

function Example() {

 // Declare a new state variable, which we'll call "count"
 const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

Στο παραπάνω παράδειγμα, το άγκιστρο useState χρησιμοποιείται από το λειτουργικό στοιχείο Παράδειγμα για να χειριστεί την κατάσταση μιας μεταβλητής μέτρησης. Όταν πατηθεί το κουμπί αύξησης, αυξάνεται η κατάσταση μέτρησης σε 1 με τη βοήθεια της συνάρτησης setCount.

Πότε να χρησιμοποιείτε προσαρμοσμένα άγκιστρα

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

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

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

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

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

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

Βέλτιστες πρακτικές για προσαρμοσμένα Hooks στο React

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

1. Τα άγκιστρα πρέπει πάντα να καθορίζονται σε ένα στοιχείο συνάρτησης και δεν μπορούν να δημιουργηθούν μέσα σε ένα στοιχείο κλάσης.
2. Τα άγκιστρα πρέπει να καλούνται στο ανώτερο επίπεδο: Η κλήση αγκίστρων εντός βρόχων, συνθηκών ή ένθετων συναρτήσεων καθιστά δύσκολη τη διατήρηση της κατάστασης. Ως αποτέλεσμα, είναι καλύτερο να καλέσετε άγκιστρα στο ανώτερο επίπεδο.
3. Ξεκινήστε να ονομάζετε τα προσαρμοσμένα άγκιστρα με τη λέξη "χρήση".
4. Δύο στοιχεία που χρησιμοποιούν το ίδιο Hook δεν μπορούν να μοιράζονται την ίδια κατάσταση: Όταν δύο στοιχεία μοιράζονται ένα προσαρμοσμένο άγκιστρο, το καθένα έχει τη δική του απομονωμένη κατάσταση και εφέ. Αυτό σημαίνει ότι η κατάσταση και τα αποτελέσματα που περιλαμβάνονται στο Hook δεν μοιράζονται τα δύο συστατικά, αλλά μάλλον ότι κάθε στοιχείο έχει τη δική του παρουσία της κατάστασης και των αποτελεσμάτων.

Επαναχρησιμοποίηση λογικής με προσαρμοσμένα Hooks στο React

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

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

Εδώ είναι ένα παράδειγμα:

import { useState } from 'react';

function useCounter() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count + 1);
  }

  function decrement() {
    setCount(count - 1);
  }

  return { count, increment, decrement };
}

export default useCounter;

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

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

import React from 'react';
import useCounter from './useCounter';

function MyComponent() {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default MyComponent;

Ομοίως, όταν χρειάζεται, μπορείτε να χρησιμοποιήσετε τα ίδια προσαρμοσμένα άγκιστρα σε όλα τα εξαρτήματά σας.

Κατασκευή ενός σύνθετου προσαρμοσμένου γάντζου

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

import { useState, useEffect } from 'react';

function useAPI(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      setError(null);
      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (err) {
        setError(err);
      }
      setLoading(false);
    }
    fetchData();
  }, [url]);

  async function update(newData) {
    setLoading(true);
    setError(null);
    try {
      const response = await fetch(url, {
        method: 'PUT',
        body: JSON.stringify(newData),
        headers: { 'Content-Type': 'application/json' },
      });
      const data = await response.json();
      setData(data);
    } catch (err) {
      setError(err);
    }
    setLoading(false);
  }

  return { data, loading, error, update };
}

export default useAPI;

Εδώ ονομάσαμε τη συνάρτηση που ξεκινά με "use" και στη συνέχεια χρησιμοποιήσαμε αγκίστρια useState & useEffect για διαφορετικά δεδομένα, φόρτωση και σφάλματα.

Αργότερα, βάσει της συνθήκης, τροποποιούμε την κατάσταση και την επιστρέφουμε.

Τώρα, μπορούμε να χρησιμοποιήσουμε αυτό το προσαρμοσμένο άγκιστρο σε ένα στοιχείο όπως αυτό:

import React from 'react';
import useAPI from './useAPI';


function App() {
 const { data, loading, error, update } = useAPI('https://jsonplaceholder.typicode.com/todos/1');

 if (loading) return <p>Loading...</p>;
 if (error) return <p>Error: {error.message}</p>;
 if (!data) return <p>No data</p>;

 return (
   <div>
     <p>Title: {data.title}</p>
     <button onClick={() => update({
       completed: false,
       id: 1,
       title: "Hello",
       userId: 1
     })}>Update</button>
   </div>
 );
}

export default App;

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

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

Ομοίως, μπορείτε να χρησιμοποιήσετε βιβλιοθήκες τρίτων, όπως το πακέτο swr ή @tanstack/react-query, για να ανακτήσετε τα δεδομένα και να διαχειριστείτε την κατάσταση, βοηθώντας σας να γράψετε λιγότερο κώδικα και να απλοποιήσετε τη διαδικασία. Υπάρχουν πολλά περισσότερα προσαρμοσμένα άγκιστρα τρίτων που είναι διαθέσιμα για να διευκολύνουν τον έλεγχο ταυτότητας, τη διαχείριση τοπικής αποθήκευσης, τις κινούμενες εικόνες και πολλά άλλα.

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

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

Επιπλέον, είναι ότι χρησιμοποιώντας τη δυνατότητα Auto Components της προσθήκης Locofy.ai, μπορείτε να λάβετε προτάσεις για να μετατρέψετε τα στοιχεία σχεδίασής σας σε στοιχεία React άμεσα με σκηνικά αξίας και στυλ.

Ελπίζουμε να σας αρέσει.

Αυτό είναι - ευχαριστώ.

Μπορείτε επίσης να βρείτε τα γραπτά μου στο Substack.

Σκεφτείτε να γίνετε μέλος του Medium αν σας αρέσει να διαβάζετε ιστορίες όπως αυτή και θέλετε να με βοηθήσετε ως συγγραφέα. Κοστίζει 5 $ το μήνα και σας δίνει απεριόριστη πρόσβαση στο Μεσαίο περιεχόμενο. Θα λάβω μια μικρή προμήθεια εάν εγγραφείτε μέσω του συνδέσμου μου.

Δημοσιεύτηκε αρχικά στη διεύθυνση https://www.locofy.ai.