Cangkuk Tersuai dalam Reaksi: Mengapa dan Cara Membuatnya

React telah menjadi salah satu perpustakaan paling popular untuk membina antara muka pengguna, sebahagian besarnya disebabkan pendekatan modularnya dan ciri berkuasa seperti cangkuk. Antaranya, cangkuk tersuai menonjol sebagai cara untuk menjadikan kod anda lebih bersih, lebih boleh digunakan semula dan lebih mudah diselenggara. Dalam artikel ini, kami akan meneroka sebab anda perlu menggunakan cangkuk tersuai dan cara menciptanya dengan berkesan.

---

Mengapa Buat Cangkuk Tersuai?

Cakuk tersuai membolehkan anda merangkum logik boleh guna semula dengan cara yang bersih dan modular. Ia membantu memperkemas kod anda dan memberikan beberapa kelebihan:

1. Kebolehgunaan Semula Kod: Cangkuk tersuai membolehkan anda menulis sekeping logik sekali dan menggunakannya semula merentas berbilang komponen. Ini mengurangkan pertindihan dan memastikan aplikasi anda konsisten.

2. Komponen Pembersih: Dengan mengalihkan logik ke dalam cangkuk tersuai, anda boleh memudahkan komponen anda, memfokuskannya pada memaparkan UI daripada mengurus keadaan atau kesan sampingan.

3. Peningkatan Kebolehujian: Memandangkan cangkuk tersuai ialah fungsi kendiri, anda boleh menulis ujian unit untuknya tanpa bergantung pada UI komponen.

4. Pemisahan Kebimbangan: Cangkuk tersuai menggalakkan pengasingan kebimbangan yang lebih baik dengan mengasingkan logik daripada pembentangan.

---

Cara Membuat Cangkuk Tersuai

Cakuk tersuai ialah fungsi JavaScript yang namanya bermula dengan "guna" dan boleh memanggil cangkuk React lain di dalamnya (cth., useState, useEffect, dll.).

Langkah-langkah untuk Membuat Cangkuk Tersuai:

1. Kenal pasti logik boleh guna semula dalam komponen anda.
2. Alihkan logik ke dalam fungsi baharu.
3. Awalan nama fungsi dengan "use" (cth., useFetch).
4. Gunakan cangkuk di dalam fungsi ini untuk menguruskan keadaan atau kesan sampingan.
5. Kembalikan keadaan atau fungsi yang diperlukan daripada cangkuk tersuai.

---

Contoh: Cangkuk Tersuai untuk Mengambil Data

Katakan anda perlu mengambil data daripada API dalam berbilang komponen. Daripada menduplikasi logik dalam setiap komponen, anda boleh membuat cangkuk tersuai untuk mengendalikan pengambilan data.

Pelaksanaan:

import { useState, useEffect } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Cara Menggunakan Cangkuk Tersuai:

Kini anda boleh menggunakan useFetch dalam mana-mana komponen untuk mengambil data:

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

function App() {
  const { data, loading, error } = useFetch("https://api.example.com/data");

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

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