React の useOnWindowResize フック

ReactReactBeginner
今すぐ練習

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

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

はじめに

この実験では、ウィンドウがリサイズされるたびにコールバックを実行する useOnWindowResize と呼ばれるカスタム React Hook を作成する方法を学びます。useRef()useEffect() フックを使用して、Window グローバルオブジェクトの 'resize' イベントをリッスンし、コンポーネントがアンマウントされたときにクリーンアップします。このフックは、さまざまな画面サイズに対応する必要がある応答型の Web アプリケーションを作成する際に役立ちます。


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-38400{{"React の useOnWindowResize フック"}} react/hooks -.-> lab-38400{{"React の useOnWindowResize フック"}} end

React useOnWindowResizeフック

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

このコードは、ウィンドウがリサイズされるたびにコールバック関数を実行します。それを実装するには、次の手順に従ってください。

  1. useRef() フックを使用して listener と呼ばれる変数を作成します。この変数は、リスナーへの参照を格納します。
  2. useEffect() フックと EventTarget.addEventListener() を使用して、Window グローバルオブジェクトの 'resize' イベントをリッスンします。イベントがトリガーされたときに、callback 関数を呼び出します。
  3. コンポーネントがアンマウントされたときに、EventTarget.removeEventListener() を使用して既存のリスナーを削除することでクリーンアップします。

以下がコードです。

const useOnWindowResize = (callback) => {
  const listener = React.useRef(null);

  React.useEffect(() => {
    if (listener.current) {
      window.removeEventListener("resize", listener.current);
    }
    listener.current = callback;
    window.addEventListener("resize", callback);
    return () => {
      window.removeEventListener("resize", callback);
    };
  }, [callback]);
};

const App = () => {
  useOnWindowResize(() =>
    console.log(`Window size: (${window.innerWidth}, ${window.innerHeight})`)
  );
  return <p>Resize the window and check the console.</p>;
};

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

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

まとめ

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