PricingLoginStart free
Frontend Academy · Pelajaran

Hook Tersuai: Mengekstrak Logik Boleh Guna Semula

Pindahkan logik berstate ke dalam fungsi use* tersuai untuk berkongsi tingkah laku merentas komponen tanpa menduplikasi kod atau menaikkan state.

Pelajaran 4 daripada 413 langkah

Hook Tersuai: Mengekstrak Logik Boleh Guna Semula ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah Cangkuk Tersuai?

Cangkuk tersuai ialah fungsi JavaScript yang namanya bermula dengan use dan memanggil cangkuk lain secara dalaman. Cangkuk tersuai membolehkan anda mengekstrak logik berkeadaan supaya beberapa komponen boleh berkongsinya tanpa menyalin dan menampal.

Mengekstrak Logik ke dalam Cangkuk Tersuai

Kenal pasti logik yang diduplikasi merentas komponen (pengambilan data + pemuatan + ralat, saiz tetingkap, storan setempat) dan pindahkannya ke dalam cangkuk tersuai.

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handler = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return width;
}

// Usage:
const width = useWindowWidth();
const isMobile = width < 768;

useFetch — Cangkuk Pengambilan Data

Cangkuk pengambilan data boleh guna semula yang boleh digunakan oleh mana-mana komponen untuk memuatkan data daripada URL.

function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const controller = new AbortController();
    async function load() {
      try {
        const res = await fetch(url, { signal: controller.signal });
        if (!res.ok) throw new Error(`${res.status}`);
        setData(await res.json());
      } catch (err) {
        if ((err as DOMException).name !== 'AbortError')
          setError((err as Error).message);
      } finally { setLoading(false); }
    }
    load();
    return () => controller.abort();
  }, [url]);

  return { data, loading, error };
}

Cangkuk useLocalStorage

Cangkuk tersuai yang menyegerakkan nilai dengan localStorage dan kekal segerak merentas tab melalui peristiwa storan.

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  const set = useCallback((newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  }, [key]);

  return [value, set] as const;
}

Cangkuk Tersuai Berkongsi Logik, Bukan Keadaan

Setiap komponen yang memanggil cangkuk tersuai mendapat keadaan bebasnya sendiri. Cangkuk bukan objek tunggal — cangkuk ialah panggilan fungsi yang mencipta tika keadaan terpencil.

Konvensyen Penamaan

Nama cangkuk tersuai mesti bermula dengan use. Perkara ini dikuatkuasakan oleh peraturan pemeriksaan react-hooks ESLint, yang memastikan cangkuk dipanggil pada aras teratas dan dalam susunan yang betul.

Mengembalikan Berbilang Nilai

Cangkuk tersuai biasanya mengembalikan objek (nilai bernama) atau tupel (seperti useState). Tupel membolehkan penyahstruktur dengan nama tersuai; objek pula menerangkan dirinya sendiri.

// Tuple (like useState):
const [value, setValue] = useLocalStorage('key', 0);

// Object (more descriptive):
const { data, loading, error, refetch } = useFetch('/api/users');

Cangkuk useDebounce

Hadkan kemas kini nilai: kemas kini hanya selepas pengguna berhenti menaip selama kelewatan yang ditentukan.

function useDebounce<T>(value: T, delay: number): T {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

// Usage:
const debouncedSearch = useDebounce(searchTerm, 300);
useEffect(() => { search(debouncedSearch); }, [debouncedSearch]);

Cangkuk useMediaQuery

Membalut window.matchMedia dalam cangkuk untuk membaca hasil pertanyaan media CSS secara reaktif.

function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);

  useEffect(() => {
    const mq = window.matchMedia(query);
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [query]);

  return matches;
}

Menguji Cangkuk Tersuai

Gunakan utiliti @testing-library/react renderHook() untuk menguji cangkuk tersuai secara berasingan tanpa membalutnya dalam komponen.

import { renderHook, act } from '@testing-library/react';

test('useCounter increments', () => {
  const { result } = renderHook(() => useCounter(0));
  expect(result.current.count).toBe(0);
  act(() => result.current.increment());
  expect(result.current.count).toBe(1);
});

Pustaka Cangkuk Terbitan

Pustaka cangkuk komuniti menyediakan ratusan cangkuk yang telah diuji: @uidotdev/usehooks, react-use, usehooks-ts. Sebelum menulis cangkuk tersuai, semak sama ada versi yang telah diuji dengan baik sudah tersedia.

Semakan Pantas

Apakah yang berlaku kepada keadaan di dalam cangkuk tersuai apabila cangkuk itu dipanggil oleh dua komponen berbeza?

Jawab dalam pelajaran interaktif

Ringkasan: Cangkuk Tersuai

Cangkuk tersuai mengekstrak logik berkeadaan untuk digunakan semula. Namakan dengan awalan use. Setiap komponen yang memanggil cangkuk mendapat keadaan bebas. Kembalikan objek atau tupel. Corak biasa: useFetch, useLocalStorage, useDebounce, useMediaQuery. Uji dengan renderHook(). Semak pustaka komuniti sebelum menulis dari awal.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus
41
Pelajaran
163
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Hook Tersuai: Mengekstrak Logik Boleh Guna Semula” percuma?

Ya — teks penuh “Hook Tersuai: Mengekstrak Logik Boleh Guna Semula” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Hook Tersuai: Mengekstrak Logik Boleh Guna Semula”?

Pindahkan logik berstate ke dalam fungsi use* tersuai untuk berkongsi tingkah laku merentas komponen tanpa menduplikasi kod atau menaikkan state. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Hook Tersuai: Mengekstrak Logik Boleh Guna Semula” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

  1. useContext untuk State Global
  2. useReducer untuk State Kompleks
  3. useMemo dan useCallback untuk Prestasi
  4. Hook Tersuai: Mengekstrak Logik Boleh Guna Semula
← Kembali ke Frontend Academy