はじめに
この実験では、React の useOnGlobalEvent
フックを調べます。このフックを使うと、グローバル オブジェクトで発生するイベント、たとえば window
オブジェクトの mousemove
イベントをリッスンできます。このフックを使うことで、特定のグローバル イベントが発生するたびにコールバック関数を簡単に実行できます。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、React の useOnGlobalEvent
フックを調べます。このフックを使うと、グローバル オブジェクトで発生するイベント、たとえば window
オブジェクトの mousemove
イベントをリッスンできます。このフックを使うことで、特定のグローバル イベントが発生するたびにコールバック関数を簡単に実行できます。
VM には既に
index.html
とscript.js
が用意されています。一般的には、script.js
とstyle.css
にのみコードを追加すればよいです。
この関数は、グローバル オブジェクトでイベントが発生するたびにコールバック関数を実行します。この関数を実装するには:
useRef()
フックを使って、リスナーの参照を保持する変数 listener
を作成します。type
と options
引数の前回の値を保持する変数を useRef()
フックを使って作成します。useEffect()
フックと EventTarget.addEventListener()
を使って、Window
グローバル オブジェクトで指定されたイベント type
をリッスンします。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 でさらに多くの実験を行って練習してください。