W nowoczesnym rozwoju React hook useImperativeHandle jest potężnym sposobem personalizacji wartości komponentu i daje większą kontrolę nad jego wewnętrznymi metodami i właściwościami. W rezultacie bardziej wydajne API komponentów mogą poprawić elastyczność i łatwość utrzymania produktu.   W tym artykule zespół   zagłębia się w najlepsze praktyki efektywnego wykorzystania useImperativeHandle do ulepszania komponentów React. Social Discovery Group  React udostępnia wiele haków (oficjalna dokumentacja opisuje 17 haków w chwili pisania tego tekstu) umożliwiających zarządzanie stanem, efektami i interakcjami między komponentami.  Wśród nich useImperativeHandle to przydatne narzędzie do tworzenia interfejsu programistycznego (API) dla komponentów podrzędnych, które zostało dodane do Reacta od wersji 16.8.0.  useImperativeHandle pozwala dostosować, co zostanie zwrócone przez ref przekazane do komponentu. Działa w tandemie z forwardRef, który umożliwia przekazanie ref do komponentu podrzędnego.   useImperativeHandle(ref, createHandle, [deps]);   ref — referencja przekazana do komponentu.   createHandle — funkcja zwracająca obiekt, który stanie się dostępny poprzez odwołanie.   deps — tablica zależności.  Ten hak umożliwia zewnętrzną kontrolę zachowania komponentu, co może być przydatne w pewnych sytuacjach, takich jak praca z bibliotekami stron trzecich, złożonymi animacjami lub komponentami wymagającymi bezpośredniego dostępu do metod. Należy go jednak używać ostrożnie, ponieważ łamie deklaratywne podejście React.   Podstawowy przykład   https://use-imperative-handle.levkovich.dev/base/ref   Wyobraźmy sobie, że musimy manipulować DOM komponentu podrzędnego. Oto przykład, jak to zrobić za pomocą ref.   import React, { forwardRef, useRef } from 'react'; const CustomInput = forwardRef((props, ref) => { // Use forwardRef to pass the ref to the input element return <input ref={ref} {...props} />; }); export default function App() { const inputRef = useRef(); const handleFocus = () => { inputRef.current.focus(); // Directly controlling the input }; const handleClear = () => { inputRef.current.value = ''; // Directly controlling the input value }; return ( <div> <CustomInput ref={inputRef} /> <button onClick={handleFocus}>Focus</button> <button onClick={handleClear}>Clear</button> </div> ); }   A oto jak można to osiągnąć używając useImperativeHandle.   https://use-imperative-handle.levkovich.dev/base   import React, { useImperativeHandle, forwardRef, useRef } from 'react'; const CustomInput = forwardRef((props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); }, clear: () => { inputRef.current.value = ''; }, })); return <input ref={inputRef} {...props} />; }); export default function App() { const inputRef = useRef(); return ( <div> <CustomInput ref={inputRef} /> <button onClick={inputRef.current.focus}>Focus</button> <button onClick={inputRef.current.clear}>Clear</button> </div> ); }  Jak widać w powyższych przykładach, podczas korzystania z useImperativeHandle komponent podrzędny udostępnia komponentowi nadrzędnemu zestaw metod, które sami definiujemy.   Zalety korzystania z ImperativeHandle w porównaniu z prostym użyciem ref    umożliwia dostarczanie komponentom nadrzędnym wyłącznie wymaganych metod. Izoluje logikę komponentów podrzędnych:    ułatwia integrację komponentów React z bibliotekami wymagającymi bezpośredniego dostępu do DOM, takimi jak Lottie lub Three.js. Ułatwia integrację:   Zaawansowane scenariusze  Używanie useImperativeHandle w zaawansowanych scenariuszach, takich jak przykłady z animacją, pozwala na izolowanie złożonych zachowań wewnątrz komponentu. Dzięki temu komponent nadrzędny staje się prostszy i bardziej czytelny, zwłaszcza podczas pracy z bibliotekami animacji lub dźwięków.   https://use-imperative-handle.levkovich.dev/advanced   import React, { useRef, useState, useImperativeHandle, forwardRef, memo } from "react"; import { Player } from '@lottiefiles/react-lottie-player' import animation from "./animation.json"; const AnimationWithSound = memo( forwardRef((props, ref) => { const [isAnimating, setIsAnimating] = useState(false); const animationRef = useRef(null); const targetDivRef = useRef(null); useImperativeHandle( ref, () => ({ startAnimation: () => { setIsAnimating(true); animationRef.current?.play() updateStyles("start"); }, stopAnimation: () => { animationRef.current?.stop() updateStyles("stop"); }, }), [] ); const updateStyles = (action) => { if (typeof window === 'undefined' || !targetDivRef.current) return; if (action === "start") { if (targetDivRef.current.classList.contains(styles.stop)) { targetDivRef.current.classList.remove(styles.stop); } targetDivRef.current.classList.add(styles.start); } else if (action === "stop") { if (targetDivRef.current.classList.contains(styles.start)) { targetDivRef.current.classList.remove(styles.start); } targetDivRef.current.classList.add(styles.stop); } }; return ( <div> <Player src={animation} loop={isAnimating} autoplay={false} style={{width: 200, height: 200}} ref={animationRef} /> <div ref={targetDivRef} className="target-div"> This div changes styles </div> </div> ); }) ); export default function App() { const animationRef = useRef(); const handleStart = () => { animationRef.current.startAnimation(); }; const handleStop = () => { animationRef.current.stopAnimation(); }; return ( <div> <h1>Lottie Animation with Sound</h1> <AnimationWithSound ref={animationRef} /> <button onClick={handleStart}>Start Animation</button> <button onClick={handleStop}>Stop Animation</button> </div> ); }  W tym przykładzie komponent podrzędny zwraca metody startAnimation i stopAnimation, które hermetyzują w sobie złożoną logikę.   Typowe błędy i pułapki    Nieprawidłowo wypełniona tablica zależności 1.  Błąd nie zawsze jest zauważalny od razu. Na przykład, komponent nadrzędny może często zmieniać właściwości i możesz napotkać sytuację, w której nadal używana jest przestarzała metoda (z nieaktualnymi danymi).   Przykładowy błąd:   https://use-imperative-handle.levkovich.dev/deps-is-not-correct/wrong   const [count, setCount] = useState(0); const increment = useCallback(() => { console.log("Current count in increment:", count); // Shows old value setCount(count + 1); // Are using the old value of count }, [count]); useImperativeHandle( ref, () => ({ increment, // Link to the old function is used }), [] // Array of dependencies do not include increment function );   Właściwe podejście:   https://use-imperative-handle.levkovich.dev/deps-is-not-correct/correct   const [count, setCount] = useState(0); useImperativeHandle( ref, () => ({ increment, }), [increment] // Array of dependencies include increment function );   2. Brakująca tablica zależności   https://use-imperative-handle.levkovich.dev/deps-empty/wrong?embedable=true  Jeśli tablica zależności nie jest podana, React założy, że obiekt w useImperativeHandle powinien być tworzony ponownie przy każdym renderowaniu. Może to powodować znaczne problemy z wydajnością, zwłaszcza jeśli w haku wykonywane są „ciężkie” obliczenia.   Przykładowy błąd:   useImperativeHandle(ref, () => { // There is might be a difficult task console.log("useImperativeHandle calculated again"); return { focus: () => {} } }); // Array of dependencies is missing   Właściwe podejście:   https://use-imperative-handle.levkovich.dev/deps-empty/correct   useImperativeHandle(ref, () => { // There is might be a difficult task console.log("useImperativeHandle calculated again"); return { focus: () => {} } }, []); // Array of dependencies is correct   Modyfikowanie ref wewnątrz useImperativeHandle  Bezpośrednia modyfikacja ref.current zakłóca zachowanie React. Jeśli React próbuje zaktualizować ref, może to prowadzić do konfliktów lub nieoczekiwanych błędów.   Przykładowy błąd:   https://use-imperative-handle.levkovich.dev/ref-modification/wrong   useImperativeHandle(ref, () => { // ref is mutated directly ref.current = { customMethod: () => console.log("Error") }; });   Właściwe podejście:   https://use-imperative-handle.levkovich.dev/ref-modification/correct   useImperativeHandle(ref, () => ({ customMethod: () => console.log("Correct"), }));   Korzystanie z metod przed ich zainicjowaniem  Wywoływanie metod udostępnionych za pośrednictwem useImperativeHandle z useEffect lub obsługi zdarzeń, przy założeniu, że odwołanie jest już dostępne, może prowadzić do błędów — zawsze sprawdzaj current przed wywołaniem jego metod.   Przykładowy błąd:   https://use-imperative-handle.levkovich.dev/before-init/wrong   const increment = useCallback(() => { childRef.current.increment(); }, [])   Właściwe podejście:   https://use-imperative-handle.levkovich.dev/before-init/correct   const increment = useCallback(() => { if (childRef.current?.increment) { childRef.current.increment() } }, [])   Problemy z synchronizacją między animacjami i stanem  Jeśli useImperativeHandle zwraca metody, które synchronicznie zmieniają stan (np. uruchamiając animację i jednocześnie modyfikując style), może to spowodować „lukę” między stanem wizualnym a logiką wewnętrzną. Zapewnij spójność między stanem a zachowaniem wizualnym, na przykład, używając efektów (useEffect).   Przykładowy błąd:   https://use-imperative-handle.levkovich.dev/state-animation-sync/wrong   useImperativeHandle(ref, () => ({ startAnimation: () => { setState("running"); // Animation starts before the state changes lottieRef.current.play(); }, stopAnimation: () => { setState("stopped"); // Animation stops before the state changes lottieRef.current.stop(); }, }));   Właściwe podejście:   https://use-imperative-handle.levkovich.dev/state-animation-sync/correct   useEffect(() => { if (state === "running" && lottieRef.current) { lottieRef.current.play(); } else if (state === "stopped" && lottieRef.current) { lottieRef.current.stop(); } }, [state]); // Triggered when the state changes useImperativeHandle( ref, () => ({ startAnimation: () => { setState("running"); }, stopAnimation: () => { setState("stopped"); }, }), [] );   Wniosek  Użycie useImperativeHandle jest uzasadnione w następujących sytuacjach:    Na przykład w celu zapewnienia metody fokusu lub resetowania dla złożonego komponentu wejściowego. Sterowanie zachowaniem komponentu podrzędnego:    Komponent nadrzędny otrzymuje tylko potrzebne mu metody, a nie cały obiekt ref. Ukrywanie szczegółów implementacji:  Zanim użyjesz useImperativeHandle, zadaj sobie następujące pytania:  Czy zadanie można rozwiązać deklaratywnie, używając stanu, rekwizytów lub kontekstu? Jeśli tak, to jest to preferowane podejście.  W przeciwnym razie, a komponent musi zapewnić interfejs zewnętrzny, należy użyć useImperativeHandle.  Opanowując hook useImperativeHandle, programiści React mogą tworzyć bardziej wydajne i łatwe w utrzymaniu komponenty, selektywnie udostępniając metody. Techniki opracowane przez zespół   mogą pomóc programistom poprawić elastyczność, usprawnić interfejsy API komponentów i zwiększyć ogólną wydajność aplikacji. Social Discovery Group   Autor: Sergey Levkovich, starszy inżynier oprogramowania w Social Discovery Group

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

See how we create Social Life 3.0 👉

Social Discovery Group Earns the Great Place To Work® Certification in the USA!

Swipe Away Loneliness: 2024 Dating Trends Forecast

Ten dźwięk jest produkowany w oryginalnym języku historii!

Opanuj React, projektując efektywne interfejsy API za pomocą hooka useImperativeHandle

About Author

UWAGI

ZAWIEŚĆ TAGI

ARTYKUŁ TEN ZOSTAŁ PREZENTOWANY W

Related Stories

How HackerNoon Feels About AI Generated Content (Hint: 👎🏽)

From Desk to HackerNoon: Your Ultimate Guide on How to Publish a Story

MashRadar Reviewed HackerNoon - Everything You Need to Know

Listen to Tech Brief Podcasts on Your Headphones: Stay Connected to HackerNoon Anywhere, Anytime

How HackerNoon Feels About AI Generated Content (Hint: 👎🏽)

From Desk to HackerNoon: Your Ultimate Guide on How to Publish a Story

MashRadar Reviewed HackerNoon - Everything You Need to Know

Listen to Tech Brief Podcasts on Your Headphones: Stay Connected to HackerNoon Anywhere, Anytime

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps