React フックの基礎

Susan Sarandon
リリース: 2024-09-25 14:22:01
オリジナル
691 人が閲覧しました

React Hooks Essentials

コンセプトのハイライト:

  1. フックとは何ですか?
  2. フックを使用する理由
  3. useState
  4. useEffect
  5. useReducer
  6. useRef
  7. カスタムフック
  8. ディスパッチスを切り替えます
  9. UseHooks.com とは何ですか?

1. フックとは何か、そしてその理由

React の フック は、クラス コンポーネントに変換することなく、関数コンポーネントで状態やその他の React 機能を使用できるようにする特別な関数です。 React 16.8 で導入されたフックにより、機能コンポーネント内で、コンポーネント間のロジックの再利用、状態管理の処理、データのフェッチやサブスクリプションなどの副作用の管理が容易になります。

2. フックを使用する理由

  • よりクリーンなコード: フックを使用すると、機能コンポーネントで状態と副作用を直接管理できるため、コンポーネントの構造が簡素化されます。
  • 再利用性: カスタム フックを使用すると、コードを複製したりコンポーネントを再構築したりすることなく、ステートフル ロジックを再利用できます。
  • 関数コンポーネント: フックを使用すると、クラス コンポーネントと同じくらい強力な関数コンポーネントを作成でき、コードベースの一貫性が高まります。

3. useState

useState フックは、機能コンポーネントの状態を管理するための基本です。 this.setState() でクラス コンポーネントを使用する代わりに、このフックを使用して状態をシームレスに管理できます。

構文:

const [state, setState] = useState(initialState);
ログイン後にコピー

例) この例では、count を値 0 で初期化し、ボタンがクリックされたときに setCount 関数を使用して更新します。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
ログイン後にコピー

4.エフェクトの使用

useEffect フックを使用すると、データのフェッチ、DOM の更新、イベントのサブスクライブなど、コンポーネントの副作用を処理できます。

構文:

useEffect(() => {
  // Side effect logic
  return () => {
    // Cleanup
  };
}, [dependencies]);
ログイン後にコピー

例) この例では、useEffect はコンポーネントのマウント時に API からデータを取得します。 2 番目の引数として空の配列 [] を指定すると、エフェクトが 1 回だけ実行されるようになります (componentDidMount など)。

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <p>{data.title}</p> : <p>Loading...</p>}
    </div>
  );
}
ログイン後にコピー

5.Reducerを使用する

状態ロジックがより複雑になる場合は、useState の代わりに useReducer の使用を検討してください。 Redux に似ていますが、コンポーネント レベルです。これを使用して、アクションの種類に基づいて状態遷移を管理できます。

構文:

const [state, dispatch] = useReducer(reducer, initialState);
ログイン後にコピー

例) この例では、useReducer はインクリメントとデクリメントの 2 つのアクションを処理します。これらのアクションに基づいて状態の更新をトリガーするには、ディスパッチを使用します。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}
ログイン後にコピー

6. useRef

useRef フックは、再レンダリングを行わずに DOM 要素に直接アクセスして操作したり、レンダリング間で変更可能な値を保存したりする方法を提供します。

構文:

const myRef = useRef(initialValue);
ログイン後にコピー

例) この例では、useRef により入力フィールドに直接アクセスでき、ボタンをクリックしたときにプログラムで入力フィールドにフォーカスできるようになります。

import React, { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}
ログイン後にコピー

7. カスタムフック

フックの強力な側面の 1 つは、カスタム フック を作成して、コンポーネント間でロジックをカプセル化して再利用できることです。カスタム フックは use から始まり、他のフックを使用できる単なる通常の JavaScript 関数です。

例) この例では、useFetch フックがデータ フェッチ ロジックを処理し、複数のコンポーネントで再利用できます。

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
}

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');

  return <div>{loading ? <p>Loading...</p> : <p>{data.title}</p>}</div>;
}
ログイン後にコピー

8. ディスパッチに切り替える

ディスパッチ メソッドを useReducer と組み合わせて使用​​すると、切り替え状態を作成できます。これは、モーダル、ドロップダウン、またはテーマの切り替えなどのコンポーネントを処理するのに役立ちます。

例) ディスパッチ メソッドのトグル アクションは、isVisible 状態を true と false の間で切り替えます。これにより、コンテンツの可視性が切り替わります。

import React, { useReducer } from 'react';

const initialState = { isVisible: false };

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return { isVisible: !state.isVisible };
    default:
      return state;
  }
}

function ToggleComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'toggle' })}>
        {state.isVisible ? 'Hide' : 'Show'} Details
      </button>
      {state.isVisible && <p>Here are the details...</p>}
    </div>
  );
}
ログイン後にコピー

9. UseHooks.com とは何ですか?

フックをさらに深く掘り下げたり、プロジェクトに役立つカスタム フックを探索したりすることに興味がある場合は、UseHooks.com をチェックすることを強くお勧めします。これは、使用して学ぶことができる実践的なカスタム フックが多数含まれた素晴らしいリソースです。

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

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!