React の useHover フック

はじめに

この実験では、React で useHover と呼ばれるカスタムフックの実装を検討します。このフックは、ラップされたコンポーネントにマウスオーバーするイベントを処理し、それに応じて状態を更新します。この実験が終了するとき、React でカスタムフックを作成して使用してコンポーネントの機能を強化する方法をより深く理解するようになります。

React useHover フック

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

このコードは、ラップされたコンポーネントにマウスオーバーするイベントを処理するカスタムフックを作成します。

このフックを使用するには：

• useState()を使用して、マウスオーバー状態を保持する変数を作成します。
• useCallback()を使用して、状態を更新する 2 つのハンドラ関数をメモ化します。
• useCallback()を使用して、コールバックリフを作成し、'mouseover'と'mouseout'イベントのリスナーを作成または更新します。
• useRef()を使用して、最後にcallbackRefに渡されたノードを追跡し、そのリスナーを削除できるようにします。

const useHover = () => {
  const [isHovering, setIsHovering] = React.useState(false);
  const handleMouseOver = React.useCallback(() => setIsHovering(true), []);
  const handleMouseOut = React.useCallback(() => setIsHovering(false), []);
  const nodeRef = React.useRef();
  const callbackRef = React.useCallback(
    (node) => {
      if (nodeRef.current) {
        nodeRef.current.removeEventListener("mouseover", handleMouseOver);
        nodeRef.current.removeEventListener("mouseout", handleMouseOut);
      }
      nodeRef.current = node;
      if (nodeRef.current) {
        nodeRef.current.addEventListener("mouseover", handleMouseOver);
        nodeRef.current.addEventListener("mouseout", handleMouseOut);
      }
    },
    [handleMouseOver, handleMouseOut]
  );

  return [callbackRef, isHovering];
};

これは、このフックの使用例です：

const MyApp = () => {
  const [hoverRef, isHovering] = useHover();
  return <div ref={hoverRef}>{isHovering ? "Hovering" : "Not hovering"}</div>;
};

ReactDOM.createRoot(document.getElementById("root")).render(<MyApp />);

右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新して Web ページをプレビューできます。

まとめ

おめでとうございます！あなたは React useHover フックの実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を行って練習してください。