Kroge er genanvendelige funktioner. De giver dig mulighed for at bruge tilstand og andre funktioner (f.eks. livscyklusmetoder og så videre) uden at skrive en klasse. Krogfunktioner lader os "kroge ind" i Reaktionstilstands livscyklus ved hjælp af funktionelle komponenter, hvilket giver os mulighed for at manipulere tilstanden af vores funktionelle komponenter uden at skulle konvertere dem til klassekomponenter.
Reagerer indførte kroge tilbage i version 16.8 og har tilføjet flere lige siden. Nogle er mere brugte og populære end andre, f.eks useEffect, useStateog useContext kroge. Jeg er ikke i tvivl om, at du har nået dem, hvis du arbejder med React.
Men det, jeg er interesseret i, er de mindre kendte React-kroge. Selvom alle React-hooks er interessante på hver deres måde, er der fem af dem, som jeg virkelig gerne vil vise dig, fordi de måske ikke dukker op i dit daglige arbejde - eller måske gør de det, og at kende dem giver dig nogle ekstra superkræfter.
Indholdsfortegnelse
useReducer
useReducer krog er et statsstyringsværktøj ligesom andre kroge. Konkret er det et alternativ til useState krog.
Hvis du bruger useReducer krog for at ændre to eller flere tilstande (eller handlinger), behøver du ikke at manipulere disse tilstande individuelt. Krogen holder styr på alle staterne og administrerer dem i fællesskab. Med andre ord: den administrerer og gengiver tilstandsændringer. I modsætning til useState krog, useReducer er nemmere, når det kommer til at håndtere mange stater i komplekse projekter.
Brug sager
useReducer kan hjælpe med at reducere kompleksiteten ved at arbejde med flere stater. Brug det, når du har brug for at spore flere tilstande kollektivt, da det giver dig mulighed for at behandle tilstandsstyring og gengivelseslogikken af en komponent som separate bekymringer.
Syntaks
useReducer accepterer tre argumenter, hvoraf et er valgfrit:
- en reduktionsfunktion
initialState- an
initfunktion (valgfrit)
const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argumentEksempel
Følgende eksempel er en grænseflade, der indeholder en tekstinput, tæller og knap. Interaktion med hvert element opdaterer tilstanden. Læg mærke til hvordan useReducer giver os mulighed for at definere flere sager på én gang i stedet for at opsætte dem individuelt.
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;Fra koden ovenfor bemærkede vi, hvordan vi nemt kan administrere flere stater i reducering (switch-case), dette viser fordelen ved useReducer. Dette er den kraft, det giver, når du arbejder i komplekse applikationer med flere tilstande.
useRef
useRef hook bruges til at oprette refs på elementer for at få adgang til DOM. Men mere end det returnerer det et objekt med en .current egenskab, der kan bruges gennem hele en komponents livscyklus, hvilket tillader data at bestå uden at forårsage en gengivelse. Så useRef værdi forbliver den samme mellem gengivelser; opdatering af referencen udløser ikke en gengivelse.
Brug sager
Nå til useRef krog når du vil:
- Manipuler DOM'et med lagret mutable information.
- Få adgang til oplysninger fra underordnede komponenter (indlejrede elementer).
- Sæt fokus på et element.
Det er mest nyttigt, når du gemmer muterbare data i din app uden at forårsage en gengivelse.
Syntaks
useRef accepterer kun ét argument, som er startværdi.
const newRefComponent = useRef(initialValue);Eksempel
Her brugte jeg useRef , useState krog for at vise antallet af gange, en applikation gengiver en opdateret tilstand, når den indtaster et tekstinput.
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;Bemærk, hvordan indtastning af hvert tegn i tekstfeltet opdaterer appens tilstand, men aldrig udløser en fuldstændig gengivelse.
useImperativeHandle
Ved du, hvordan en underordnet komponent har adgang til opkaldsfunktioner, der videregives til dem fra den overordnede komponent? Forældre videregiver dem via rekvisitter, men denne overførsel er "envejsbestemt" i den forstand, at forælderen ikke er i stand til at kalde en funktion, der er i barnet.
Godt, useImperativeHandle gør det muligt for en forælder at få adgang til en underordnet komponents funktioner.
Hvordan virker det?
- En funktion er defineret i den underordnede komponent.
- A
refer tilføjet i overordnet. - Vi anvender
forwardRef, hvilket tilladerrefsom var defineret til at blive videregivet til barnet. useImperativeHandleeksponerer barnets funktioner viaref.
Brug sager
useImperativeHandle fungerer godt, når man ønsker, at en forældrekomponent skal påvirkes af ændringer i barnet. Så ting som et ændret fokus, stigende og faldende og slørede elementer kan være situationer, hvor du finder dig selv at række ud efter denne krog, så forælderen kan opdateres i overensstemmelse hermed.
Syntaks
useImperativeHandle (ref, createHandle, [dependencies])Eksempel
I dette eksempel har vi to knapper, en der er i en overordnet komponent og en der er i et barn. Ved at klikke på forældreknappen hentes data fra barnet, hvilket giver os mulighed for at manipulere forældrekomponenten. Det er sat op, så et klik på barnet-knappen ikke overfører noget fra den overordnede komponent til barnet for at hjælpe med at illustrere, hvordan vi sender tingene i den modsatte retning.
// 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;Produktion
useMemo
useMemo er en af de mindst brugte, men mest interessante React hooks. Det kan forbedre ydeevnen og reducere latens, især på store beregninger i din app. Hvordan det? Hver gang en komponents tilstand opdateres og komponenter genrenderes, vil den useMemo krog forhindrer React i at skulle genberegne værdier.
Du kan se, funktioner reagerer på tilstandsændringer. Det useMemo krog tager en funktion og returnerer returværdien af denne funktion. Det cacherer denne værdi for at forhindre at bruge ekstra indsats på at gengive den, og returnerer den derefter, når en af afhængighederne har ændret sig.
Denne proces kaldes huske og det er det, der hjælper med at øge ydeevnen ved at huske værdien fra en tidligere anmodning, så den kan bruges igen uden at gentage al den matematik.
Brug sager
De bedste tilfælde vil være, når du arbejder med tunge beregninger, hvor du vil gemme værdien og bruge den på efterfølgende tilstandsændringer. Det kan være en god præstationsgevinst, men at bruge det for meget kan have den stik modsatte effekt ved at hæve din apps hukommelse.
Syntaks
useMemo( () =>
{ // Code goes here },
[]
)Eksempel
Når du klikker på knappen, indikerer dette miniprogram, hvornår et tal er lige eller ulige, og kvadrerer derefter værdien. Jeg tilføjede masser af nuller til løkken for at øge dens regnekraft. Det returnerer værdien i spildte sekunder og fungerer stadig godt på grund af useMemo krog.
// 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 MemoProduktion
useMemo er lidt ligesom useCallback krog, men forskellen er den useMemo kan gemme en gemt værdi fra en funktion, hvor useCallback gemmer selv den gemte funktion.
useCallback
useCallback hook er en anden interessant, og den sidste sektion var en slags spoileralarm for, hvad den gør.
Som vi lige så, useCallback fungerer som useMemo krog i, at de begge bruger huskeseddel til at cache noget til senere brug. Mens useMemo gemmer en funktions beregning som en cacheværdi, useCallback gemmer og returnerer en funktion.
Brug sager
lignende useMemo, useCallback er en god ydeevneoptimering, idet den gemmer og returnerer et husket tilbagekald og enhver af dets afhængigheder uden en gengivelse.
Syntaks
const getMemoizedCallback = useCallback (
() => { doSomething () }, []
);Eksempel
{ 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;Produktion
Afsluttende tanker
Sådan der! Vi har lige kigget på fem super praktiske React-kroge, som jeg synes ofte bliver overset. Som med mange roundups som denne, ridser vi blot overfladen af disse kroge. De har hver deres nuancer og overvejelser at tage i betragtning, når du bruger dem. Men forhåbentlig har du en god idé på højt niveau om, hvad de er, og hvornår de måske passer bedre end en anden krog, du måske rækker ud efter oftere.
Den bedste måde at forstå dem fuldt ud på er ved øvelse. Så jeg opfordrer dig til at øve dig i at bruge disse kroge i din ansøgning for bedre forståelse. Til det kan du komme meget mere i dybden ved at tjekke følgende ressourcer:
