React の useHash フックをマスターする

はじめに

この実験では、React におけるuseHashフックを使ってブラウザのロケーションハッシュ値を追跡して更新する方法を学びます。このフックは、ハッシュ値に基づいてページの異なるコンポーネントやセクションを表示するシングルページアプリケーションを作成する際に便利です。この実験が終了すると、React プロジェクトでuseHashフックを実装し、Web アプリケーションのユーザー体験を向上させることができます。

React の useHash フック

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

このコードは、ブラウザのロケーションハッシュ値を追跡して更新します。それを使用するには、次の手順に従ってください。

useState()フックを使用して、Locationオブジェクトのhashプロパティを遅延取得します。
useCallback()フックを使用して、'hashchange'イベントが発生したときにhash状態を更新するハンドラを作成します。
useEffect()フックを使用して、マウント時に'hashchange'イベントのリスナーを追加し、アンマウント時にそれをクリーンアップします。
useCallback()フックを使用して、与えられた値でLocationオブジェクトのhashプロパティを更新する関数を作成します。
コンポーネント内で、useHash()を呼び出して現在のhash値を取得し、それを変更するためのupdateHash()関数を取得します。
updateHash()関数を使用してhash値を変更します。
コンポーネント内で現在のhash値をレンダリングします。
ユーザーがhash値を変更できる入力フィールドを作成します。

以下がコードです。

const useHash = () => {
  const [hash, setHash] = React.useState(() => window.location.hash);

  const hashChangeHandler = React.useCallback(() => {
    setHash(window.location.hash);
  }, []);

  React.useEffect(() => {
    window.addEventListener("hashchange", hashChangeHandler);
    return () => {
      window.removeEventListener("hashchange", hashChangeHandler);
    };
  }, []);

  const updateHash = React.useCallback(
    (newHash) => {
      if (newHash !== hash) window.location.hash = newHash;
    },
    [hash]
  );

  return [hash, updateHash];
};

const MyApp = () => {
  const [hash, setHash] = useHash();

  React.useEffect(() => {
    setHash("#list");
  }, []);

  return (
    <>
      <p>Current hash value: {hash}</p>
      <p>Edit hash: </p>
      <input value={hash} => setHash(e.target.value)} />
    </>
  );
};

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

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

まとめ

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