Sobes.tech
Middle

Su kokiais hooks dirbote funkciniuose komponentuose? Koks buvo neįpramiausias?

sobes.tech AI

Atsakymas iš AI

React funkciniuose komponentuose dažnai naudojami šie hook'ai:

  • useState — būsenos valdymui.
  • useEffect — šalutinėms pasekmėms (užklausoms, prenumeratoms).
  • useContext — konteksto pasiekiamumui.
  • useRef — kintamųjų saugojimui ir DOM prieigai.
  • useMemo ir useCallback — našumo optimizavimui.

Įdomiausias hook'as, su kuriuo teko dirbti, galbūt yra useImperativeHandle. Jis leidžia konfigūruoti instanciją, kuri bus prieinama tėvų komponentui per ref. Tai naudinga, kai reikia kontroliuoti, kurios metodai ar savybės yra prieinamos išorėje, ypač dirbant su DOM elementų apvalklais ar trečiųjų šalių bibliotekomis.

useImperativeHandle pavyzdys:

import React, { useImperativeHandle, forwardRef, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Tėvinis komponentas gali iškviesti focus metodą:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();