React Hooks: The Deep Cuts

Τα άγκιστρα είναι επαναχρησιμοποιήσιμες λειτουργίες. Σας επιτρέπουν να χρησιμοποιήσετε κατάσταση και άλλες δυνατότητες (π.χ. μέθοδοι κύκλου ζωής και ούτω καθεξής) χωρίς τη σύνταξη κλάσης. Οι λειτουργίες αγκίστρου μας επιτρέπουν να «αγκιστρώσουμε» το Κύκλος ζωής της κατάστασης React χρησιμοποιώντας λειτουργικά στοιχεία, επιτρέποντάς μας να χειριζόμαστε την κατάσταση των λειτουργικών στοιχείων μας χωρίς να χρειάζεται να τα μετατρέψουμε σε στοιχεία κλάσης.

Αντίδραση εισήγαγε γάντζους πίσω στην έκδοση 16.8 και έκτοτε έχει προσθέσει περισσότερα. Μερικά είναι πιο χρησιμοποιημένα και δημοφιλή από άλλα, όπως useEffect, useState, να useContext αγκίστρια. Δεν έχω καμία αμφιβολία ότι έχετε φτάσει σε αυτά εάν συνεργάζεστε με το React.

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

useReducer

Η useReducer Το hook είναι ένα εργαλείο διαχείρισης κατάστασης όπως και άλλα hook. Συγκεκριμένα, είναι μια εναλλακτική του useState άγκιστρο.

Εάν χρησιμοποιείτε το useReducer συνδέστε για να αλλάξετε δύο ή περισσότερες καταστάσεις (ή ενέργειες), δεν θα χρειαστεί να χειριστείτε αυτές τις καταστάσεις μεμονωμένα. Ο γάντζος παρακολουθεί όλες τις πολιτείες και τις διαχειρίζεται συλλογικά. Με άλλα λόγια: διαχειρίζεται και αποδίδει εκ νέου τις αλλαγές κατάστασης. σε αντίθεση με το useState άγκιστρο, useReducer είναι ευκολότερο όταν πρόκειται για το χειρισμό πολλών κρατών σε πολύπλοκα έργα.

Χρήση περιπτώσεις

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

Σύνταξη

useReducer δέχεται τρία ορίσματα, ένα από τα οποία είναι προαιρετικό:

• μια λειτουργία μειωτήρα
• initialState
• an init λειτουργία (προαιρετικό)

const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argument

Παράδειγμα

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

import { useReducer } from 'react';
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'USER_INPUT':
      return { ...state, userInput: action.payload };
    case 'TOGGLE_COLOR':
      return { ...state, color: !state.color };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0, userInput: '', color: false })

  return (
    <main className="App, App-header" style={{ color: state.color ? '#000' : '#FF07FF'}}>
      <input style={{margin: '2rem'}}
        type="text"
        value={state.userInput}
        onChange={(e) => dispatch({ type: 'USER_INPUT', payload: e.target.value })}
      />
      <br /><br />
      <p style={{margin: '2rem'}} >{state.count}</p>
      <section style={{margin: '2rem'}}>
        <button  onClick={(() => dispatch({ type: 'DECREMENT' }))}>-</button>
        <button onClick={(() => dispatch({ type: 'INCREMENT' }))}>+</button>
        <button onClick={(() => dispatch({ type: 'TOGGLE_COLOR' }))}>Color</button>
      </section>
      <br /><br />
      <p style={{margin: '2rem'}}>{state.userInput}</p>
    </main>
  );
}
export default App;

Από τον παραπάνω κώδικα, παρατηρήσαμε πώς μπορούμε να διαχειριστούμε εύκολα πολλές καταστάσεις στο περιστέλλων (switch-case), αυτό δείχνει το όφελος του useReducer. Αυτή είναι η δύναμη που δίνει όταν εργάζεστε σε σύνθετες εφαρμογές με πολλαπλές καταστάσεις.

useRef

Η useRef Το hook χρησιμοποιείται για τη δημιουργία αναφορών σε στοιχεία για πρόσβαση στο DOM. Αλλά περισσότερο από αυτό, επιστρέφει ένα αντικείμενο με α .current ιδιότητα που μπορεί να χρησιμοποιηθεί σε όλο τον κύκλο ζωής ενός στοιχείου, επιτρέποντας στα δεδομένα να διατηρούνται χωρίς να προκαλείται εκ νέου απόδοση. Ετσι το useRef Η τιμή παραμένει η ίδια μεταξύ των αποδόσεων. Η ενημέρωση της αναφοράς δεν ενεργοποιεί εκ νέου απόδοση.

Χρήση περιπτώσεις

Προσεγγίστε για το useRef αγκιστρώστε όταν θέλετε:

• Χειριστείτε το DOM με αποθηκευμένες μεταβλητές πληροφορίες.
• Πρόσβαση σε πληροφορίες από θυγατρικά στοιχεία (ένθετα στοιχεία).
• Ορίστε την εστίαση σε ένα στοιχείο.

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

Σύνταξη

useRef δέχεται μόνο ένα επιχείρημα, το οποίο είναι το αρχική τιμή.

const newRefComponent = useRef(initialValue);

Παράδειγμα

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

import './App.css'

function App() {
  const [anyInput, setAnyInput] = useState(" ");
  const showRender = useRef(0);
  const randomInput = useRef();
  const toggleChange = (e) => {
    setAnyInput (e.target.value);
    showRender.current++;
  
  }
  const focusRandomInput = () => {
    randomInput.current.focus();
  }

  return (
    <div className="App">
      <input className="TextBox" 
        ref ={randomInput} type="text" value={anyInput} onChange={toggleChange}
      />
      <h3>Amount Of Renders: {showRender.current}</h3>
      <button onClick={focusRandomInput}>Click To Focus On Input </button>
    </div>
  );
}

export default App;

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

useImperativeHandle

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

Λοιπόν, useImperativeHandle δίνει τη δυνατότητα σε έναν γονέα να έχει πρόσβαση στις λειτουργίες ενός θυγατρικού στοιχείου.

Πώς λειτουργεί αυτό;

• Μια συνάρτηση ορίζεται στο θυγατρικό στοιχείο.
• A ref προστίθεται στο γονικό.
• Χρησιμοποιούμε forwardRef, επιτρέποντας την ref που ορίστηκε να περάσει στο παιδί.
• useImperativeHandle εκθέτει τις λειτουργίες του παιδιού μέσω του ref.

Χρήση περιπτώσεις

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

Σύνταξη

useImperativeHandle (ref, createHandle, [dependencies])

Παράδειγμα

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

// Parent component
import React, { useRef } from "react";
import ChildComponent from "./childComponent";
import './App.css';

function useImperativeHandle() {
  const controlRef = useRef(null);
  return (
    onClick={
      () => {
        controlRef.current.controlPrint();
      }
    }
    >
    Parent Box
  );
}
export default useImperativeHandle;

// Child component
import React, { forwardRef, useImperativeHandle, useState } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const [print, setPrint] = useState(false);
  useImperativeHandle(ref, () => ({
    controlPrint() 
    { setPrint(!print); },
  })
  );

  return (
    <>
    Child Box
    { print && I am from the child component }
  );
});

export default ChildComponent;

Παραγωγή

useMemo

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

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

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

Χρήση περιπτώσεις

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

Σύνταξη

useMemo( () => 
  { // Code goes here },
  []
)

Παράδειγμα

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

// UseMemo.js
import React, { useState, useMemo } from 'react'

function Memo() {
  const [memoOne, setMemoOne] = useState(0);
  const incrementMemoOne = () => { setMemoOne(memoOne + 1) }
  const isEven = useMemo(() => { 
    let i = 0 while (i < 2000000000) i++ return memoOne % 2 === 0
  },
  [memoOne]);
  
  const square = useMemo(()=> { 
    console.log("squared the number"); for(var i=0; i < 200000000; i++);
    return memoOne * memoOne;
  },
  [memoOne]);

  return (
    Memo One - 
    { memoOne }
    { isEven ? 'Even' : 'Odd' } { square } 
  );
}
export default Memo

Παραγωγή

useMemo είναι λίγο σαν το useCallback γάντζο, αλλά η διαφορά είναι ότι useMemo μπορεί να αποθηκεύσει μια απομνημονευμένη τιμή από μια συνάρτηση, όπου useCallback αποθηκεύει την ίδια την απομνημονευμένη λειτουργία.

useCallback

Η useCallback Το hook είναι άλλο ένα ενδιαφέρον και το τελευταίο τμήμα ήταν ένα είδος ειδοποίησης spoiler για αυτό που κάνει.

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

Χρήση περιπτώσεις

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

Σύνταξη

const getMemoizedCallback = useCallback (
  () => { doSomething () }, []
);

Παράδειγμα

{ useCallback, useState } from "react";
import CallbackChild from "./UseCallback-Child";
import "./App.css"

export default function App() {
  const [toggle, setToggle] = useState(false);
  const [data, setData] = useState("I am a data that would not change at every render, thanks to the useCallback");
  const returnFunction = useCallback(
    (name) => 
    { return data + name; }, [data]
  );
  return (
    onClick={() => {
      setToggle(!toggle);
    }}
    >
    {" "}

    // Click To Toggle
    { toggle && h1. Toggling me no longer affects any function } 
  ); 
}

// The Child component
import React, { useEffect } from "react";

function CallbackChild(
  { returnFunction }
) {
  useEffect(() => 
    { console.log("FUNCTION WAS CALLED"); },
    [returnFunction]);
  return { returnFunction(" Hook!") };
}
export default CallbackChild;

Παραγωγή

Τελικές σκέψεις

Ορίστε! Μόλις εξετάσαμε πέντε εξαιρετικά εύχρηστα γάντζους React που νομίζω ότι συχνά παραβλέπονται. Όπως συμβαίνει με πολλές περισυλλογές όπως αυτή, απλώς ξύνουμε την επιφάνεια αυτών των γάντζων. Το καθένα έχει τις δικές του αποχρώσεις και σκέψεις που πρέπει να λάβετε υπόψη όταν τις χρησιμοποιείτε. Αλλά ελπίζουμε ότι έχετε μια ωραία ιδέα υψηλού επιπέδου για το τι είναι και πότε μπορεί να ταιριάζουν καλύτερα από ένα άλλο άγκιστρο που μπορεί να αναζητάτε πιο συχνά.

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