ホームページ > 記事 > ウェブフロントエンド > React でのカスタムフックの理解と作成
以下の必要な背景知識があることを確認してください:
React の基礎知識
Node.js と npm
Vite を使用して新しい React プロジェクトを開始するには、次の手順に従います。
私。ターミナルを開き、次のコマンドを実行して新しいプロジェクトを作成します:
npm create vite@latest my-react-app --template react
ii.プロジェクト ディレクトリに移動します:
cd my-react-app
iii.依存関係のインストール: プロジェクトに必要なパッケージをインストールします:
npm install
iv.開発サーバーを起動します: 開発サーバーを実行します:
npm run dev
これで React アプリが実行され、ブラウザの http://localhost:5173 で表示できるようになります。
React フックは、機能コンポーネントで状態やその他の React 機能を使用できるようにする特別な関数です。 useState や useEffect などのフックは、状態と副作用を管理するために不可欠です。
カスタム フックは、複数のコンポーネント間でロジックを再利用する方法として説明できます。コードを繰り返す代わりに、コードをカスタム フックにカプセル化すると、コンポーネントがクリーンになり、コードが管理しやすくなります。 React フックと同様に、カスタム フックを使用する場合は、必ずコンポーネント名を必ず使用してください (use の後にコンポーネントに付けたい名前を続けます。例: useFetchData)。useFetchData は、API からデータをフェッチし、それを API に返すカスタム フックにすることができます。成分。
フックについて:
useState、useEffect、useContext などのフックを使用すると、クラスを作成せずに状態やその他の React 機能を使用できます。これらは、モジュール式の方法でコンポーネント ロジックを処理できるようにするビルディング ブロックです。
カスタム フックを使用すると、さまざまなコンポーネント間でステートフル ロジックを再利用できます。簡単な例は、インクリメント、デクリメント、およびリセット機能を持つカウンター コンポーネントです。複数のコンポーネントで同じロジックが必要な場合は、ロジックをカスタム フックに移動できます。もう 1 つの一般的に使用される例は、API からデータをフェッチするコンポーネントです。複数のコンポーネントで同じロジックが必要な場合は、そのロジックをカスタム フックに移動できます。
例: app.jsx の React フック(useState).を使用して単純なカウンター アプリを作成してみましょう
import React, { useState } from "react"; import "./App.css"; function App() { // usestate hooks const [counterstate, setCounterstate] = useState(0); // function for increment,decrement and reset const increment = () => { setCounterstate((prev) => prev + 1); }; const decrement = () => { setCounterstate((prev) => prev - 1); }; const reset = () => { setCounterstate(0); }; return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{counterstate}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
上記のコードでは、再利用可能なロジックには、カウンターステート、初期状態(o)、インクリメント、デクリメント、およびリセット関数が含まれています。インクリメントは初期状態に 1 を追加し、デクリメントは初期状態から 1 を減算します。一方、リセットは最初の初期状態にリセットします。
src フォルダー内に Hooks という名前のフォルダーを作成し、次に示すようにカスタム フック用の useCouter.jsx というファイルを作成します。
import React, { useState } from "react"; const useCounter = (initialvalue) => { const [value, setValue] = useState(initialvalue); const increment = () => { setValue((prev) => prev + 1); }; const decrement = () => { setValue((prev) => prev - 1); }; const reset = () => { setValue(initialvalue); }; return { value, increment, decrement, reset }; }; export default useCounter;
それでは、App.jsx でカスタム フックを使用してみましょう。
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; function App() { const { value, increment, decrement, reset } = useCounter(0); return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{value}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
すべての API 呼び出し用のカスタム フック useFetch を作成しましょう。
import React, { useState, useEffect } from "react"; const useFetch = (url) => { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { const fetchData = async () => { try { const response = await fetch(url); const jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, error, loading }; }; export default useFetch;
App.jsx では、以下に示すように、このカスタム フックを使用して JSON プレースホルダーからユーザー名を取得できます。
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; import useFetch from "./Hooks/useFetch"; function App() { const { value, increment, decrement, reset } = useCounter(0); const { data, error, loading } = useFetch( "https://jsonplaceholder.typicode.com/users" ); return ( <div className="container"> <div> <h1>Counter Appp </h1> <h2>{value}</h2> {loading && <div>Loading....</div>} {error && <div>Error: {error.message}</div>} {data && data.length > 0 && ( <div> <h2>Username: {data[0].username}</h2> </div> )} <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
主な利点の 1 つは再利用可能です。複数のコンポーネントで同じカスタム フックを使用できるため、コードの重複を減らすことができます。
カスタム フックは、ロジックを UI から分離するのに役立ちます。コンポーネントはレンダリングに重点を置き、カスタム フックはロジックを処理します。
複雑なロジックをカスタム フックに移動することで、コンポーネントがよりシンプルになり、理解しやすくなります。
カスタム フックは、React の命名規則に従って「use」という単語で始める必要があります。これは、コード内のフックを素早く特定するのにも役立ちます。
例: useFetch、useForm、useAuth。
カスタム フック内で useEffect などのフックを使用する場合は、バグや不要な再レンダリングを避けるために、依存関係を正しく処理するようにしてください。
値をメモ化するか、useCallback や useMemo などのフックを使用してカスタム フックを最適化し、高コストの計算の再実行やデータの再フェッチを回避します。
カスタム フックの概念と、React アプリケーション開発の簡素化と強化におけるその役割について検討してきました。カスタム フックを作成すると、ステートフル ロジックをカプセル化して再利用できるため、コンポーネントをクリーンで保守しやすく保つことができます。
GitHub でプロジェクトをチェックしてください: My GitHub リポジトリ
以上がReact でのカスタムフックの理解と作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。