29. Jaki jest cel stosowania hooka `useImperativeHandle` w React?

Jaki jest cel stosowania hooka useImperativeHandle w React?

Hook useImperativeHandle w React służy do dostosowywania wartości instancji, która jest udostępniana podczas używania ref w komponentach funkcyjnych. Pozwala kontrolować, co jest udostępniane komponentowi nadrzędnemu, gdy ref jest przekazywany do komponentu dziecka.

Jak to działa

Hook useImperativeHandle przyjmuje trzy argumenty:

1. ref - Obiekt ref React, który jest przekazywany z komponentu nadrzędnego.
2. createHandle - Funkcja zwracająca obiekt, który staje się wartością ref.
3. deps - Opcjonalna tablica zależności, aby kontrolować, kiedy uchwyt powinien być przeliczany.

Oto prosty przykład ilustrujący jego zastosowanie:

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

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

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

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

function ParentComponent() {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
    console.log(inputRef.current.getValue());
  };

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={handleClick}>Focus & Log Value</button>
    </div>
  );
}

Kiedy używać useImperativeHandle

• Enkapsulacja: Używaj tego hooka, aby enkapsulować wewnętrzny stan i zachowanie komponentu, udostępniając jedynie niezbędne metody komponentowi nadrzędnemu.
• Interoperacyjność: Jest szczególnie przydatny, gdy musisz zintegrować kod nie-React lub biblioteki zewnętrzne, które oczekują określonego interfejsu.

Kluczowe punkty

• Zawsze używaj useImperativeHandle z forwardRef, aby prawidłowo przekazywać refy.
• Tego hooka powinno się używać oszczędnie; preferuj używanie stanu i propsów do komunikacji między komponentami, chyba że konieczny jest kod imperatywny.

Rozumiejąc i używając hooka useImperativeHandle, możesz efektywnie zarządzać interfejsami komponentów i utrzymywać czysty podział obowiązków w aplikacjach React.