Menggunakan Semula Logik dalam Reaksi dengan Cangkuk Tersuai: panduan Praktikal

Cakuk tersuai ialah ciri berkuasa dalam React yang digunakan untuk tujuan yang lebih khusus tidak seperti cangkuk terbina dalam React, dan ia dilakukan dengan merangkum fungsi biasa ke dalam fungsi bebas. cangkuk tersuai menggalakkan kebolehgunaan semula, menambah baik organisasi komponen dan meningkatkan kebolehselenggaraan kod secara keseluruhan.

Dalam panduan ini akan menyelami tujuan menggunakan cangkuk tersuai, memahami asas mencipta cangkuk tersuai dan cara menggunakannya komponen lain. maka kami akan menggambarkan contoh dunia sebenar dengan membina cangkuk tersuai API fetch.

Memahami asas

biasanya pembangun takut dengan istilah cangkuk tersuai jadi mari kita demystify ia.

cangkuk tersuai hanyalah fungsi yang bermula dengan awalan penggunaan (yang penting untuk cangkuk tersuai berfungsi).
fungsi ini terdiri daripada logik boleh guna semula yang menggunakan cangkuk terbina dalam React. biasanya anda mempertimbangkan untuk menggunakan cangkuk tersuai jika anda mempunyai logik yang sama merentas berbilang komponen jadi dengan menggunakan cangkuk tersuai, anda boleh menyelesaikan berbilang isu seperti meningkatkan organisasi dan kebolehselenggaraan kod.

Mencipta cangkuk tersuai yang mudah

Contoh di bawah ialah cangkuk tersuai pembilang mudah yang mengurus keadaan kiraan menggunakan cangkuk useState dan mengemas kini kiraan masing-masing menggunakan fungsi kenaikan atau penurunan yang hanya menetapkan keadaan kiraan.

import { useState } from 'react'

const useCount = () => {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return { count, increment, decrement }
}

export default useCount;

tahniah anda baru sahaja membina cangkuk tersuai anda sendiri, ia agak mudah. seterusnya akan menyelami cara menggunakan cangkuk ini

Menggunakan cangkuk tersuai dalam komponen

menggunakan cangkuk tersuai dalam komponen lain hanya dilakukan dengan memusnahkan nilai yang dikembalikan membentuk cangkuk tersuai di dalam komponen lain

import useCount from 'customHooks'

const Page = () => {
  const {count, increment, decrement} = useCount()

  return(
    <div>{ count }</div>
    <button onClick={increment}> + </button>
    <button onClick={decrement}> - </button>
  )
}

export default Page

Contoh dunia sebenar menggunakan cangkuk tersuai

salah satu logik yang paling berulang ialah mengambil API, tapak e-dagang akan mengambil data untuk pengesahan, proses pembayaran, memaparkan semua produk, ulasan, ulasan ... dll.

anda boleh bayangkan jumlah logik pengambilan berulang di seluruh aplikasi yang boleh dipermudahkan menggunakan cangkuk tersuai.

dalam bahagian ini akan mencipta cangkuk pengambilan tersuai.

kami akan menggunakan useState dan useEffect terbina dalam cangkuk React
kita akan mempunyai keadaan untuk data, keadaan belum selesai sekiranya kita mahu menunjukkan pemutar semasa data sedang diambil dan keadaan ralat sekiranya berlaku kegagalan pengambilan.

kod di bawah adalah penjelasan sendiri. di dalam useEffect kami mentakrifkan fungsi fetchData yang tidak segerak dan yang akan mengendalikan logik pengambilan. di bawah useEffect cangkuk tersuai akan mengembalikan nilai berikut yang boleh digunakan dalam semua data komponen lain, belum selesai, ralat.

perhatikan bahawa kami menghantar nilai url untuk digunakanFetch paramater cangkuk tersuai yang bermaksud data boleh dihantar ke cangkuk tersuai

import {useState, useEffect} from 'react'

const useFetch = (url: string) => {
  const [data, setData] = useState<any>([])
  const [pending, setPending] = useState(false)
  const [error, setError] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      setPending(true)

      await fetch(url)
        .then(result => {
          if (!result.ok) throw new Error('something went wrong!')
          return result.json()
        })
        .then(result => {
          setData(result)
          setPending(false)
        })
        .catch(error => setError(error))
    }

   fetchData()
  }, [url])

  return { data, pending, error }

}

export default useFetch

dengan menggunakan cangkuk useFetch di dalam komponen Halaman kini kami boleh memaparkan mesej kepada pelanggan sekiranya berlaku ralat, menunjukkan pemutar semasa data sedang diambil dan akhirnya memaparkan data kepada pelanggan.

komponen ini boleh digunakan berulang kali merentas semua aplikasi yang mengurangkan jumlah kod berulang.

import useFetch from './hooks/useFetch'
import Spinner from "./icons/Spinner"

const Page = () => {
  const {data, pending, error} = useFetch('https://jsonplaceholder.typicode.com/posts')

  if(error) <div>Cloud not fetch data from the server</div>

  return(
    {pending ? 
     ( <Spinner />)
     :
     (
      data.map((item) => (
        <div>
          <h3>{item.title}</h3>  
          <p>{item.body}</div>
        </div>
       )
      )
    )}
  )
}

export default Page;

Kesimpulan

Cakuk tersuai menawarkan mekanisme yang berkuasa untuk merangkum dan menggunakan semula logik dalam komponen React, Dengan mengekstrak fungsi biasa ke dalam fungsi khusus, anda boleh meningkatkan organisasi kod, meningkatkan kebolehselenggaraan dan mempromosikan kebolehgunaan semula kod.

Kami telah meneroka asas mencipta cangkuk tersuai, memahami cara menggunakannya dalam komponen React dan menunjukkan contoh dunia sebenar menggunakan cangkuk tersuai.

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