反応フック

React Hook は、従来はクラス コンポーネントでのみ利用可能であった状態やその他の React 機能を関数コンポーネントで使用できるようにする関数です。これらは React 16.8 で導入され、それ以来 React コンポーネントを作成するための標準となっています。最も一般的に使用されるフックの内訳は次のとおりです:

1.useState

• 目的: 機能コンポーネントの状態を管理します。
• 使用法:

  import React, { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0); // Declare a state variable called 'count'

    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

• 説明: useState は、現在の状態値 (count) とそれを更新する関数 (setCount) の 2 つの要素を含む配列を返します。これにより、機能コンポーネント内の状態を維持および更新できるようになります。

2. useEffect

• 目的: データの取得、サブスクリプション、機能コンポーネントの DOM の手動変更などの副作用を処理します。
• 使用法:

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

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

    useEffect(() => {
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => setData(data));
    }, []); // Empty dependency array means this effect runs once after the initial render.

    return <div>{data ? data : 'Loading...'}</div>;
  }

• 説明: useEffect は 2 つの引数を取ります: エフェクトを実行する関数とオプションの依存関係配列です。エフェクト関数は、コンポーネントのレンダリング後に実行されます。依存関係の配列を指定すると、その依存関係が変更された場合にのみエフェクトが実行されます。

3.useContext

• 目的: 機能コンポーネント内のコンテキストの値にアクセスします。
• 使用法:

  import React, { useContext } from 'react';
  const ThemeContext = React.createContext('light');

  function DisplayTheme() {
    const theme = useContext(ThemeContext); // Access the current theme context value

    return <div>The current theme is {theme}</div>;
  }

• 説明: useContext を使用すると、Consumer コンポーネントを必要とせずに、機能コンポーネントでコンテキスト値を直接使用できます。

4.Reducer を使用

• 目的: 機能コンポーネントの複雑な状態ロジックを管理し、useState の代替として機能します。
• 使用法:

  import React, { useReducer } from 'react';

  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, { count: 0 });

    return (
      <div>
        <p>Count: {state.count}</p>
        <button onClick={() => dispatch({ type: 'increment' })}>+</button>
        <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      </div>
    );
  }

• 説明: useReducer は、より複雑なロジックや複数のアクションに依存する状態を管理するのに役立ちます。これはリデューサー関数と初期状態を受け取り、現在の状態とディスパッチ関数を返します。

5. useRef

• 目的: レンダリング間で保持される DOM 要素または値への変更可能な参照にアクセスして保存します。
• 使用法:

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

  function TextInputWithFocusButton() {
    const inputEl = useRef(null);

    const onButtonClick = () => {
      inputEl.current.focus(); // Access the DOM element directly
    };

    return (
      <>
        <input ref={inputEl} type="text" />
        <button onClick={onButtonClick}>Focus the input</button>
      </>
    );
  }

• 説明: useRef は、DOM 要素への値または参照を保持できる .current プロパティを持つ可変オブジェクトを返します。この値は、更新時に再レンダリングをトリガーすることなく、レンダリングをまたいで保持されます。

6. useMemo と useCallback

• 目的: 負荷の高い計算や関数をメモ化することでパフォーマンスを最適化します。
• 使用法:

  import React, { useMemo, useCallback } from 'react';

  function Example({ items }) {
    const expensiveCalculation = useMemo(() => {
      return items.reduce((a, b) => a + b, 0);
    }, [items]);

    const memoizedCallback = useCallback(() => {
      console.log('This function is memoized');
    }, []);

    return <div>{expensiveCalculation}</div>;
  }

• 説明: useMemo は計算された値をメモ化し、依存関係が変更された場合にのみ再計算します。 useCallback は関数をメモ化し、依存関係が変更された場合にのみ関数が再定義されるようにします。

フックが役立つ理由

• よりクリーンなコード: フックを使用すると、クラス コンポーネントを必要とせずに、よりクリーンで読みやすいコードを作成できます。
• 再利用性: フックはさまざまなコンポーネント間で再利用したり、プロジェクト間で共有したりすることもできます。
• 関数コンポーネントのステートフル ロジック: フックを使用すると、関数コンポーネントの状態と副作用を管理できるようになり、クラス コンポーネントと同じくらい強力になります。

フックは開発者が React アプリケーションを作成する方法を変革し、機能コンポーネントの機能が向上し、管理が容易になりました。

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