React Custom Hooks Amalan Terbaik: Dengan Contoh Usecases

Lihat siaran asal https://devaradise.com/react-custom-hooks-best-practices/ untuk dibaca dengan Jadual Kandungan

Jika anda seorang pembangun React, anda mungkin menghadapi situasi di mana anda perlu berkongsi logik merentas komponen. Dalam siaran ini, kami akan meneroka apakah cangkuk tersuai, masa untuk menggunakannya, amalan terbaik untuk menulisnya dan beberapa kes penggunaan biasa yang akan menjadikan aplikasi React anda lebih bersih dan lebih mudah diselenggara.

Siaran berkaitan tentang React

1. Cara Memulakan & Menyediakan projek React pada 2024
2. Tindak Balas Komponen Fungsian dengan Cangkuk
3. Amalan Terbaik Reaksi Bersyarat (Jika Lain)

Apakah itu Cangkuk Tersuai dalam React?

Kail tersuai ialah fungsi boleh guna semula dengan logik stateful yang boleh dikongsi merentas komponen React. Mereka bermula dengan penggunaan awalan dan boleh memanggil cangkuk lain di dalamnya, menjadikannya mungkin untuk mengabstrak keadaan kompleks dan kesan logik ke dalam fungsi yang mudah dan boleh digunakan semula.

Kait tersuai bertindak balas sesuai untuk situasi di mana anda perlu berkongsi logik antara bahagian aplikasi anda yang berbeza tanpa menduplikasi kod. Ini bukan sahaja memastikan komponen anda lebih bersih tetapi juga menggalakkan pangkalan kod yang lebih modular.

Perhatikan bahawa cangkuk tersuai adalah berbeza dengan fungsi boleh guna semula javascript biasa. Cangkuk tersuai adalah stateful, bermakna anda harus menggunakan keadaan tindak balas dengan cangkuk useState atau cangkuk terbina dalam yang lain.

Bila Menggunakan Cangkuk Tersuai dalam React

Cakuk tersuai sangat sesuai apabila anda perlu menggunakan semula logik stateful merentas komponen, terutamanya untuk tugas yang rumit seperti pengambilan data, pengendalian borang dan pengesahan. Mereka memudahkan kod komponen anda, meningkatkan kebolehbacaan dan menjadikan ujian dan penyelenggaraan lebih mudah.

Satu lagi kes penggunaan utama untuk cangkuk tersuai ialah apabila anda mendapati diri anda menulis kod yang sama di beberapa tempat. Daripada menyalin dan menampal logik yang sama, anda boleh mengekstraknya ke dalam cangkuk tersuai dan menggunakannya semula di mana-mana yang diperlukan. Ini menggalakkan prinsip DRY (Don't Repeat Yourself), menjadikan pangkalan kod anda lebih cekap dan kurang terdedah kepada ralat.

Amalan Terbaik untuk Menulis Cangkuk Tersuai

Apabila membuat cangkuk tersuai, terdapat beberapa amalan terbaik yang perlu diingat untuk memastikan ia berkesan dan boleh diselenggara. Berikut ialah beberapa garis panduan utama:

1. Mulakan dengan penggunaan

Sentiasa mulakan nama cangkuk tersuai anda dengan penggunaan. Ini ialah konvensyen yang membantu pembangun React lain mengenal pasti fungsi ini sebagai cangkuk, memastikan peraturan cangkuk digunakan dengan betul.

2. Pastikan Cangkuk Tulen

Pastikan cangkuk anda adalah fungsi tulen. Elakkan kesan sampingan terus di dalam cangkuk anda; sebaliknya, uruskannya menggunakan useEffect atau cangkuk yang serupa.

Kesan sampingan ialah sebarang operasi atau gelagat yang berlaku dalam komponen selepas pemaparan dan tidak memberi kesan langsung kepada kitaran pemaparan komponen semasa.

3. Elakkan Render yang Tidak Perlu

Gunakan teknik hafalan seperti useMemo atau useCallback untuk mengelakkan cangkuk anda daripada menyebabkan pemaparan semula yang tidak perlu, terutamanya apabila berurusan dengan pengiraan yang mahal atau kemas kini keadaan yang rumit.

Manfaatkan cangkuk terbina dalam seperti useState, useEffect, useReducer dan useCallback untuk mengurus keadaan dan kesan sampingan dalam cangkuk tersuai anda.

4. Pulangan Jenis Nilai Konsisten

Kembalikan tatasusunan atau objek dengan jenis nilai yang konsisten daripada cangkuk anda yang mengandungi keadaan, fungsi atau sebarang nilai yang ingin anda dedahkan. Ini menjelaskan apa yang disediakan oleh cangkuk dan cara menggunakannya.

5. Tulis Ujian dan Dokumen Cangkuk Tersuai anda

Pastikan cangkuk tersuai anda telah diuji dengan baik. Gunakan alatan seperti React Testing Library dan Jest untuk menulis ujian yang mengesahkan kelakuan cangkuk anda.

Sediakan dokumentasi yang jelas untuk cangkuk tersuai anda. Terangkan perkara yang mereka lakukan, parameter mereka dan nilai pulangan mereka untuk memudahkan orang lain (dan anda sendiri) menggunakan dan menyelenggara.

6. Pastikan Ia Mudah

Elakkan membuat cangkuk anda terlalu rumit. Jika cangkuk mula menjadi terlalu rumit, pertimbangkan untuk memecahkannya kepada cangkuk yang lebih kecil dan lebih fokus.

Pastikan mata kail anda hanya mempunyai tanggungjawab tunggal.

7. Tangani Ralat Dengan Anggun

Kendalikan ralat dengan anggun dalam cangkuk anda. Ini memastikan komponen anda yang menggunakan cangkuk ini boleh mengendalikan senario yang tidak dijangka tanpa putus.

Contoh Kes Penggunaan Cangkuk Tersuai

Berikut ialah beberapa kes penggunaan biasa untuk cangkuk tersuai yang mungkin anda hadapi dalam projek React anda:

1. Pengambilan Data

Kait tersuai untuk mengambil data daripada titik akhir API boleh digunakan semula merentas komponen berbeza yang perlu mengambil dan memaparkan data.

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)}

); };

Salin selepas log masuk

2. Pengendalian Borang

Cakuk tersuai boleh mengurus keadaan borang, mengendalikan pengesahan dan menyediakan pengendali serahan, menjadikan pengurusan borang menjadi mudah.

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 };
}

const Component = () => {
    const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);

    const submit = () => {
        alert('Form submitted successfully');
    };

    return (
        <form onSubmit={(e) => handleSubmit(e, submit)}>
            <div>
                <label>Username</label>
                <input type='text' name='username' value={values.username} onChange={handleChange} />
                {errors.username && <p>{errors.username}</p>}
            </div>
            <button type='submit'>Submit</button>
        </form>
    );
};

3. Pengesahan

Menguruskan keadaan pengesahan pengguna, termasuk log masuk, log keluar dan menyemak sama ada pengguna disahkan.

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. Saiz Tingkap

Kait tersuai untuk menjejaki perubahan saiz tetingkap, yang boleh berguna untuk reka bentuk responsif.

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. Mematikan Input

Kait tersuai untuk menyahlantun perubahan input, yang berguna untuk input carian atau senario lain yang anda mahu menangguhkan panggilan fungsi.

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;
}

Kesimpulan

Cakuk tersuai boleh memudahkan kod React anda dengan menjadikannya lebih boleh digunakan semula dan diselenggara. Dengan mematuhi amalan terbaik, seperti mengelakkan kesan sampingan terus di dalam cangkuk dan memastikan anda tidak mengubah tatasusunan atau objek secara langsung, anda boleh membuat cangkuk yang boleh diramal dan mudah diuji.

Jika anda mendapati siaran ini berguna, pertimbangkan untuk memberinya suka dan kongsikannya. Jika anda mempunyai pendapat atau lebih banyak cadangan tentang cangkuk tersuai, sila jangan teragak-agak untuk menyiarkannya dalam ulasan.

Terima kasih, Selamat mengekod!

Atas ialah kandungan terperinci React Custom Hooks Amalan Terbaik: Dengan Contoh Usecases. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!