Memahami dan Mencipta Cangkuk Tersuai dalam React

Jadual Kandungan

1. Prasyarat
2. Pemasangan
3. Pengenalan
4. Apakah Cangkuk Tersuai?
5. Bilakah Anda Harus Mencipta Cangkuk Tersuai?
6. Contoh: Mencipta Cangkuk Tersuai
   • Langkah 1: Kenalpasti Logik Boleh Guna Semula
   • Langkah 2: Mengekstrak Logik ke dalam Cangkuk Tersuai
   • Langkah 3: Menggunakan Cangkuk Tersuai
7. Faedah Cangkuk Tersuai
8. Amalan Terbaik untuk Cangkuk Tersuai
9. Kesimpulan

Prasyarat:

Pastikan anda mempunyai pengetahuan latar belakang yang diperlukan dalam perkara ini:

Pengetahuan Asas React
Node.js dan npm

Pemasangan:

Untuk bermula dengan projek React baharu menggunakan Vite, ikut langkah berikut:

i. Buka terminal anda dan jalankan arahan berikut untuk mencipta projek baharu:

   npm create vite@latest my-react-app --template react

ii. Navigasi ke dalam direktori projek anda:

     cd my-react-app

iii. Pasang kebergantungan: Pasang pakej yang diperlukan untuk projek anda:

   npm install

iv. Mulakan pelayan pembangunan: Jalankan pelayan pembangunan:

    npm run dev

Apl React anda kini akan berjalan dan anda boleh melihatnya dalam penyemak imbas anda di http://localhost:5173.

pengenalan:

Apakah React Hooks?:

Cangkuk React ialah fungsi khas yang membolehkan anda menggunakan keadaan dan ciri React lain dalam komponen berfungsi. Cangkuk seperti useState dan useEffect adalah penting untuk menguruskan keadaan dan kesan sampingan.

Apakah Cangkuk Tersuai?:

cangkuk tersuai boleh digambarkan sebagai cara untuk menggunakan semula logik merentas berbilang komponen. Daripada mengulangi kod, anda boleh merangkumnya dalam cangkuk tersuai, menjadikan komponen anda lebih bersih dan kod anda lebih mudah untuk diurus. sama seperti cangkuk React apabila menggunakan cangkuk tersuai pastikan anda memulakan nama komponen anda dengan (gunakan diikuti dengan nama yang anda ingin berikan kepada komponen tersebut, cth useFetchData).useFetchData boleh menjadi Cangkuk tersuai yang mengambil data daripada API dan mengembalikannya kepada anda komponen.

memahami Hooks?

Memahami Cangkuk:
Cangkuk seperti useState, useEffect dan useContext membolehkan anda menggunakan keadaan dan ciri React yang lain tanpa menulis kelas. Ia adalah blok binaan yang membolehkan anda mengendalikan logik komponen secara modular.

Bilakah anda perlu membuat cangkuk tersuai?

Cakuk tersuai membolehkan anda menggunakan semula logik stateful merentas komponen yang berbeza. Contoh mudah ialah komponen pembilang, yang mempunyai kefungsian kenaikan, pengurangan dan penetapan semula, jika anda memerlukan logik yang sama dalam berbilang komponen, logik boleh dialihkan ke cangkuk tersuai. Contoh lain yang biasa digunakan ialah komponen yang mengambil data daripada API dan jika anda memerlukan logik yang sama dalam berbilang komponen, anda boleh mengalihkan logik itu ke cangkuk tersuai.

Contoh mencipta cangkuk tersuai

Contoh: biarkan buat App pembilang mudah dengan React hook(useState).in app.jsx

Langkah 1 mengenal pasti logik boleh guna semula

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev + 1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

dalam kod di atas, logik boleh guna semula termasuk keadaan balas, keadaan awal(o), penambahan, pengurangan dan fungsi set semula. kenaikan menambah 1 kepada keadaan awal manakala susut menolak 1 daripada keadaan awal, manakala set semula ditetapkan semula kepada keadaan awal pertama.

Langkah 2 mengekstrak logik ke dalam cangkuk tersuai

kita boleh mencipta folder dalam folder src bernama Hooks, kemudian fail dipanggil useCouter.jsx untuk cangkuk tersuai seperti yang ditunjukkan di bawah.

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev + 1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

Langkah 3 menggunakan cangkuk tersuai

sekarang, Mari gunakan cangkuk tersuai kami dalam App.jsx.

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Contoh 2.

Mari buat cangkuk tersuai useFetch untuk semua panggilan API.

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

penggunaan

dalam App.jsx, kami boleh menggunakan cangkuk tersuai ini untuk mengambil nama pengguna daripada pemegang tempat JSON seperti yang ditunjukkan di bawah;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Faedah cangkuk tersuai

Kebolehgunaan semula:

Salah satu faedah utama ialah kebolehgunaan semula. Anda boleh menggunakan cangkuk tersuai yang sama dalam berbilang komponen, mengurangkan pertindihan kod.

Pengasingan Kebimbangan:

Cakuk tersuai membantu anda memisahkan logik daripada UI. Komponen anda menumpukan pada pemaparan, manakala cangkuk tersuai mengendalikan logik.

Komponen yang lebih bersih:

Dengan mengalihkan logik kompleks ke cangkuk tersuai, komponen anda menjadi lebih mudah dan lebih mudah difahami.

Amalan terbaik untuk cangkuk tersuai

Konvensyen Penamaan:

Kail tersuai harus bermula dengan perkataan "gunakan" untuk mengikuti konvensyen penamaan React. Ini juga membantu dalam mengenal pasti cangkuk dengan cepat dalam kod anda.

Contoh: useFetch, useForm, useAuth.

Mengendalikan Kebergantungan:

Apabila menggunakan cangkuk seperti useEffect di dalam cangkuk tersuai, pastikan anda mengendalikan kebergantungan dengan betul untuk mengelakkan pepijat atau pemaparan semula yang tidak perlu.

Mengelakkan Paparan Semula yang Tidak Perlu:

Optimumkan cangkuk tersuai anda dengan menghafal nilai atau menggunakan cangkuk seperti useCallback dan useMemo untuk mengelakkan menjalankan semula pengiraan mahal atau mengambil semula data.

Kesimpulan

kami telah meneroka konsep cangkuk tersuai dan peranannya dalam memudahkan dan meningkatkan pembangunan aplikasi React. Dengan mencipta cangkuk tersuai, anda boleh merangkum dan menggunakan semula logik stateful, yang membantu dalam memastikan komponen anda bersih dan boleh diselenggara.

Lihat projek di GitHub: Repositori GitHub Saya

Atas ialah kandungan terperinci Memahami dan Mencipta Cangkuk Tersuai dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!