React フックを理解する: 最新の React 開発ガイド

React のフックとは何ですか?

フック は、開発者が機能コンポーネントから React の状態とライフサイクル機能に「フック」できるようにする関数です。これらは React 16.8 で導入され、開発者がクラス コンポーネントに変換することなく、関数コンポーネントで状態、コンテキスト、その他の React 機能を使用できるようになりました。フックが登場する前は、クラス コンポーネントが React の状態、ライフサイクル メソッド、その他の機能を処理する唯一の方法でした。

フックは、機能コンポーネントの状態とライフサイクル ロジックを管理するための、より簡潔で読みやすく、再利用可能な方法を提供します。フックを活用することで、React 開発者は、よりシンプルでモジュール化された、テストが容易なコンポーネントを作成できます。

---

1.フックの主な種類

1.1. useState フック

useState フックは最も基本的なフックであり、機能コンポーネントに状態を追加できます。現在の状態値を含む配列とその値を更新する関数を返します。

例:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useState は、初期状態値を引数 (この場合は 0) として受け取り、状態変数 (count) を含む配列とそれを更新する関数 (setCount) を返します。

1.2. useEffect フック

useEffect フックを使用すると、関数コンポーネントで副作用を実行できます。これらの副作用には、データのフェッチ、イベントのサブスクライブ、DOM の手動変更などの操作が含まれる可能性があります。これは、componentDidMount、componentDidUpdate、componentWillUnmount などのクラス コンポーネントのライフサイクル メソッドを置き換えます。

例:

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useEffect はデフォルトでレンダリングのたびに実行されます。ただし、2 番目の引数 (依存関係配列) を渡して、いつエフェクトを実行するかを制御できます。依存関係配列が空の場合、エフェクトはコンポーネントのマウント時に 1 回だけ実行されます。

1.3. useContext フック

useContext フックを使用すると、特定の Context オブジェクトのコンテキスト値にアクセスできます。これは、すべてのレベルで props を手動で渡す必要がなく、コンポーネント ツリーを通じてデータを渡すのに役立ちます。

例:

import React, { useState } from 'react';

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

• useContext は、テーマ prop を手動で渡さずに、ThemedComponent 内の ThemeContext の値にアクセスするために使用されます。

1.4. useReducerフック

useReducer フックは、より複雑な状態ロジックを管理する必要がある場合、特に次の状態が前の状態に依存する場合に useState の代替手段です。これは、Redux でのリデューサーの動作と同様に動作します。

例:

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

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    // Cleanup function to clear the interval
    return () => clearInterval(timer);
  }, []); // Empty dependency array means this effect runs once, like componentDidMount

  return <p>Timer: {seconds} seconds</p>;
};

• useReducer は、reducer 関数と初期状態を引数として受け取り、現在の状態と、reducer にアクションを送信するためのディスパッチ関数を返します。

1.5。 useCallback フック

useCallback フックは、依存関係の 1 つが変更された場合にのみ変更される関数のメモ化されたバージョンを返します。これにより、特に関数を props として子コンポーネントに渡す場合に、関数の不必要な再作成が防止され、パフォーマンスの最適化に役立ちます。

例:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);
  return <div>The current theme is {theme}</div>;
};

const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

• useCallback は、レンダリングのたびに handleClick 関数が再作成されるのを防ぎ、特に大規模なアプリケーションでのパフォーマンスを最適化します。

1.6.メモフックを使用する

useMemo フックは useCallback に似ていますが、メモ化された関数ではなくメモ化された値を返します。必要な場合にのみ値を再計算することで、パフォーマンスの最適化に役立ちます。

例:

import React, { useReducer } from 'react';

// Reducer function
const counterReducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const Counter = () => {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

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

• useMemo は、関連する依存関係 (この場合はカウント) が変更されるまで計算の結果を記憶することで、高コストの計算を回避するのに役立ちます。

---

2.フックの利点

1.よりシンプルで簡潔なコード

フックを使用すると、クラスベースのコンポーネントを作成せずに機能コンポーネントで状態やその他の機能を使用できるため、定型コードが減り、コンポーネントがより読みやすくなります。

2.再利用性の向上

フックを使用すると、コンポーネントのロジックをカスタム フックに抽出できるため、コードを複製することなく、さまざまなコンポーネント間でロジックを簡単に共有できます。

3. 「これ」キーワードはもう不要

フックは機能コンポーネントで使用されるため、クラス コンポーネントでよくある混乱の原因である this キーワードについて心配する必要はありません。

4.コード構成の改善

フックを使用すると、関連するロジックをまとめて保持できます。たとえば、副作用には useEffect を使用し、状態の管理には useState をすべて同じコンポーネント内で使用できるため、推論が容易になります。

---

3.結論

フック は、開発者が機能コンポーネントで状態、ライフサイクル メソッド、その他の React 機能を使用できるようにする React の強力な機能です。 useState、useEffect、useContext、useReducer などのフックを使用することで、React 開発者はよりクリーンで保守性の高いモジュール化されたコードを作成できます。フックを使用すると、関数コンポーネントがより強力になり、クラス コンポーネントの複雑さを伴うことなく、状態や副作用などの最新の機能を使用できるようになります。

---

以上がReact フックを理解する: 最新の React 開発ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。