React useEvent: Sündmustekäsitlejate stabiliseerimine robustsete rakenduste jaoks

`useEvent` kasutamine praktikas

Vaatame uuesti eelmisi näiteid ja rakendame `useEvent` probleemide lahendamiseks.

Vananenud sulundite parandamine

            
import React, { useState, useEffect, useCallback } from 'react';

function useEvent(handler) {
    const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

function MyComponent() {
  const [count, setCount] = useState(0);
  const [alertCount, setAlertCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  const handleClick = useEvent(() => {
    setAlertCount(count);
    alert(`Count is: ${count}`);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Show Count</button>
      <p>Alert Count: {alertCount}</p>
    </div>
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Nüüd on `handleClick` stabiilne funktsioon, kuid selle väljakutsumisel pääseb see ref-i kaudu ligi `count` kõige värskemale väärtusele. See väldib vananenud sulundi probleemi.

Tarbetute uuesti renderdamiste vältimine

            
import React, { useState, memo, useCallback } from 'react';

function useEvent(handler) {
  const handlerRef = React.useRef(handler);

    React.useLayoutEffect(() => {
        handlerRef.current = handler;
    }, [handler]);

    return React.useCallback((...args) => {
        // @ts-expect-error because arguments might be incorrect
        return handlerRef.current(...args);
    }, []);
}

const ChildComponent = memo(({ onClick }) => {
  console.log('ChildComponent re-rendered');
  return <button onClick={onClick}>Click Me</button>;
});

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

  const handleClick = useEvent(() => {
    setCount(count + 1);
  });

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

export default ParentComponent;

            

              
                Copy
              
            
          

Kuna `handleClick` on nüüd stabiilne funktsiooni viide, renderdatakse `ChildComponent` uuesti ainult siis, kui selle propid *tegelikult* muutuvad, parandades seeläbi jõudlust.

Alternatiivsed implementatsioonid ja kaalutlused

`useEvent` koos `useLayoutEffect`-iga

Mõnel juhul võib teil olla vaja kasutada `useEvent` implementatsioonis `useEffect` asemel `useLayoutEffect`. `useLayoutEffect` käivitub sünkroonselt pärast kõiki DOM-i mutatsioone, kuid enne kui brauseril on võimalus renderdada. See võib olla oluline, kui sündmustekäsitleja peab DOM-i lugema või muutma kohe pärast sündmuse käivitamist. See kohandus tagab, et haarate oma sündmustekäsitlejas kõige ajakohasema DOM-i oleku, vältides võimalikke vastuolusid selle vahel, mida teie komponent kuvab ja milliseid andmeid see kasutab. Valik `useEffect` ja `useLayoutEffect` vahel sõltub teie sündmustekäsitleja konkreetsetest nõuetest ja DOM-i värskenduste ajastamisest.

            
import { useRef, useCallback, useLayoutEffect } from 'react';

function useEvent(handler) {
  const handlerRef = useRef(handler);

  useLayoutEffect(() => {
    handlerRef.current = handler;
  }, [handler]);

  return useCallback((...args) => {
    handlerRef.current(...args);
  }, []);
}

            

              
                Copy
              
            
          

Hoiatused ja võimalikud probleemid

• Keerukus: Kuigi `useEvent` lahendab spetsiifilisi probleeme, lisab see teie koodile keerukuse kihi. Selle tõhusaks kasutamiseks on oluline mõista aluseks olevaid kontseptsioone.
• Ülekasutamine: Ärge kasutage `useEvent` valimatult. Rakendage seda ainult siis, kui teil tekivad sündmustekäsitlejatega seotud vananenud sulundid või tarbetud uuesti renderdamised.
• Testimine: Komponentide testimine, mis kasutavad `useEvent`-i, nõuab hoolikat tähelepanu, et tagada õige käsitleja loogika täitmine. Võimalik, et peate oma testides `useEvent` haaki jäljendama või otse `handlerRef`-ile juurde pääsema.

Globaalsed perspektiivid sündmuste käsitlemisel

Globaalsele publikule rakenduste loomisel on oluline arvestada kultuuriliste erinevuste ja ligipääsetavuse nõuetega sündmuste käsitlemisel:

• Klaviatuuriga navigeerimine: Veenduge, et kõik interaktiivsed elemendid oleksid klaviatuuriga navigeerimise kaudu ligipääsetavad. Erinevate piirkondade kasutajad võivad puude või isiklike eelistuste tõttu tugineda klaviatuuriga navigeerimisele.
• Puutesündmused: Toetage puutesündmusi mobiilseadmete kasutajatele. Arvestage piirkondadega, kus mobiilne internetiühendus on levinum kui lauaarvutiühendus.
• Sisestusmeetodid: Olge teadlik erinevatest sisestusmeetoditest, mida kasutatakse kogu maailmas, näiteks hiina, jaapani ja korea sisestusmeetodid. Testige oma rakendust nende sisestusmeetoditega, et tagada sündmuste õige käsitlemine.
• Ligipääsetavus: Järgige alati ligipääsetavuse parimaid tavasid, tagades, et teie sündmustekäsitlejad on ühilduvad ekraanilugejate ja muude abitehnoloogiatega. See on eriti oluline kaasavate kasutajakogemuste loomiseks erinevate kultuuritaustade puhul.
• Ajavööndid ja kuupäeva/kellaaja vormingud: Kui tegelete sündmustega, mis hõlmavad kuupäevi ja kellaaegu (nt ajaplaneerimise tööriistad, kohtumiste kalendrid), olge teadlik erinevates piirkondades kasutatavatest ajavöönditest ja kuupäeva/kellaaja vormingutest. Pakkuge kasutajatele võimalusi nende seadete kohandamiseks vastavalt nende asukohale.

Alternatiivid `useEvent`-ile

Kuigi `useEvent` on võimas tehnika, on Reactis sündmustekäsitlejate haldamiseks ka alternatiivseid lähenemisviise:

• Oleku tõstmine: Mõnikord on parim lahendus tõsta olek, millest sündmustekäsitleja sõltub, kõrgema taseme komponendile. See võib sündmustekäsitlejat lihtsustada ja kaotada vajaduse `useEvent`-i järele.
• `useReducer`:** Kui teie komponendi olekuloogika on keeruline, aitab `useReducer` hallata olekuvärskendusi prognoositavamalt ja vähendada vananenud sulundite tõenäosust.
• Klassikomponendid: Kuigi tänapäevases Reactis on need vähem levinud, pakuvad klassikomponendid loomulikku viisi sündmustekäsitlejate sidumiseks komponendi eksemplariga, vältides sulundi probleemi.
• Sisesed funktsioonid sõltuvustega: Kasutage siseseid funktsioonikutseid koos sõltuvustega, et tagada värskete väärtuste edastamine sündmustekäsitlejatele. `onClick={() => handleClick(arg1, arg2)}`, kus `arg1` ja `arg2` uuendatakse oleku kaudu, loob igal renderdamisel uue anonüümse funktsiooni, tagades seega uuendatud sulundi väärtused, kuid põhjustab tarbetuid uuesti renderdamisi, mida `useEvent` just lahendab.