Membina Cangkuk Tersuai dalam React untuk Logik Boleh Digunakan Semula

React’s Hooks memperkenalkan cara yang berkuasa untuk mengurus keadaan dan kaedah kitaran hayat dalam komponen berfungsi. Satu ciri yang menonjol ialah keupayaan untuk mencipta cangkuk tersuai, yang membolehkan pembangun mengekstrak dan menggunakan semula logik merentas komponen. Cangkuk tersuai meningkatkan kebolehbacaan kod, kebolehselenggaraan dan kebolehskalaan dalam aplikasi React.

Dalam artikel ini, kami akan membincangkan apakah cangkuk tersuai, sebab ia berguna dan cara menciptanya dengan contoh praktikal.

Apakah itu Cangkuk Tersuai?
Cangkuk tersuai ialah fungsi JavaScript yang bermula dengan penggunaan awalan dan membolehkan anda merangkum logik boleh guna semula dengan cara deklaratif. Ia membolehkan anda menggabungkan berbilang cangkuk terbina dalam (seperti useState, useEffect, dll.) ke dalam satu fungsi yang boleh dikongsi merentas komponen.

Ciri Utama:

• Bermula dengan penggunaan (cth., gunakanCustomHook).
• Boleh menggunakan cangkuk React yang lain.
• Mengembalikan data, keadaan atau fungsi yang diperlukan oleh komponen.

Mengapa Gunakan Cangkuk Tersuai?

• Kebolehgunaan semula: Kongsi logik antara komponen tanpa kod pendua.
• Kebolehbacaan: Merangkumi logik kompleks, menjadikan komponen lebih ringkas dan lebih mudah dibaca.
• Pemisahan Kebimbangan: Asingkan logik kepada fungsi boleh guna semula, mematuhi prinsip kod bersih.
• Kebolehujian: Permudahkan ujian dengan mengasingkan logik daripada komponen.

Membuat Cangkuk Tersuai: Panduan Langkah demi Langkah
Mari buat cangkuk tersuai yang dipanggil useFetch untuk mengambil data daripada API. Cangkuk ini akan mengendalikan pengambilan, keadaan pemuatan dan pengurusan ralat.

1. Tentukan Cangkuk Tersuai
Buat fail baharu bernama useFetch.js:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    let isMounted = true; // Prevent setting state on unmounted components
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Error: ${response.status}`);
        }
        const result = await response.json();
        if (isMounted) {
          setData(result);
          setError(null);
        }
      } catch (err) {
        if (isMounted) {
          setError(err.message);
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    };

    fetchData();

    // Cleanup to avoid memory leaks
    return () => {
      isMounted = false;
    };
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

2. Gunakan Cangkuk Tersuai dalam Komponen
Begini cara anda boleh menggunakan useFetch dalam komponen:

import React from 'react';
import useFetch from './useFetch';

function App() {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts');

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

  return (
    <div>
      <h1 id="Posts">Posts</h1>
      <ul>
        {data.map((post) => (
          <li key="{post.id}">
            <strong>{post.title}</strong>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Anatomi Cangkuk Tersuai

1. Parameter Input:

• Parameter url membolehkan anda menentukan titik akhir API secara dinamik.

2. Pengurusan Negeri:

• useState digunakan untuk mengurus data, pemuatan dan keadaan ralat.

3. Cangkuk Kesan:

• useEffect melakukan kesan sampingan untuk mengambil data dan membersihkannya untuk mengelakkan kebocoran memori.

4. Nilai Pulangan:

• Cakuk mengembalikan objek dengan data, pemuatan dan ralat untuk memberikan semua maklumat yang diperlukan kepada komponen yang menggunakan.

Kes Penggunaan Dunia Sebenar untuk Cangkuk Tersuai

1. Pengendalian Borang: Cipta cangkuk useForm untuk mengurus keadaan borang dan pengesahan.
2. Pengesahan: Bangunkan cangkuk useAuth untuk mengendalikan logik pengesahan pengguna.
3. Pengurusan Tema: Laksanakan cangkuk useTheme untuk bertukar antara mod terang dan gelap.
4. Penomboran: Bina cangkuk usePagination untuk mengurus data penomboran dalam jadual atau senarai.

Amalan Terbaik untuk Menulis Cangkuk Tersuai

1. Gunakan Nama Deskriptif: Namakan cangkuk anda dengan jelas untuk menunjukkan tujuannya (cth., useFetch, useAuth).
2. Ikuti Peraturan Awalan penggunaan: Sentiasa mulakan nama fungsi dengan penggunaan untuk memastikan React mengenalinya sebagai cangkuk.
3. Kekalkan Fokus: Tulis cangkuk yang menangani bahagian fungsi tertentu.
4. Elakkan Kesan Sampingan dalam Render: Pastikan cangkuk tidak melakukan operasi yang menjejaskan pemaparan, seperti panggilan API tanpa useEffect.

Kesimpulan
Cangkuk tersuai ialah ciri berkuasa React yang membolehkan pembangun merangkum dan menggunakan semula logik merentas komponen. Dengan memisahkan logik daripada UI, mereka meningkatkan organisasi kod, kebolehbacaan dan kebolehgunaan semula. Sama ada anda mengambil data, mengurus borang atau mengendalikan pengesahan, cangkuk tersuai boleh menjadikan aplikasi React anda lebih cekap dan boleh diselenggara.

Mulakan dengan mengenal pasti logik berulang dalam komponen anda dan mengekstraknya ke dalam cangkuk tersuai. Hasilnya akan menjadi kod yang lebih bersih, lebih berskala yang lebih mudah difahami dan diselenggara.

Atas ialah kandungan terperinci Membina Cangkuk Tersuai dalam React untuk Logik Boleh Digunakan Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!