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

フック は、開(kāi)発者が機(jī)能コンポーネントから React の狀態(tài)とライフサイクル機(jī)能に「フック」できるようにする関數(shù)です。これらは React 16.8 で導(dǎo)入され、開(kāi)発者がクラス コンポーネントに変換することなく、関數(shù)コンポーネントで狀態(tài)、コンテキスト、その他の React 機(jī)能を使用できるようになりました。フックが登場(chǎng)する前は、クラス コンポーネントが React の狀態(tài)、ライフサイクル メソッド、その他の機(jī)能を処理する唯一の方法でした。

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

---

1.フックの主な種類

1.1. useState フック

useState フックは最も基本的なフックであり、機(jī)能コンポーネントに狀態(tài)を追加できます。現(xiàn)在の狀態(tài)値を含む配列とその値を更新する関數(shù)を返します。

例:

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 は、初期狀態(tài)値を引數(shù) (この場(chǎng)合は 0) として受け取り、狀態(tài)変數(shù) (count) を含む配列とそれを更新する関數(shù) (setCount) を返します。

1.2. useEffect フック

useEffect フックを使用すると、関數(shù)コンポーネントで副作用を?qū)g行できます。これらの副作用には、データのフェッチ、イベントのサブスクライブ、DOM の手動(dòng)変更などの操作が含まれる可能性があります。これは、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 番目の引數(shù) (依存関係配列) を渡して、いつエフェクトを?qū)g行するかを制御できます。依存関係配列が空の場(chǎng)合、エフェクトはコンポーネントのマウント時(shí)に 1 回だけ実行されます。

1.3. useContext フック

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

例:

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 を手動(dòng)で渡さずに、ThemedComponent 內(nèi)の ThemeContext の値にアクセスするために使用されます。

1.4. useReducerフック

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

例:

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 関數(shù)と初期狀態(tài)を引數(shù)として受け取り、現(xiàn)在の狀態(tài)と、reducer にアクションを送信するためのディスパッチ関數(shù)を返します。

1.5。 useCallback フック

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

例:

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 関數(shù)が再作成されるのを防ぎ、特に大規(guī)模なアプリケーションでのパフォーマンスを最適化します。

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

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

例:

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 は、関連する依存関係 (この場(chǎng)合はカウント) が変更されるまで計(jì)算の結(jié)果を記憶することで、高コストの計(jì)算を回避するのに役立ちます。

---

2.フックの利點(diǎn)

1.よりシンプルで簡(jiǎn)潔なコード

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

2.再利用性の向上

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

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

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

4.コード構(gòu)成の改善

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

---

3.結(jié)論

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

---

以上がReact フックを理解する: 最新の React 開(kāi)発ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。