React フックの基礎

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

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 サイトの他の関連記事を参照してください。