カスタム反応フック

最後の記事では、フックを実装しました.今日は、もっと複雑なものを作ります.useCounter . その名前が示すように、このフックは、私たちがユーティリティ機能(例えば3)のおかげで、カウンター状態を管理するのを助けますincrement and decrement . レディ?右にジャンプしましょう!🚀

動機
いつものように、このフックを実装する理由を見てみましょう.あなたが電子商取引ウェブサイトを構築していると想像してください.顧客が商品を購入したがっているときはいつでも、彼は彼が望む量を選ぶことができなければなりません.これはユーザインタフェースがどのように見えるか(スタイルを忘れましょう)

とソースコードCart コンポーネントは次のようになります.

const Cart = () => {
  const [quantity, setQuantity] = useState(0);

  return (
    <div className="Cart">
      <h1>My Cart</h1>
      <Item
        label="My awesome item"
        quantity={quantity}
        onIncrement={() => setQuantity((q) => q + 1)}
        onDecrement={() => setQuantity((q) => q - 1)}
        onReset={() => setQuantity(0)}
      />
    </div>
  );
}

ℹ️ Of course, all the examples and code snippets will be extremely simplified in order to only focus on what matters the most in this article.

上記のコンポーネントは、カスタムを導入することによって簡素化できますuseCounter フック

function Cart() {
  const quantity = useCounter(0);

  return (
    <div className="Cart">
      <h1>My Cart</h1>
      <Item
        label="My awesome item"
        quantity={quantity.value}
        onIncrement={quantity.increment}
        onDecrement={quantity.decrement}
        onReset={quantity.reset}
      />
    </div>
  );
}

面白いね?このフックを実行しましょう!😎

実装
我々useCounter フックはカウンタ値を保持する状態になります.また、値を更新する方法は3つあります.increment , decrement , and reset . これを念頭に置いて、フックを次のように作成できます.

const useCounter = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const increment = () => setValue(c => c + 1);
  const decrement = () => setValue(c => c - 1);
  const reset = () => setValue(initialValue);

  return { value, increment, decrement, reset };
};

さて、あなたの中にはなぜ3つのエクスポートされたメソッドがuseCallback フック(あらゆるレンダリングで新しい機能を作成するのを防ぎます)、より多くの情報here ). 我々のケースでは、コンポーネントはとても単純ですuseCallback パフォーマンスを改善するために3回は逆の効果を持つ可能性があります.このフックは、あなたの関数がより複雑なコンポーネントで使用されることを知っているときに使用されるべきですonClick イベント.

ℹ️ For more information, don't hesitate to have a look at this article from Dmitri Pavlutin, which goes into details about why, when and how to use the useCallback hook. The same applies for useMemo and useRef (except when used as a reference to an element).

それが言われて、我々の新しいカスタムフックは、現在使用できます!🥳

改善アイデア
さらに進むためには、改善のためのいくつかのアイデアがありますuseCounter フック.あなたが自分で練習することができるように、このアイデアの1つ以上を実装しようとすることを躊躇しないでください.

インクリメント/デクリメント・ステップの追加counter.increment(step) )

min/max値の追加useCounter({ min: 0, max: 10, initial: 0}) )

カウンタ値を手動で設定するcounter.set(value) )

結論
これまで、我々が作成してきたカスタムフックは非常に簡単です.次の記事では、我々のコンポーネントコードを簡素化し、コード重複を避けるために、より複雑なフックの実装を開始します.それは、私を読んでくれてありがとう.この記事をお楽しみください.あなたがした場合、私の他のものを見て躊躇しないでください.また、ご質問やご意見がある場合は、いくつかのコメントを書くこと自由に感じる.🤗
ソースコードはCodeSandbox

サポート・ミー
あなたが私を支持したいならば、あなたは以下のリンクでコーヒーを買うことができます.☕)