ReactのuseOnGlobalEventフック

ReactReactBeginner
今すぐ練習

This tutorial is from open-source community. Access the source code

💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください

はじめに

この実験では、React の useOnGlobalEvent フックを調べます。このフックを使うと、グローバル オブジェクトで発生するイベント、たとえば window オブジェクトの mousemove イベントをリッスンできます。このフックを使うことで、特定のグローバル イベントが発生するたびにコールバック関数を簡単に実行できます。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") subgraph Lab Skills react/jsx -.-> lab-38399{{"ReactのuseOnGlobalEventフック"}} react/hooks -.-> lab-38399{{"ReactのuseOnGlobalEventフック"}} end

React useOnGlobalEvent フック

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

この関数は、グローバル オブジェクトでイベントが発生するたびにコールバック関数を実行します。この関数を実装するには:

  1. useRef() フックを使って、リスナーの参照を保持する変数 listener を作成します。
  2. typeoptions 引数の前回の値を保持する変数を useRef() フックを使って作成します。
  3. useEffect() フックと EventTarget.addEventListener() を使って、Window グローバル オブジェクトで指定されたイベント type をリッスンします。
  4. EventTarget.removeEventListener() を使って、既存のリスナーを削除し、コンポーネントがアンマウントされたときにクリーンアップします。
const useOnGlobalEvent = (type, callback, options) => {
  const listener = React.useRef(null);
  const previousProps = React.useRef({ type, options });

  React.useEffect(() => {
    const { type: previousType, options: previousOptions } =
      previousProps.current;

    if (listener.current) {
      window.removeEventListener(
        previousType,
        listener.current,
        previousOptions
      );
    }

    listener.current = callback;
    window.addEventListener(type, callback, options);
    previousProps.current = { type, options };

    return () => {
      window.removeEventListener(type, listener.current, options);
    };
  }, [callback, type, options]);
};

この関数の使い方の例を以下に示します:

const App = () => {
  useOnGlobalEvent("mousemove", (e) => {
    console.log(`(${e.x}, ${e.y})`);
  });

  return <p>Move your mouse around</p>;
};

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

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

まとめ

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