When to use “useImperativeHandle” and “forwardRefs” in React 18

from Sameer Kumar

Beginner

/

React / Next

本文將介紹 useImperativeHandle 這個 hook，它可以讓我們攔截父元件傳遞的 ref，並回傳一組新的方法給該 ref。這個 hook 通常會搭配 forwardRef 一起使用，讓我們在自定義元件中取得 DOM reference，並且可以在父元件中使用子元件的函式。

信息

💡 Learn more details about useImperativeHandle in Learn useImperativeHandle In 10 Minutes.

When to use React.forwardRef

當我們想要在自定義元件中取得 DOM reference 時，我們會使用 forwardRef 來包裝該元件。在下面的範例中，我們將 <NinjaButton> 包裝在 forwardRef 中，並將 ref 指定給內部的 <button>。這樣一來，我們在使用 <NinjaButton> 時，就可以取得該元件內部的 <button> 的 reference。

即時編輯器

const NinjaButton = React.forwardRef((props, ref) => ( <button ref={ref}>{props.children}</button> )); const App = () => { const btnRef = useRef(); useEffect(() => { btnRef.current.disabled = true; }, []); return <NinjaButton ref={btnRef}>Ninja</NinjaButton>; }; render(<App />);

const NinjaButton = React.forwardRef((props, ref) => (
  <button ref={ref}>{props.children}</button>
));

const App = () => {
  const btnRef = useRef();

  useEffect(() => {
    btnRef.current.disabled = true;
  }, []);

  return <NinjaButton ref={btnRef}>Ninja</NinjaButton>;
};

render(<App />);

結果

Loading...

When to use useImperativeHandle

我們可以在自定義元件中使用 useImperativeHandle 來攔截父元件傳遞的 ref，並回傳一組新的方法給該 ref。在下面的範例中，btnRef 從 NinjaButton 中的 useImperativeHandle 中接收到一組新的方法 (changeStyle)。這樣一來，我們就可以在父元件 (App) 中使用子元件 (NinjaButton) 的函式。

即時編輯器

const NinjaButton = React.forwardRef((props, ref) => { const localRef = useRef(); useImperativeHandle(ref, () => ({ changeStyle: ({ textColor, backgroundColor }) => { localRef.current.style.padding = "5px 10px"; localRef.current.style.color = textColor; localRef.current.style.background = backgroundColor; }, })); return <button ref={localRef}>{props.children}</button>; }); const App = () => { const btnRef = useRef(); useEffect(() => { btnRef.current.changeStyle({ textColor: "white", backgroundColor: "black", }); }, []); return <NinjaButton ref={btnRef}>Ninja</NinjaButton>; }; render(<App />);

const NinjaButton = React.forwardRef((props, ref) => {
  const localRef = useRef();

  useImperativeHandle(ref, () => ({
    changeStyle: ({ textColor, backgroundColor }) => {
      localRef.current.style.padding = "5px 10px";
      localRef.current.style.color = textColor;
      localRef.current.style.background = backgroundColor;
    },
  }));
  return <button ref={localRef}>{props.children}</button>;
});

const App = () => {
  const btnRef = useRef();

  useEffect(() => {
    btnRef.current.changeStyle({
      textColor: "white",
      backgroundColor: "black",
    });
  }, []);

  return <NinjaButton ref={btnRef}>Ninja</NinjaButton>;
};

render(<App />);

結果

Loading...

Summary

forwardRef 是一個高階元件，它可以讓我們在自定義元件中取得 DOM reference。useImperativeHandle 是一個 hook，它可以讓我們攔截父元件傳遞的 ref，並回傳一組新的方法給該 ref。這兩個元件可以搭配使用，讓我們在自定義元件中取得 DOM reference，並且可以在父元件中使用子元件的函式。