Reactのフックとは何ですか-フロントエンドQ&A-php.cn

Reactのフックとは何ですか

WBOY

リリース： 2022-05-18 20:40:37

オリジナル

4363 人が閲覧しました

react では、フックは React16.8 の新機能であり、クラスを記述せずに状態やその他の React 機能を使用するために使用されます。関数コンポーネントを使用して React の一部の機能を使用できます。また、関数コンポーネントはには状態があり、コンポーネント間の共通の状態操作はカスタムフックを通じて実装できます。

Reactのフックとは何ですか

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react のフックとは

React フックは、react に導入された新機能で、react 関数コンポーネントにも状態を持つことができます。

カスタムを通じてコンポーネントに実装できます。フック間の共通の状態操作;

意味: フックは React 16.8 の新機能です。これにより、クラスを作成せずに状態やその他の React 機能を使用できるようになります。簡単に言うと、関数コンポーネントを使用して、react の一部の機能を使用できます。

解決すべき問題:

コンポーネント間で状態ロジックを再利用するという難しい問題を解決します。フックで解決できるのは、以前のコンポーネント構造を変更せずに状態ロジックを再利用することです。フックを使用しないと、高度なコンポーネント、プロバイダー、顧客などの高度な使用法を使用する必要があります。この方法は初心者に適しています。あまりフレンドリーではありません

複雑なコンポーネントの場合、ロジックを分割できます。たとえば、ライフサイクル機能を使用する場合、異なるライフサイクルを異なるタイミングで実行する必要があるため、今回は、複雑なコンポーネントの場合、一部のライフサイクル関数に多くのロジックがあり、可読性が大幅に低下します。フックを使用すると、コンポーネントのロジックを分割したり、同じロジックを統合したりできるため、可読性が大幅に向上し、メンテナンスが容易になります。現在のコンポーネントにおけるこのキーワードの意味ですが、フックでは必要ありません。クラスコンポーネントを使わずにreactの特性を反映する問題を解決できます

注意点として、フックコンポーネントとクラスコンポーネントは同時に使用できないので、実際に使用する際には注意が必要です。エラーが発生しました。

react-hook の使用法

react は、スタックフックとエフェクトフックを作成するための 2 つのフック関数 useState と useEffect を提供します

stateフック

関数コンポーネントで useState を使用すると、コンポーネントの状態を使用できます;

useState の入力パラメータは初期状態であり、出力パラメータは現在の状態と関数です状態を更新します。

function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ログイン後にコピー

useState は、最初の実行時に状態を作成し、この状態は後続の実行で使用されます。

エフェクトフック

useEffect を使用してコンポーネントロジックに副作用を追加します;

いわゆる副作用についての私の個人的な理解は、DOM 操作、ネットワークリクエストなど、反応の範囲外の世界との対話です。、など (正直に言うと、副作用が何であるかを完全には理解していません);

useEffect には 2 つの入力パラメータがあります。最初のパラメータは副作用関数で、2 番目のパラメータは使用される配列です。副作用を実行するかどうかを決定します;

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type EffectCallback = () => (void | (() => void | undefined));
type DependencyList = ReadonlyArray<any>;

ログイン後にコピー

副作用には実行プロセスとオプションのクリーンアッププロセスがあります。副作用関数は実行プロセスを定義し、その戻り値関数はクリーンアッププロセスを定義します。

コンポーネント関数で定義された副作用は、レンダリング結果の一部のようなものです。副作用は各レンダリング後に実行されます。レンダリング前に、コンポーネントが破棄される前に前の副作用をクリアします。これにより、副作用が可能になります。各プロパティと状態を読み取ります;

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

ログイン後にコピー

レンダリングするたびに副作用を実行したくない場合は、配列内の要素が変更されない場合、配列を useEffect. の 2 番目のパラメーターに渡すことができます。、副作用はトリガーされません;

カスタムフック

カスタムフックは、実際には useState と useEffect を内部的に使用する通常のフックです。関数であり、関数名で始まります。 with use;

カスタムフックを使用してコンポーネントロジックを再利用可能な関数に抽出します;

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;
}

ログイン後にコピー

TODO

レンダリングプロップ、コンポーネントとエフェクトのパフォーマンスの最適化に関する高レベルのメモ

推奨される学習: 「

react ビデオチュートリアル

」

以上がReactのフックとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。