React Hooks の初心者向けガイドとその使用方法

React Hooks とは何ですか? なぜ便利なのですか?

React Hooks は React 16.8 の新機能で、クラスを作成せずに状態やその他の React 機能を使用できるようにします。これにより、コンポーネント間でステートフル ロジックを簡単に共有できるようになり、コードを再利用しやすく理解しやすくなります。フックを使用すると、コードをより小さく再利用可能な部分に分割できるため、管理とテストが容易になるため、フックも役立ちます。

React Hooks とクラスベースのコンポーネントの違い

React Hooks とクラスベースのコンポーネントの主な違いは次のとおりです。

1. フックを使用すると、関数コンポーネントで状態およびその他の React 機能を使用できます。フックが導入される前は、クラスベースのコンポーネントのみが状態を持ち、ライフサイクル メソッドなどの他の React 機能を使用できました。フックを使用すると、状態やその他の React 機能を関数コンポーネントに追加して、より用途が広く再利用できるようにすることができます。

   
   

2. フックを使用すると、コードがより簡潔で読みやすくなります。クラスベースのコンポーネントは、特に多くの状態またはライフサイクル メソッドを管理する必要がある場合に、長く複雑になる可能性があります。フックを使用すると、シンプルで焦点を絞った関数を使用して個々の状態とロジックを処理できるため、コードが読みやすく理解しやすくなります。

   
   

3. フックを使用すると、ステートフル ロジックを再利用できます:フックを使用すると、コンポーネントからステートフル ロジックを抽出し、それを複数のコンポーネント間で共有できるため、コードをより再利用可能で保守しやすくなります。これは、多くのステートフル ロジックを含む複雑なコンポーネントがあり、そのロジックの一部を再利用可能な関数に抽出したい場合に特に便利です。

基本的な React フック

useState()

useState フックは、機能コンポーネントに状態を追加できる React の関数です。状態は、コンポーネントの動作を決定し、ユーザーに情報を表示する値のコレクションです。 useState フックは、初期状態である 1 つの引数を取り、2 つの要素を持つ配列を返します。

最初の要素は状態の現在の値で、2 番目の要素は状態を更新するために使用できる関数です。機能コンポーネントで useState フックを使用する方法の例を次に示します。

 import React, { useState } from 'react'; const myComponent = () => { // Declare a new state variable, which we'll call "count" // The initial value of count is 0 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times.</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }

この例では、useState フックを使用して、count と呼ばれる状態の一部を MyComponent 機能コンポーネントに追加します。 count の初期値は 0 で、setCount 関数を使用して、ボタンがクリックされたときに count の値を更新します。ボタンがクリックされるたびに、count の値が 1 ずつ増加し、コンポーネントは更新された値で再レンダリングされます。

useEffect()

useEffect は React のフックで、関数コンポーネントで副作用を実行できるようにします。これには、サブスクリプションの設定、DOM の変更、外部 API とのやり取りなどが含まれます。

コンポーネント内で呼び出され、コンポーネントがレンダリングされるたびに実行されます。

使用方法の例を次に示します。

 import React, { useEffect } from 'react'; const MyComponent = () => { useEffect(() => { // Perform some side effect, like subscribing to a data source const subscription = someDataSource.subscribe(data => { // Update state with the data from the subscription setState({ data }); }); // Clean up the subscription when the component unmounts return () => subscription.unsubscribe(); }); // Render the component return ( <div> {/* Use the data from the state in the render method */} Data: {state.data} </div> ); }

この例では、useEffect フックを使用して、データ ソースへのサブスクリプションを設定し、サブスクリプションからのデータでコンポーネントの状態を更新します。また、コンポーネントのアンマウント時に呼び出されるクリーンアップ関数も含まれており、サブスクリプションが適切にクリーンアップされ、メモリ リークが発生しないようにします。

useContext()

useContext は、関数コンポーネント内からコンテキストの値にアクセスできるようにする React のフックです。コンテキストは、すべてのレベルで手動で props を渡す必要なく、コンポーネント ツリーを介してデータを渡す方法を提供します。

useContext の使用例を次に示します。

 import React, { useContext } from 'react'; // Create a context with a default value const MyContext = React.createContext('defaultValue'); function MyComponent() { // Use the useContext hook to access the value of the context const value = useContext(MyContext); return ( <div> {/* Use the value from the context in the render method */} Value from context: {value} </div> ); }

この例では、useContext フックを使用して、MyComponent 関数コンポーネント内の MyContext コンテキストの値にアクセスします。次に、コンテキストの値を render メソッドで使用できます。

コンテキストの値を提供するプロバイダが更新されると、コンテキストが使用されるコンポーネントでのみコンテキストの値が更新されることに注意することが重要です。これは、プロバイダーが更新された値で再レンダリングされた場合にのみ、コンテキストの値に対する変更がコンテキストを使用するコンポーネントに反映されることを意味します。

高度な React フック

useReducer()

useReducer は、React アプリケーションで状態を管理するために使用される React のフックです。これは useState フックに似ていますが、より複雑な状態オブジェクトを管理でき、リデューサー関数でアクションを処理する方法を提供します。

React コンポーネントで useReducer を使用する方法の例を次に示します。

 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: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'decrement' })}>-</button> <button onClick={() => dispatch({ type: 'increment' })}>+</button> </> ); }

この例では、useReducer フックを使用して単純なカウンター コンポーネントの状態を管理します。フックはレデューサー関数と初期状態で呼び出され、現在の状態と、アクションをレデューサーにディスパッチするために使用できるディスパッチ関数を返します。この場合、コンポーネントには「インクリメント」アクションと「デクリメント」アクションをレデューサーにディスパッチする 2 つのボタンがあり、それに応じて状態のカウントを更新します。

useMemo()

useMemo は React のフックで、結果をメモすることでコンポーネントのパフォーマンスを最適化できます。関数と依存関係の配列を引数として取り、メモ化された関数の結果を返します。

メモ化は、アプリケーションの速度と効率を向上させるために使用される最適化手法です。これは、計算結果を保存し、同じ入力が再び発生したときにキャッシュされた結果を返すことによって行われます。

依存関係の配列は、メモ化された関数をいつ再実行するかを React に伝えます。配列内の依存関係の 1 つが変更されるたびに、メモ化された関数が再実行されます。これは、コンポーネントがレンダリングされるたびに関数の結果を再計算するとコストがかかる可能性がある、大規模または複雑なコンポーネントのパフォーマンスを最適化するのに役立ちます。

useRef()

React では、useRef フックを使用して、DOM 要素または React コンポーネント インスタンスへの参照を作成します。この参照を使用して、値やチェック状態などの要素のプロパティにアクセスしたり、フォーカスやクリックなどの要素の関数を呼び出したりできます。

以下は、ボタンがクリックされたときに入力要素にフォーカスするために useRef を使用する方法の例です。

 import { useRef } from 'react'; function MyInput() { const inputRef = useRef(null); function handleClick() { // Use the `current` property of the ref to access the DOM element inputRef.current.focus(); } return ( <div> <input type="text" ref={inputRef} /> <button onClick={handleClick}>Focus the input</button> </div> ); }

この例では、useRef を呼び出し、ref の初期値として null を渡すことによって、inputRef 変数が作成されます。次に、ref 属性を inputRef に設定することによって、この ref を入力要素に関連付けます。

handleClick 関数が呼び出されると、現在のプロパティ inputRef を使用して入力要素にアクセスし、その focus メソッドを呼び出して、フォーカスを入力要素に移動します。

コンポーネントに状態を格納するために useRef を使用しないでください。その代わりに、useState フックを使用してください。 useRef は、DOM 要素などの非 React 値への参照を格納するためのものです。

React Hooks の一般的な使用例

• 単純なコンポーネントと複雑なコンポーネントで状態を管理する
• API 呼び出しやサブスクリプションなどの副作用の実行
• メモ化によるパフォーマンスの最適化
• アニメーションやインタラクションで使用する要素への参照を作成する

結論

結論として、react フックには、従来のクラスベースのコンポーネントに比べていくつかの利点があります。シンプルさ、再利用性、構成可能性 (つまり、複数のロジックを 1 つの関数に結合する機能)、およびパフォーマンスの向上などです。

React Hooks の基本をよく理解して、次のプロジェクトに適用することをお勧めします。