Cangkuk Tersuai dalam React

A Custom Hook ialah fungsi JavaScript yang membolehkan anda menggunakan semula logik stateful merentas berbilang komponen dalam aplikasi React. Cangkuk tersuai ialah alat berkuasa untuk merangkum logik yang boleh dikongsi antara komponen, memastikan komponen bersih dan menggalakkan kebolehgunaan semula kod.

Cakuk tersuai diawali dengan penggunaan, untuk mengikut konvensyen React dan boleh menggunakan cangkuk lain di dalamnya (seperti useState, useEffect, useContext, dll.).

Mengapa Gunakan Cangkuk Tersuai?

Cangkuk tersuai memberikan beberapa faedah:

1. Kebolehgunaan Kod: Mereka membenarkan anda mengekstrak logik boleh guna semula daripada komponen anda. Jika anda mempunyai logik yang perlu dikongsi antara berbilang komponen, anda boleh mengekstraknya ke dalam cangkuk tersuai.
2. Pemisahan Kebimbangan: Dengan mengalihkan logik kompleks daripada komponen, cangkuk tersuai boleh membantu memastikan komponen lebih fokus pada UI pemaparan, yang meningkatkan kebolehbacaan dan kebolehselenggaraan.
3. Abstraksi: Ia menyediakan cara untuk mengabstraksikan logik kompleks, menjadikan komponen anda lebih bersih dan lebih mudah difahami.

Cara Membuat Cangkuk Tersuai

Untuk membuat cangkuk tersuai, ikut langkah berikut:

1. Tulis fungsi: Fungsi harus mengandungi logik yang anda mahu gunakan semula.
2. Gunakan cangkuk terbina dalam: Di dalam fungsi, anda boleh menggunakan cangkuk React lain seperti useState, useEffect atau mana-mana cangkuk lain untuk menguruskan keadaan atau kesan sampingan.
3. Kembalikan nilai: Kembalikan keadaan, fungsi atau nilai yang diperlukan daripada cangkuk tersuai untuk digunakan dalam komponen.

Contoh Asas Cangkuk Tersuai

Berikut ialah contoh mudah cangkuk tersuai yang menguruskan kedudukan tetikus:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Penjelasan:

• Kail tersuai useMousePosition menjejaki kedudukan tetikus pada skrin.
• Ia menggunakan useState untuk mengurus keadaan koordinat tetikus (x dan y).
• Ia menggunakan useEffect untuk menambah pendengar acara untuk acara mousemove dan membersihkannya apabila komponen dinyahlekap atau kesannya dijalankan semula.
• Cakuk mengembalikan kedudukan tetikus (x dan y), yang boleh digunakan oleh mana-mana komponen yang mengimport dan memanggil useMousePosition.

Menggunakan Cangkuk Tersuai dalam Komponen

Kini, anda boleh menggunakan cangkuk tersuai ini dalam mana-mana komponen untuk mengakses kedudukan tetikus:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Penjelasan:

• Komponen MouseTracker menggunakan cangkuk tersuai useMousePosition untuk mengakses kedudukan tetikus.
• Setiap kali tetikus dialihkan, kedudukan dikemas kini dan komponen itu dipaparkan semula untuk memaparkan koordinat baharu.

Contoh Lanjutan: Cangkuk Tersuai untuk Pengendalian Borang

Anda boleh membuat cangkuk tersuai untuk logik yang lebih kompleks, seperti pengendalian borang.

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

const MouseTracker = () => {
  const position = useMousePosition();  // Using the custom hook

  return (
    <div>
      <h2>Mouse Position:</h2>
      <p>X: {position.x}, Y: {position.y}</p>
    </div>
  );
};

export default MouseTracker;

Penjelasan:

• Cangkuk useFormInput mengambil nilai awal dan mengembalikan nilai input dan fungsi handleChange.
• Cangkuk boleh digunakan dalam sebarang komponen bentuk untuk mengurus keadaan input borang.

Menggunakan Cangkuk Bentuk dalam Komponen

Kini, anda boleh menggunakan useFormInput dalam komponen borang:

import { useState } from 'react';

// Custom Hook to handle form input
const useFormInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return {
    value,
    onChange: handleChange,
  };
};

export default useFormInput;

Penjelasan:

• Kait useFormInput digunakan untuk mengendalikan keadaan dan menukar acara untuk kedua-dua nama dan input e-mel.
• Fungsi handleSubmit merekodkan nilai borang apabila borang diserahkan.

Peraturan untuk Cangkuk Tersuai

Cakuk tersuai mengikut peraturan yang sama seperti cangkuk React:

1. Hanya panggil cangkuk di peringkat atas: Jangan panggil cangkuk secara bersyarat atau dalam gelung.
2. Panggil cangkuk sahaja daripada fungsi React: Cangkuk tersuai hanya boleh dipanggil daripada komponen berfungsi React atau cangkuk tersuai yang lain.
3. Mulakan dengan penggunaan: Cangkuk tersuai mesti bermula dengan awalan penggunaan untuk membezakannya daripada fungsi JavaScript biasa.

Menggunakan Cangkuk Tersuai untuk Kesan Sampingan

Cakuk tersuai juga boleh digunakan untuk mengendalikan kesan sampingan, seperti mengambil data.

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

const MyForm = () => {
  const nameInput = useFormInput('');
  const emailInput = useFormInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Name:', nameInput.value);
    console.log('Email:', emailInput.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input type="text" {...nameInput} />
      </div>
      <div>
        <label>Email:</label>
        <input type="email" {...emailInput} />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

Penjelasan:

• useFetchData ialah cangkuk tersuai yang mengambil data daripada API.
• Ia mengurus data, isLoading dan keadaan ralat.
• Cangkuk boleh diguna semula dalam mana-mana komponen yang perlu mengambil data daripada API.

Menggunakan Cangkuk Data Ambil dalam Komponen

Begini cara anda boleh menggunakan cangkuk useFetchData dalam komponen:

import { useState, useEffect } from 'react';

// Custom Hook to track mouse position
const useMousePosition = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

  useEffect(() => {
    const updatePosition = (event) => {
      setPosition({ x: event.clientX, y: event.clientY });
    };

    // Add event listener for mouse movement
    window.addEventListener('mousemove', updatePosition);

    // Clean up the event listener
    return () => {
      window.removeEventListener('mousemove', updatePosition);
    };
  }, []);

  return position;
};

export default useMousePosition;

Penjelasan:

• DataComponent menggunakan cangkuk tersuai useFetchData untuk mengambil data daripada API.
• Komponen mengendalikan pemuatan, ralat dan memaparkan data yang diambil berdasarkan keadaan yang dikembalikan daripada cangkuk tersuai.

Ringkasan Cangkuk Tersuai

• Cakuk tersuai membolehkan anda merangkum dan menggunakan semula logik dalam aplikasi React anda.
• Ia membantu memastikan komponen anda bersih dengan mengabstraksikan logik yang kompleks.
• Cakuk tersuai boleh menggunakan cangkuk terbina dalam seperti useState, useEffect dan lain-lain, dan ia mengikut peraturan yang sama seperti cangkuk React.
• Kes penggunaan biasa untuk cangkuk tersuai termasuk mengurus input borang, mengambil data, mengendalikan kesan sampingan dan banyak lagi.

Atas ialah kandungan terperinci Cangkuk Tersuai dalam Reaksi: Menggunakan Semula Logik Merentas Komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!