React カスタムフックのベストプラクティス: 使用例付き-jsチュートリアル-php.cn

React カスタムフックのベストプラクティス: 使用例付き

WBOY

リリース： 2024-07-26 13:59:03

オリジナル

644 人が閲覧しました

React Custom Hooks Best Practices: With Example Usecases

目次を読むには、元の投稿 https://devaradise.com/react-custom-hooks-best-practices/ をチェックしてください

React 開発者であれば、コンポーネント間でロジックを共有する必要がある状況に遭遇したことがあるでしょう。この投稿では、カスタムフックとは何か、カスタムフックをいつ使用するか、カスタムフックを作成する際のベストプラクティス、および React アプリケーションをよりクリーンで保守しやすくするための一般的な使用例について説明します。

React に関する関連投稿

2024 年に React プロジェクトを開始してセットアップする方法
フックを使用した関数コンポーネントの反応
React 条件付きレンダリング (If Else) のベストプラクティス

React のカスタムフックとは何ですか?

カスタムフックは、React コンポーネント間で共有できるステートフルロジックを備えた再利用可能な関数です。これらは接頭辞の use から始まり、その内部で他のフックを呼び出すことができるため、複雑な状態と効果のロジックを単純で再利用可能な関数に抽象化することができます。

React カスタムフックは、コードを複製せずにアプリケーションの異なる部分間でロジックを共有する必要がある状況に最適です。これにより、コンポーネントがよりクリーンに保たれるだけでなく、よりモジュール化されたコードベースが促進されます。

カスタムフックは、通常の JavaScript の再利用可能な関数とは異なることに注意してください。カスタムフックはステートフルです。つまり、useState フックまたはその他の組み込みフックで反応状態を使用する必要があります。

React でカスタムフックを使用する場合

カスタムフックは、コンポーネント間でステートフルロジックを再利用する必要がある場合、特にデータのフェッチ、フォーム処理、認証などの複雑なタスクに最適です。これらにより、コンポーネントコードが簡素化され、可読性が向上し、テストとメンテナンスが容易になります。

カスタムフックのもう 1 つの主要な使用例は、同じコードを複数の場所に記述している場合です。同じロジックをコピーして貼り付ける代わりに、それをカスタムフックに抽出し、必要なときに再利用できます。これにより、DRY (Don't Reply Yourself) 原則が促進され、コードベースがより効率的になり、エラーが発生しにくくなります。

カスタムフックを作成するためのベストプラクティス

カスタムフックを作成する場合、効果的かつ保守可能であることを保証するために留意すべきベストプラクティスがいくつかあります。以下に重要なガイドラインをいくつか示します:

1. まずは使ってみよう

カスタムフックの名前は常に use で始まります。これは、他の React 開発者がこれらの関数をフックとして識別し、フックのルールが正しく適用されるようにするのに役立つ規則です。

2. フックをきれいに保つ

フックが純粋な関数であることを確認してください。フック内で直接副作用が発生するのを避けてください。代わりに、useEffect または同様のフックを使用して管理します。

副作用とは、レンダリング後にコンポーネントで発生する操作や動作であり、現在のコンポーネントのレンダリングサイクルに直接影響を与えません。

3. 不必要なレンダリングを避ける

特に高コストの計算や複雑な状態の更新を扱う場合は、useMemo や useCallback などのメモ化手法を使用して、フックによる不必要な再レンダリングの発生を防ぎます。

useState、useEffect、useReducer、useCallback などの組み込みフックを利用して、カスタムフック内の状態と副作用を管理します。

4. 一貫した値の型を返す

状態、関数、または公開したい値を含むフックから、一貫した値の型を持つ配列またはオブジェクトを返します。これにより、フックが提供するものとその使用方法が明確になります。

5. テストを作成し、カスタムフックを文書化する

カスタムフックが十分にテストされていることを確認してください。 React Testing Library や Jest などのツールを使用して、フックの動作を検証するテストを作成します。

カスタムフックに関する明確なドキュメントを提供してください。他の人 (そしてあなた自身) が使いやすく、保守しやすいように、それらの機能、パラメーター、戻り値を説明します。

6. シンプルに保つ

フックを複雑にしすぎないようにしてください。フックが複雑になり始めた場合は、より小さく、より焦点を絞ったフックに分割することを検討してください。

フックの責任が 1 つだけであることを確認してください。

7. エラーを適切に処理する

フック内でエラーを適切に処理します。これにより、これらのフックを使用するコンポーネントは、中断することなく予期しないシナリオを処理できるようになります。

カスタムフックの使用例

React プロジェクトで発生する可能性のあるカスタムフックの一般的な使用例をいくつか示します。

1. データの取得

API エンドポイントからデータを取得するためのカスタムフックは、データを取得して表示する必要があるさまざまなコンポーネント間で再利用できます。

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        async function fetchData() {
            try {
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                setData(result);
            } catch (err) {
                setError(err);
            } finally {
                setLoading(false);
            }
        }

        fetchData();
    }, [url]);

    return { data, loading, error };
}

ログイン後にコピー

const Component = () => {
    const { data, loading, error } = useFetch('https://example.com/api/path');

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            <h1>Data:</h1>
            <pre class="brush:php;toolbar:false">{JSON.stringify(data)}

); };

ログイン後にコピー

2. フォームの処理

カスタムフックはフォームの状態を管理し、検証を処理し、送信ハンドラーを提供できるため、フォーム管理が簡単になります。

import { useState } from 'react'; function useForm(initialValues) { const [values, setValues] = useState(initialValues); const [errors, setErrors] = useState({}); const handleChange = (event) => { const { name, value } = event.target; setValues({ ...values, [name]: value }); }; const validate = (name, value) => { if (value.trim() === '') { setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' })); } else { setErrors((prevErrors) => ({ ...prevErrors, [name]: '' })); } }; const handleSubmit = (event, callback) => { event.preventDefault(); if (Object.values(errors).every((err) => err === '')) { callback(values); } }; return { values, handleChange, handleSubmit, validate, errors }; }

3. 認証

ログイン、ログアウト、ユーザーが認証されているかどうかの確認など、ユーザー認証状態の管理。

import { useState, useEffect } from 'react'; function useAuth() { const [user, setUser] = useState(null); useEffect(() => { const loggedUser = localStorage.getItem('user'); if (loggedUser) { setUser(JSON.parse(loggedUser)); } }, []); const login = (userData) => { setUser(userData); // call login api here localStorage.setItem('user', JSON.stringify(userData)); }; const logout = () => { setUser(null); localStorage.removeItem('user'); }; return { user, login, logout }; }

4. ウィンドウサイズ

ウィンドウサイズの変更を追跡するためのカスタムフック。レスポンシブデザインに役立ちます。

import { useState, useEffect } from 'react'; function useWindowSize() { const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight }); useEffect(() => { const handleResize = () => { setSize({ width: window.innerWidth, height: window.innerHeight }); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); return size; }

5.入力のデバウンス

入力変更をデバウンスするためのカスタムフック。これは、検索入力や関数呼び出しを遅らせたいその他のシナリオに役立ちます。

import { useState, useEffect } from 'react'; function useDebounce(value, delay) { const [debouncedValue, setDebouncedValue] = useState(value); useEffect(() => { const handler = setTimeout(() => { setDebouncedValue(value); }, delay); return () => { clearTimeout(handler); }; }, [value, delay]); return debouncedValue; }

結論

カスタムフックを使用すると、React コードの再利用性と保守性が向上し、コードを大幅に簡素化できます。フック内で直接副作用を回避する、配列やオブジェクトを直接変更しないなどのベストプラクティスに従うことで、予測可能でテストが簡単なフックを作成できます。

この投稿が役立つと思われた場合は、「いいね！」を付けて共有することを検討してください。カスタムフックについて意見や提案がある場合は、お気軽にコメントに投稿してください。

以上がReact カスタムフックのベストプラクティス: 使用例付きの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。