React の強力な useSet フックをマスターする

はじめに

この実験では、useSetフックを使用して React コンポーネント内で状態付きのSetオブジェクトを作成する方法を探ります。このフックは、コンポーネント内の値のセットを操作するための簡単で効率的な方法を提供し、アプリケーションの特定のニーズに合わせてカスタマイズすることができます。この実験が終了するとき、React プロジェクトでこの強力なフックを実装して使用する方法をより深く理解するようになります。

React useSet フック

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

この関数は、状態付きのSetオブジェクトとその状態を操作できる関数のセットを作成します。

この関数を使用するには：

useState()とSetコンストラクタを呼び出して、initialValueから新しいSetを作成します。
useMemo()を使用して、set状態変数を操作できる非変更関数のセットを作成します。毎回状態セッターを使用して新しいSetを作成します。
set状態変数と作成したactionsの両方を返します。

この関数の例としての実装を以下に示します：

const useSet = (initialValue) => {
  const [set, setSet] = React.useState(new Set(initialValue));

  const actions = React.useMemo(
    () => ({
      add: (item) => setSet((prevSet) => new Set([...prevSet, item])),
      remove: (item) =>
        setSet((prevSet) => new Set([...prevSet].filter((i) => i !== item))),
      clear: () => setSet(new Set())
    }),
    [setSet]
  );

  return [set, actions];
};

この関数の使用例を以下に示します：

const MyApp = () => {
  const [set, { add, remove, clear }] = useSet(new Set(["apples"]));

  return (
    <div>
      <button => add(String(Date.now()))}>Add</button>
      <button => clear()}>Reset</button>
      <button => remove("apples")} disabled={!set.has("apples")}>
        Remove apples
      </button>
      <pre>{JSON.stringify([...set], null, 2)}</pre>
    </div>
  );
};

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

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

まとめ

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

React の useSet フック

はじめに

React useSet フック

まとめ