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 の关键をよく表述して、次のプロジェクトに適用することをお勧めします。