React useEvent: Stabilisering av hendelseshåndterere for robuste applikasjoner

Bruke `useEvent` i praksis

La oss se på de tidligere eksemplene og bruke `useEvent` for å løse problemene.

Fikse utdaterte lukkinger

            
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å er `handleClick` en stabil funksjon, men når den kalles, får den tilgang til den mest nylige verdien av `count` via referansen. Dette forhindrer problemet med utdatert lukking.

Forhindre unødvendige re-rendringer

            
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
              
            
          

Fordi `handleClick` nå er en stabil funksjonsreferanse, vil `ChildComponent` kun re-rendres når dens props faktisk endres, noe som forbedrer ytelsen.

Alternative implementeringer og hensyn

`useEvent` med `useLayoutEffect`

I noen tilfeller kan det hende du må bruke `useLayoutEffect` i stedet for `useEffect` innenfor `useEvent`-implementeringen. `useLayoutEffect` kjører synkront etter alle DOM-mutasjoner, men før nettleseren har en sjanse til å male. Dette kan være viktig hvis hendelseshåndtereren trenger å lese eller modifisere DOM umiddelbart etter at hendelsen utløses. Denne justeringen sikrer at du fanger opp den mest oppdaterte DOM-tilstanden innenfor hendelseshåndtereren, og forhindrer potensielle inkonsekvenser mellom det komponenten viser og dataene den bruker. Valget mellom `useEffect` og `useLayoutEffect` avhenger av de spesifikke kravene til hendelseshåndtereren din og tidspunktet for DOM-oppdateringer.

            
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
              
            
          

Forbehold og potensielle problemer

• Kompleksitet: Selv om `useEvent` løser spesifikke problemer, legger det et lag med kompleksitet til koden din. Det er viktig å forstå de underliggende konseptene for å bruke det effektivt.
• Overbruk: Ikke bruk `useEvent` vilkårlig. Bruk det kun når du opplever utdaterte lukkinger eller unødvendige re-rendringer relatert til hendelseshåndterere.
• Testing: Testing av komponenter som bruker `useEvent` krever nøye oppmerksomhet for å sikre at den korrekte håndtererlogikken blir utført. Du må kanskje mocke `useEvent`-hooken eller få direkte tilgang til `handlerRef` i testene dine.

Globale perspektiver på hendelseshåndtering

Når du bygger applikasjoner for et globalt publikum, er det avgjørende å vurdere kulturelle forskjeller og tilgjengelighetskrav i hendelseshåndteringen:

• Tastaturnavigasjon: Sørg for at alle interaktive elementer er tilgjengelige via tastaturnavigasjon. Brukere i forskjellige regioner kan stole på tastaturnavigasjon på grunn av funksjonshemminger eller personlige preferanser.
• Berøringshendelser: Støtt berøringshendelser for brukere på mobile enheter. Vurder regioner der mobil internettilgang er mer utbredt enn desktop-tilgang.
• Innputtmetoder: Vær oppmerksom på forskjellige innputtmetoder som brukes rundt om i verden, for eksempel kinesiske, japanske og koreanske innputtmetoder. Test applikasjonen din med disse innputtmetodene for å sikre at hendelser håndteres korrekt.
• Tilgjengelighet: Følg alltid beste praksis for tilgjengelighet, og sørg for at hendelseshåndtererne dine er kompatible med skjermlesere og annen hjelpeteknologi. Dette er spesielt avgjørende for inkluderende brukeropplevelser på tvers av ulike kulturelle bakgrunner.
• Tidssoner og dato/klokkeslettformater: Når du arbeider med hendelser som involverer datoer og klokkeslett (f.eks. planleggingsverktøy, avtalekalendere), vær oppmerksom på tidssoner og dato/klokkeslettformater som brukes i forskjellige regioner. Gi brukere muligheter til å tilpasse disse innstillingene basert på deres plassering.

Alternativer til `useEvent`

Mens `useEvent` er en kraftig teknikk, finnes det alternative tilnærminger til å administrere hendelseshåndterere i React:

• Løfte tilstand: Noen ganger er den beste løsningen å løfte tilstanden som hendelseshåndtereren avhenger av, til en komponent på høyere nivå. Dette kan forenkle hendelseshåndtereren og eliminere behovet for `useEvent`.
• `useReducer`:** Hvis komponentens tilstandslogikk er kompleks, kan `useReducer` hjelpe deg med å administrere tilstandsoppdateringer mer forutsigbart og redusere sannsynligheten for utdaterte lukkinger.
• Klassekomponenter: Selv om de er mindre vanlige i moderne React, gir klassekomponenter en naturlig måte å binde hendelseshåndterere til komponentinstansen, og unngår lukkingproblemet.
• Inline-funksjoner med avhengigheter: Bruk inline-funksjonskall med avhengigheter for å sikre at ferske verdier sendes til hendelseshåndterere. `onClick={() => handleClick(arg1, arg2)}` med `arg1` og `arg2` oppdatert via tilstand vil opprette nye anonyme funksjoner ved hver rendring, og dermed sikre oppdaterte lukningsverdier, men vil forårsake unødvendige re-rendringer, akkurat det `useEvent` løser.