Tingkatkan Permainan Reaksi Anda dengan Cangkuk Tersuai: Panduan Seronok dan Praktikal

Hai, rakan-rakan peminat React! Jika anda seperti saya, anda suka bagaimana React menjadikan membina antara muka pengguna dengan mudah. Tetapi kadangkala, kita mendapati diri kita mengulangi logik yang sama merentas komponen yang berbeza. Di situlah cangkuk tersuai masuk—ia seperti kuasa besar rahsia yang menjadikan kod kami lebih bersih dan lebih cekap. Mari selami dunia cangkuk tersuai dan lihat cara mereka boleh meningkatkan permainan React kami.

Apa Itu Cangkuk, Bagaimanapun?

Perkara pertama dahulu, mari kita buat rekap pantas tentang apa itu cangkuk. Diperkenalkan dalam React 16.8, cangkuk membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Beberapa cangkuk terbina dalam yang paling popular ialah useState, useEffect dan useContext.

Contoh Cangkuk Terbina dalam

import React, { useState, useEffect } daripada 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Dalam contoh mudah ini, useState dan useEffect bekerjasama untuk menguruskan keadaan dan kesan sampingan. Ia bersih, ringkas dan berkuasa.

Mengapa Anda Perlu Mengambil berat tentang Cangkuk Tersuai?

Cakuk tersuai adalah mengenai kebolehgunaan semula dan memastikan komponen anda bersih. Mereka membenarkan anda mengekstrak dan berkongsi logik antara komponen. Anggap ia sebagai kotak alat peribadi anda, di mana anda boleh menyimpan fungsi berguna dan menggunakannya apabila diperlukan.

Faedah Cangkuk Tersuai

• Kebolehgunaan semula: Tulis sekali, gunakan di mana-mana. Kongsi logik merentas komponen berbeza tanpa menduplikasi kod.
• Kebolehbacaan: Pastikan komponen anda fokus pada pemaparan, menjadikannya lebih mudah dibaca dan diselenggara.
• Kebolehselenggaraan: Kemas kini logik di satu tempat, dan ia dapat dilihat di mana-mana mata kail digunakan.

Mari Bina Cangkuk Tersuai Bersama-sama

Bayangkan anda mempunyai beberapa komponen yang perlu mengambil data daripada API. Daripada menulis logik pengambilan yang sama dalam setiap komponen, anda boleh membuat cangkuk tersuai untuk mengendalikannya. Mari buat useFetch.

Langkah demi Langkah: Mencipta useFetch

1. Buat Cangkuk: Mulakan dengan mencipta 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(() => {
        const fetchData = async () => {
          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 (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. Gunakan Cangkuk: Sekarang, mari gunakan useFetch dalam komponen.

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

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

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

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