反応カスタムフックの実装:完全ガイド

28186 ワード

webdev react テキストリンク

反応フックは、機能コンポーネントから状態とライフサイクル機能を使用できる機能です.あなたが反応を使用しているならば、あなたはおそらく彼らのビルトインフック(例えばusestate、useeffectとusecontext)を使用しました.しかし、反応はそれらのフックだけを使用するように制限されません.
反応で独自のフックを作成する様々な状況で役に立つことができます.カスタムフックは、コンポーネント間のロジックを共有し、コンポーネントツリーの読みやすさを向上させる優れた方法です.
この記事では、様々なカスタムフックをどのように実装するかを説明します.始めましょう.

カスタムフックの実装

カスタムフックは、使用から始まるJavaScript機能です.カスタムフック名を「使用」で開始することは必須ではありません.しかし、それなしで、反応はHooks rules 自動的に.したがって、その命名規則に固執することは重要です.
UseFriendStatusというカスタムフックを定義する例を次に示します.

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {  
  const \[isOnline, setIsOnline\] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

上の例では、コンポーネントと同じように、カスタムフックの最上位レベルでUSENTとUseEffectフックを無条件に呼び出します.UseFriendStatusフックの目的は、友人のステータスに私たちを購読することです.その結果、それは引数としてfriendidを受け入れて、友人がオンラインであるかどうかを返します.
UseFriendStatusカスタムフックを定義していない場合は、すべてのコンポーネントでこのフックの内部にロジックを書き込む必要があります.したがって、コードを複製する代わりに、このカスタムフックを使用することができます.
さて、このカスタムフックをどのように使うかを見てみましょう.

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
export default FriendStatus;
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}
export default FriendListItem;

上記の例では、useFriendStatusフックが2つの異なる機能コンポーネント、FriendStatusおよびFriendlistitemで使用されることがわかります.同じカスタムフックを同じコンポーネント内で2回使用することもできます.
注意:同じフックを使用する2つのコンポーネント間で状態は共有されません.

フック間の情報の伝達

フックは一種の関数であるので、データを渡すことができます.ユーザーが任意の友人を選択し、その友人がオンラインかどうかを確認する次の例を考えます.

const friendList = \[
  { id: 1, name: 'John' },
  { id: 2, name: 'Michael' },
  { id: 3, name: 'Mary' },
\];

function ChatRecipientPicker() {
  const \[recipientID, setRecipientID\] = useState(1);  
  const isRecipientOnline = useFriendStatus(recipientID);
  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}

ここで、Receisientid状態変数値は、カスタムUseFriendStatusフックに引数として渡されます.ユーザーがピッカーで別の友人を選択すると、受信者を更新するには、USENTフックを使用します.useFriendStatusのフックは、以前に選択した友人からの購読を解除し、新しく選択した友人のステータスを購読する.

カスタムフックの例

カスタムフックの動作方法を理解しているので、カスタムフックを作成するためのいくつかのシナリオを見てみましょう.

USELocalStorage

Responseでローカルストレージを使用するには、カスタムフックを構築できます.フックは、後で使用するためのキー値のペアとしてブラウザでデータを保存することができます.

import { useState } from "react";
export default function App() {
  // Usage
  const \[name, setName\] = useLocalStorage("name", "John");
  return (
    <div>
      <input
        type="text"
        placeholder="Enter your name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}
// Hook
function useLocalStorage(key, initialValue) {
  const \[storedValue, setStoredValue\] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });
const setValue = (value) => {
    try {
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key,JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };
  return \[storedValue, setValue\];
}

使用

これは、効果的に多くのWebアプリケーションで使用することができますシンプルだが役立つカスタムフックです.UseTotgleフックを使用すると、trueまたはfalseの値を取ることができますし、逆に変換します.これは、モデムやメニューを切り替えるために使用することができます.

import { useCallback, useState } from 'react';
export default function App() {
    // Usage
    const \[isModalOpen, setIsModalOpen\] = useToggle();
    return (
        <button onClick={setIsModalOpen}>
          {isModalOpen ? 'Close Modal' : 'Open Modal'} 
        </button>
    );
}
// Hook
const useToggle = (initialState = false) => {
    const \[state, setState\] = useState(initialState);
    const toggle = useCallback(() => setState(state => !state), \[\]);
    return \[state, toggle\]
}

使用例

自分のコードでUseEffectを使用してイベントリスナーをたくさん追加することができます.そのような状況では、カスタムフックにロジックを移動する必要があります.UseeventListenerフックは、最初に要素がAdDeventListenerメソッドをサポートしていることを保証し、イベントリスナーを作成して追加します.EventNameまたは要素が変更された場合、フックは再実行されます.

import { useState, useRef, useEffect, useCallback } from "react";
export default function App() {
  const \[coords, setCoords\] = useState({ x: 0, y: 0 });
  const handler = useCallback(
    ({ clientX, clientY }) => {
      setCoords({ x: clientX, y: clientY });
    },
    \[setCoords\]
  );
  // Usage
  useEventListener('mousemove', handler);
return (
    <h1>
      The mouse position is ({coords.x}, {coords.y})
    </h1>
  );
}
// Hook
function useEventListener(eventName, handler, element = window) {
  const savedHandler = useRef();
  useEffect(() => {
    savedHandler.current = handler;
  }, \[handler\]);
  useEffect(
    () => {
      const isSupported = element && element.addEventListener;
      if (!isSupported) return;
      const eventListener = event => savedHandler.current(event);
      element.addEventListener(eventName, eventListener);
      return () => {
        element.removeEventListener(eventName, eventListener);
      };
    },
    \[eventName, element\]
  );
}

同様に、フォームの処理、アニメーション、タイマー、および他の多くのような様々なユースケースを処理するカスタムフックを書くことができます.

カスタムフックの利点

反応フックの主な利点は、ステートフル論理の再利用性です.加えて、カスタムフックは、コンポーネント階層を変更することなく簡単に他のコンポーネントと共有できます.また、我々はフックを使用するとき、このキーワードについて心配する必要はありません.
ホークスと比較して、カスタムフックアプローチは、クリーナーロジックとデータとコンポーネント間の関係のより良い理解を提供します.その結果、読みやすくなり、コードの数が少なくなります.
我々は、カスタムのフックの別の単位テストを書くことができます、テストを容易に.また、複数のカスタムフックを使用してコンポーネントをテストするのも簡単ですReact Testing Library .

結論

カスタムフックは、以前に反応コンポーネントで利用できない論理を共有する際に、特別な柔軟性を可能にします.私はこのガイドでは、独自の反応フックを作成するのより良い理解を与えている願っています.
お読みありがとうございます.
The Syncfusion React JS スイートは、単一のパッケージで65高性能、軽量、モジュラー、および応答UIコンポーネントを提供しています.このライブラリは、あなたが完全なアプリケーションを構築するために必要な唯一のスイートです.
何か質問やコメントがあれば、私たちを介して私達に連絡することができますsupport forums , support portal , or feedback portal . 我々は常にあなたを支援して満足している!