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

); } export default DataFetchingComponent;

Salin selepas log masuk

Memecahkannya

• Pengurusan Negeri: useFetch mengurus data, pemuatan dan keadaan ralat.
• Effect Hook: useEffect mencetuskan pengambilan data apabila komponen dipasang atau URL berubah.
• Logik Async: Fungsi fetchData mengendalikan panggilan API dan mengemas kini keadaan sewajarnya.

Meningkatkan Tahap dengan Cangkuk Tersuai Terperinci

Cakuk tersuai boleh menjadi semudah atau sekompleks yang anda perlukan. Mari kita pertingkatkannya dengan cangkuk untuk mengurus input borang: useForm.

Mencipta useForm

import { useState } from 'react';

    function useForm(initialValues) {
      const [values, setValues] = useState(initialValues);

      const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({
          ...values,
          [name]: value,
        });
      };

      const resetForm = () => {
        setValues(initialValues);
      };

      return { values, handleChange, resetForm };
    }

    export default useForm;


### Using `useForm`

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

    function FormComponent() {
      const { values, handleChange, resetForm } = useForm({ username: '', email: '' });

      const handleSubmit = (event) => {
        event.preventDefault();
        console.log(values);
        resetForm();
      };

      return (
        <form onSubmit={handleSubmit}>
          <label>
            Username:
            <input type="text" name="username" value={values.username} onChange={handleChange} />
          </label>
          <br />
          <label>
            Email:
            <input type="email" name="email" value={values.email} onChange={handleChange} />
          </label>
          <br />
          <button type="submit">Submit</button>
        </form>
      );
    }

    export default FormComponent;

• Pengurusan Negeri: useForm menggunakan useState untuk mengendalikan nilai input borang.
• Tukar Pengendali: handleChange mengemas kini keadaan berdasarkan input pengguna.
• Fungsi Tetapkan Semula: resetForm menetapkan semula borang kepada nilai awalnya.

Cakuk tersuai ialah cara yang luar biasa untuk menjadikan kod React anda lebih modular, boleh dibaca dan boleh diselenggara. Dengan mengekstrak logik biasa ke dalam cangkuk tersuai, anda memastikan komponen anda tertumpu pada perkara terbaik yang mereka lakukan: memaparkan UI.

Mulakan percubaan dengan cangkuk tersuai dalam projek anda. Percayalah, sebaik sahaja anda mula menggunakannya, anda akan tertanya-tanya bagaimana anda pernah hidup tanpa mereka. Selamat mengekod!

Atas ialah kandungan terperinci Tingkatkan Permainan Reaksi Anda dengan Cangkuk Tersuai: Panduan Seronok dan Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!