React Hooks: The Deep Cuts

A horgok újrafelhasználható funkciók. Lehetővé teszik a használatát voltak és egyéb szolgáltatások (pl. életciklus metódusok és így tovább) osztály írása nélkül. A Hook funkciók lehetővé teszik, hogy „beleakadjunk” a Reakcióállapot életciklusa funkcionális komponensek használatával, lehetővé téve számunkra, hogy módosítsuk funkcionális komponenseink állapotát anélkül, hogy osztálykomponensekké kellene konvertálnunk őket.

Reagál bevezetett horgokat vissza a 16.8-as verzióban, és azóta újabbakat ad hozzá. Egyesek jobban használtak és népszerűbbek, mint mások, mint pl useEffect, useStateés useContext horgok. Nincs kétségem afelől, hogy ezekhez nyúlt, ha a Reacttel dolgozik.

De ami engem érdekel, azok a kevésbé ismert React horgok. Bár az összes React horog érdekes a maga módján, van közülük öt, amit nagyon szeretnék megmutatni, mert lehet, hogy nem bukkannak fel a mindennapi munkád során – vagy talán igen, és ha ismered őket, az extra szuperképességeket ad neked.

useReducer

A useReducer A hook a többi horgokhoz hasonlóan államkezelési eszköz. Konkrétan alternatívája a useState horog.

Ha a useReducer horog két vagy több állapot (vagy művelet) megváltoztatásához, akkor nem kell ezeket az állapotokat külön-külön manipulálnia. A horog nyomon követi az összes államot, és együttesen kezeli őket. Más szóval: kezeli és újrarendereli az állapotváltozásokat. ellentétben a useState horog, useReducer egyszerűbb, ha összetett projektekben sok állapotot kell kezelni.

Használati esetek

useReducer csökkentheti a több állapottal végzett munka bonyolultságát. Használja, ha több állapotot együttesen kell nyomon követnie, mivel lehetővé teszi, hogy az állapotkezelést és az összetevők megjelenítési logikáját külön szempontként kezelje.

Szintaxis

useReducer három argumentumot fogad el, amelyek közül az egyik nem kötelező:

• redukáló funkció
• initialState
• an init funkció (opcionális)

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

Példa

A következő példa egy olyan felület, amely szövegbevitelt, számlálót és gombot tartalmaz. Az egyes elemekkel való interakció frissíti az állapotot. Figyeld meg, hogyan useReducer lehetővé teszi, hogy egyszerre több esetet definiáljunk, ahelyett, hogy külön-külön állítanánk be őket.

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;

A fenti kódból észrevettük, hogyan tudunk könnyen kezelni több állapotot a csökkentő (Switch-case), ez mutatja a hasznot useReducer. Ez az a teljesítmény, amelyet akkor ad, ha összetett, több állapotú alkalmazásokban dolgozik.

useRef

A useRef A hook az elemek hivatkozásainak létrehozására szolgál a DOM elérése érdekében. De ennél is többet ad vissza egy objektumot a .current olyan tulajdonság, amely az összetevő teljes életciklusa során használható, lehetővé téve az adatok fennmaradását anélkül, hogy újbóli megjelenítést okoznának. Így a useRef az érték változatlan marad a megjelenítések között; a hivatkozás frissítése nem vált ki újrarenderelést.

Használati esetek

Nyissa meg a useRef horog, amikor azt szeretné:

• Manipulálja a DOM-ot a tárolt változtatható információkkal.
• Hozzáférés a gyermekkomponensekből származó információkhoz (beágyazott elemek).
• Fókusz beállítása egy elemre.

Ez akkor a leghasznosabb, ha módosítható adatokat tárol az alkalmazásban anélkül, hogy újbóli megjelenítést okozna.

Szintaxis

useRef csak egy érvet fogad el, ez a kezdő érték.

const newRefComponent = useRef(initialValue);

Példa

Itt használtam a useRef és a useState hook, hogy megmutassa, hányszor jelenít meg egy alkalmazás frissített állapotot szövegbevitel közben.

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;

Figyelje meg, hogy az egyes karakterek beírása a szövegmezőbe hogyan frissíti az alkalmazás állapotát, de soha nem váltja ki a teljes újramegjelenítést.

useImperativeHandle

Tudja, hogy egy utódkomponens hogyan fér hozzá a szülőkomponenstől átadott függvényhívásokhoz? A szülők ezeket a kellékeken keresztül továbbítják, de ez az átvitel „egyirányú” abban az értelemben, hogy a szülő nem tud meghívni egy funkciót, amely a gyermekben van.

Nos, useImperativeHandle lehetővé teszi a szülő számára, hogy hozzáférjen a gyermekkomponens funkcióihoz.

Hogyan működik?

• Egy függvény a gyermekkomponensben van definiálva.
• A ref hozzáadódik a szülőhöz.
• Az általunk használt forwardRef, lehetővé téve a ref amelyet úgy határoztak meg, hogy átadják a gyermeknek.
• useImperativeHandle a gyermek funkcióit a ref.

Használati esetek

useImperativeHandle jól működik, ha azt szeretné, hogy a szülő összetevőt befolyásolják a gyermek változásai. Tehát az olyan dolgok, mint a megváltozott fókusz, a növelés és a csökkentés, valamint az elmosódott elemek olyan helyzetek lehetnek, amikor úgy találja magát, hogy ehhez a horoghoz nyúl, hogy a szülő ennek megfelelően frissíthető legyen.

Szintaxis

useImperativeHandle (ref, createHandle, [dependencies])

Példa

Ebben a példában két gomb van, az egyik a szülőkomponensben, a másik pedig a gyermekben. A szülő gombra kattintva lekéri az adatokat a gyermekről, lehetővé téve a szülő komponens manipulálását. Úgy van beállítva, hogy a gyermekgombra kattintva ne adjon át semmit a szülő komponensből a gyermeknek, hogy segítsen szemléltetni, hogyan továbbítjuk a dolgokat az ellenkező irányba.

// 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;

teljesítmény

useMemo

useMemo az egyik legkevésbé használt, de legérdekesebb React horog. Javíthatja a teljesítményt és csökkentheti a várakozási időt, különösen az alkalmazásban végzett nagy számítások esetén. Hogy hogy? Minden alkalommal, amikor egy összetevő állapota frissül és az összetevők újra renderelődnek, a useMemo hook megakadályozza, hogy a Reactnak újra kelljen számítania az értékeket.

Látod, a függvények reagálnak az állapotváltozásokra. Az useMemo horog egy funkciót és a függvény visszatérési értékét adja vissza. Gyorsítótárazza ezt az értéket, nehogy további erőfeszítéseket költsön az újbóli megjelenítésre, majd visszaadja, ha az egyik függőség megváltozik.

Ezt a folyamatot hívják emlékeztető és ez segít a teljesítmény növelésében azáltal, hogy megjegyzi egy korábbi kérés értékét, így újra felhasználható anélkül, hogy megismételné a számításokat.

Használati esetek

A legjobb felhasználási esetek mindig azok, amikor nehéz számításokkal dolgozik, ahol el szeretné tárolni az értéket, és használni szeretné a későbbi állapotváltozásokhoz. Ez szép teljesítménynyereség lehet, de ha túl sokat használod, az éppen ellenkező hatást válthat ki az alkalmazás memóriájában.

Szintaxis

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

Példa

A gombra kattintva ez a miniprogram jelzi, ha egy szám páros vagy páratlan, majd négyzetre emeli az értéket. Sok nullát adtam a hurokhoz, hogy növeljem a számítási teljesítményét. Kiömlött másodpercben adja vissza az értéket, és továbbra is jól működik a useMemo horog.

// 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

teljesítmény

useMemo egy kicsit olyan, mint a useCallback horog, de a különbség az useMemo egy függvényből memorizált értéket tárolhat, ahol useCallback magát a memorizált függvényt tárolja.

useCallback

A useCallback hook egy másik érdekes, és az utolsó rész egyfajta spoiler figyelmeztetés volt, hogy mit csinál.

Ahogy az imént láttuk, useCallback úgy működik, mint a useMemo akasztó, hogy mindketten memoizációt használnak, hogy gyorsítótárazzon valamit későbbi használatra. Míg useMemo egy függvény számítását gyorsítótárban tárolt értékként tárolja, useCallback függvényt tárol és ad vissza.

Használati esetek

Mint useMemo, useCallback Ez egy jó teljesítményoptimalizálás, mivel újrarenderelés nélkül tárolja és visszaadja a megjegyzett visszahívást és annak bármely függőségét.

Szintaxis

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

Példa

{ 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;

teljesítmény

Záró gondolatok

tessék! Most néztünk meg öt szuper praktikus React horgot, amelyeket szerintem gyakran figyelmen kívül hagynak. Mint sok ilyen körözésnél, mi is csak megkarcoljuk ezeknek a horgoknak a felszínét. Mindegyiknek megvannak a saját árnyalatai és megfontolások, amelyeket figyelembe kell venni a használatuk során. De remélhetőleg van egy jó, magas szintű elképzelése arról, hogy mik ezek, és mikor illenek jobban, mint egy másik horog, amelyhez gyakrabban nyúlhat.

Ezek teljes megértésének legjobb módja a gyakorlat. Ezért azt javaslom, hogy a jobb megértés érdekében gyakorolja ezeket a horgokat az alkalmazásban. Ehhez a következő források megtekintésével sokkal mélyebbre ismerkedhet: